How to to create and connect CMS - Stuck in the latest step

Hey there,

I’ve been following this tutorial up until this exact minute, and everything was going well: Tutorial Link

However, I’ve noticed that when linking the items on the blog page to the single blog page, yours uses a link item, while mine is a Div element. How can I convert my Div to a link?

Thanks in advance!

@Yaiza

Select your “Item” element, then in navbar find the link element and then right click on it.

Right click - Replaces the element

1 Like

Hi @dejan,

Thanks for your quick response.

When I change it to a link, it messes up the design.

Before:

After:

Any suggestions on how to maintain the design while using a link?

Appreciate your help!

@Yaiza

Seems like you already have link inside that Item element, and it’s not possible to have link inside link.

So what I would suggest, converting second link into span or paragraph or similar.

Just to add on top Dejan,

actually it is possible to have a link inside of the link with one little trick explained here: How can I add link inside link? - #2 by Pakic

But I would agree that in this case, converting link that inside to span or paragraph makes more sense, since idea is to wherever you click, to go the same place.

Hi @dejan,

That was the issue, the link inside. It worked perfectly.

@pakic it’s great to know I can use a link inside for other scenarios. Thanks for the help!

Good news, the link issue got sorted out. But now, I’m facing a new problem – this section seems to be getting cut off. I’ve added padding, but it’s still not working. Any suggestions?

1 Like

Hey @Yaiza, at first look I’d say that you have some fixed width to some tags, but to give you a precise answer I’d need to take a look at your project, so if you can provide me with a link it would be nice.

Hi @Darko,

Thanks for your quick response. My website link is tanic.divhunt

Many thanks!

Hey @darko,

I’ve been trying to see if there are any fixed width tags as you mentioned, but I couldn’t find any. Not sure what the issue might be. Any insights?

Thanks!

1 Like

Hey @Yaiza, here is the problem:

You have a fixed width on your H3 tag that is pushing everything to the right and making additional space. You just need to remove it and it will work properly.

Hey @darko,

I swapped that one out and put in a 70% width, so the text takes up most of the space. But it’s still getting cut when the window size is reduced. Any way to make it responsive and not get cut?

Attaching screenshots.


1 Like

It’s not wise to set a fixed width and minimum width in this case, you can set your width in percent which will help resize your tag. When you set width or min-width in pixels that tag will push everything and it will make a mess in your project, but if you want to set precise width, you can do so and set some custom breakpoints and then fix it on smaller devices.

Thanks for your advice, @darco! I appreciate your input on setting widths in percentages for responsiveness. So, is ok to only set the H3 to 70% min?

I gone ahead and add the the breakpoints as suggested, but still I can see it appear cut: New Recording - 28/08/2023, 15:22:52 Your insights would be really helpful. Thanks again!

Hi @Darko, circling back on this. Is there any way I can fix this? Appreciate your insights!

Hey @Darko,

Popping in again on this one. Got any fixes or tips? Always value your insights! Thanks in advance!

Hey Yaiza,

Can you give me your website and explain me a bit better what you are trying to do?
You want title to take 70% of space on the left size, and button read more to take 30% on the right?

Better alternative for this is, if button is always the same, you might want to set it to fixed width like 100px, and set flex: 1 on your h3, so it can take rest of the space.

If this is something you are trying to achieve, give me link of your website and I will create a video tutorial on how to do it.

Hi @pakic,

I’d like the title to occupy around 70% of the space on the left, while the “Read More” button and arrow on the right shouldn’t take up more than 30% of the space. The main concern is to make it responsive so the whole grid doesn’t appear cut. At the moment I set the customisation for different break point, but still I can see it gets cut at some point.

Here’s the link to my website: Tanic | Blog. I appreciate your offer to create a video tutorial – that would be really helpful!

Thanks so much for your help!

Hey @darko @dejan, if creating a video tutorial is too time-consuming, that’s totally cool. Is there a chance you could explain it here?