Mobile Optimization

so I want to show them in inline on the mobile version but I am unable to do that.🙂

Do you want them to be like this on mobile?
https://www.screencast.com/t/74kUIq1f0

If so, you just need to remove the margins you added to the Grid Containers on mobile.

No no, I want to show them in inline (like a nav menu design where all menus are alongside), I want them to look alongside. is that possible? or for better understanding I want to show them as they look on the desktop version but with small fonts so they all can fit in 1 or 2 lines symmetrically

I want to show them in inline (

In that case, you don't need to use Grid block at all, you can simply enable the inline width option of headlineblock:
https://docs.generateblocks.com/article/headline-overview/#spacing

nope see the link again I provided you earlier I deleted the grid I used inline width but they are not alongside

yep it worked sorry the width was set to 25%

Glad to hear that :)

ok, so the next problem will be the GP shape I used they are overlapping in the tablet and mobile versions so what should I do? (same link)

Sorry can you provide the link again as I marked it as resolved which erased the link?

Thanks!

Here is the link

Ah I see what you mean, so it's not related to the original topic.

It's better to open a new topic next time, it's easier for us to archive the topics, thanks!

1. You can set different shape height for mobile, so set a smaller value.

2. Add more padding to the container block on mobile.

Can I not just stop the overlapping by z-index? is it possible that the shape will be in the background and the images will be the over the shapes?

That should work too, try set inner container z-index to 2.

umm didn't understand. Can you tell me what to do with my design, u can say for one section I can do that for others

1. Select the container block which has a shape added.

2. Go to the spacing tab, set the inner z-indexto 2:
https://docs.generateblocks.com/article/container-overview/#spacing