Responsive grid problem

[finkk]

Hello there,

I have built a mobile header using the grid element. All is well until I get down to the smallest screen size - the right hand cells are cut off. Any idea why?

Home - Make Innovation Inevitable | Transformation, Strategy, Digital Product...

Kind Regards,

Spencer

[ruenel]

Hello Spencer,

Thanks for writing in! You will need to set a Responsive Styling for your column layout in your Grid settings. In your Grid element settings, click the word “Columns” and you will have this:

To have a full understanding in use the Grid element, you can check out this video series:

Best Regards.

[finkk]

Hi @ruenel,

Thanks for getting back. I hop you had a nice weekend

My client would like to keep the three columns in the header even on small devices. I know…

The grid does not seem to be shrinking on small screens. What do you think?

Kind Regards,

Spencer

[tristup]

Hi Spencer,

I have checked your website header but didn’t find the Grid in the Bar 2 - Mobile. If you have not set the Grid yet, please set and follow the suggestion given by my colleague. Please let us know , if you have any further issue with this.

Thanks

[finkk]

Sorry @tristup,

The problem is with Bar 3 - Mobile. I have just renamed it.

We are trying to balance the left and right columns so the logo sits in the centre.

We are using 1fr. Can we make the grid shrink to fit the browser window?

Kind Regards,

Spencer

[christian]

Hey Spencer,

I believe you’ve given us the wrong URL. Like my Tristup, I don’t see the Grid nor the Bar 3 - Mobile that you mentioned. You can see what I see in the screenshot in the secure note. You only have 1 header, by the way and your the screenshot in your first post looks different than what I see.

Please provide the correct URL or direct us to exactly where we can see the Grid.

Thanks.

[finkk]

Hi @christian,

I am so sorry! I am spinning plates and sent the wrong URLs.

Please see here: http://odettel13.sg-host.com/cornerstone/headers/18

Apologies again for the confusion

Kind Regards,

Spencer

[tristup]

Hi Spencer,

I have checked the Header and found the problem you described here. There are few settings which I have changed to make that column adjusted in the smaller screens. The Global Container need to deselect, and width need to be set 80% for the Mobile breakpoint.

Then you need to adjust the Gap Width to 25px maintain the Gap between the columns.

Note: You may need to adjust the Gap Width as per your need.

Thanks