Global Block Responsiveness

[jamievilasini]

Hi Everyone,

I’ve created a global block with a block quote and inserted into a grid element. Its not working responsively though. The way that it is working on desktop is the same way it should work on mobile, but for some reason on the mobile breakpoints its getting some weird padding or margin on the right and causing it to look too narrow and broken. I was inspecting it but still couldnt find out the culprit - i’m assuming i’ve entered in some errant padding or margin somewhere. Or do i need to add some more code to the actual block element to make it responsive? I want the typography to remain the same, its just the size of the element itself that needs adjusting on mobile.

Thanks!

[jade]

Hi @jamievilasini,

Try editing your global block and edit the row settings of the row where the block quote is, then disable the Global Container option of the Row:

Hope this helps.

[jamievilasini]

Hi @Jade,

Thank you! Actually this alone did not work. It turns out that it looks fine on mobile size. It was mobile landscape and tablet that was the issue. I had to go in and edit the grid so that on the tablet size it was showing 1fr instead of 1fr 1fr. I thought tablet and mobile landscape could handle this element but this seems to be the issue. So now its stacking on tablet, which isn’t ideal but at least its better than it was. Thanks for your help.

[jamievilasini]

Actually @Jade my problem still exists… see screenshot of what happens when i resize my browser.
ugh! can you help?

[jade]

Hi Jamie,

You just need to set the row layouts to all devices to 1 column.

Hope this helps.