Make content align differently for mobile

Support
#1

Hi there,

So I have a page with a grid system in place.

It looks great until it gets to mobile.

Is there a way to make items that are supposed to float up top float underneath?

Here are some screenshots:

On desktop:

So what is happing is, as the screen shrinks, the bottom left picture in the image above floats to directly below the image in the top right. Like in the image below.

On mobile:

But what I’d like is the text ‘BENTO BOXES’ to float above the image in the bottom left corner placing itself in between the two images.

Is there a way?

Thank you!

#2

Hi There,

That could be done with the Hide Based On Screen Width option.

Please duplicate the BENTO BOXES text then move this above the image, after that hide it on desktop screen width:

The other BENTO BOXES should be hided on mobile screen width as well:

Hope it helps :slight_smile:

#3

Worked like a charm!

#4

Thanks for letting us know that it has worked for you.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.