Images on Auto demo Homepage

[rollnscroll]

Hello,

We’ve imported AUTO demo data to build our site. We’ve built quite bit and are near completion. However, it’d be great if you can guide us on how NOT to show the parts highlighted with green arrows (see screenshots) of the Home page images on mobile devices. These are properly displayed alongside the text sections on bigger screens. But become partly visible at the top or bottom of the text sections on smaller devices.

Please look at the two screenshots:

Thanks.

[friech]

Hi There,

Thank you for writing in, please inspect those Columns, and under the Customize tab you’ll see an Hide During Breakpoints options

Enable the 2 mobile options (small and extra small) so those section will be hidden on mobile view.

Hope it helps,
Cheers!

[rollnscroll]

Hi Friech,

From what we’ve understood:

• The car steering image is the background for the entire row.
• Column 2 has text information over red background.
• Column 1 has nothing, which according to you can be hidden on small devices. However, when we click on it to update the settings, we don’t see Hide During Breakpoints option. Please have a look at the attached screenshot of what we get to see in our development environment:

Is there something we’re missing out on at our end?

[Prasant]

Hello @rollnscroll,

Thanks for asking.

Classic Column, elements don’t come with Hide During Breakpoints feature. Only Classic section and Row have that feature and in known as Hide based on screen width https://cl.ly/2T471g2M401k.

Screenshot that my colleague has shared is for V2 elements.

Thanks.

[rollnscroll]

Thanks for sharing the video instructions, Prashant.
So, is there no way to achieve what we’ve described in our first post?

[rad]

Hi there,

It’s the gap element in the first column where the background is visible (gap are spaces and it’s transparent). You may use Hide during break points to hide those gaps from mobile devices.

Thanks!

[rollnscroll]

Hi Rad, your suggestion seems to contradict your colleague Prashant’s.
Or maybe we here at our end aren’t understanding some things correctly. Please guide us.

[christian]

Hey @rollnscroll,

We’re sorry for the confusion. @Rad’s answer does not contradict. It actually is the fact. What started the confusion is @friech assumed you’re using a V2 column and then @Prasant followed up only on that context.

It is the Gap element that makes that section visible on mobile. It is only hidden in desktops.

To see the Gap element, click on the Responsive Viewer and switch to a mobile screen width. Then, you will see the Gap element and you can hide it in all screen sizes.

If that sounds confusing, here’s a screencast.

Hope that helps.

[rollnscroll]

Thank you very much, Chris. The detailed screencast helped in resolving the issue.

Thanks again.

[christian]

You’re welcome, @rollnscroll.