-
Posts
-
I have a 1/1 layout item with background picture and within it some text and a button. It looks fine at normal width and I am going to make a separate layout for the mobile view. However when making the browser widow less wide as some people might do the background image crops on both sides, which is an issue because the clients imagery has the CEO of the company off to the extreme left. The text and button stay centered whites great but the image crops.
So is there a way to have this entire 1/1 layout item with all of its contents and the background image became responsive and change size both vertically and horizontally to hold its shape when the browser is less wide but before the mobile breakpoint?
You can see the 1/1 layout item at the top of then home page here in the mockup:
Hey tonyiatridis,
Thank you for the inquiry.
You can replace the Column element with the Fullwidth Easy Slider to make the image fully visible even on smaller screens. You can also add another column element with a background image that is specifically resized for mobile view. You can then toggle the visibility of the elements on different screen sizes by adjusting the Element Visibility options in the Advanced > Responsive toggle. Basically, you’ll have a layout for desktop view and another for smaller screens.
Best regards,
IsmaelHi Ismael,
I see the Advanced>Responsive >Mobile Display where you can hide the column on mobile devices. However, both of these would show on the desktop version where there is no option to hide on desktops. I have to use two columns because the mobile will have a different background image and the background has to in the column itself because it has two elements overlaid on it.
I notice you say Responsive ‘Toggle’. Am I missing something?
Failing that could I put css in the developer area to hide them?
Thanks so much.
Hi,
I see the Advanced>Responsive >Mobile Display where you can hide the column on mobile devices.
We recommend using the Fullwidth Slider element instead of the Column element to take advantage of the Advanced > Responsive > Element Visibility settings.
If you need to use the Column element, you can manually add these class names in the Advanced > Developer Settings > Custom CSS Class field to control visibility on different screen sizes:
av-desktop-hide av-medium-hide av-small-hide av-mini-hideAs follows is what each of the class names does:
av-desktop-hide: Hides the element on large screens or desktop view.
av-medium-hide: Hides the element on medium screens (768px to 989px, e.g., Tablet Landscape).
av-small-hide: Hides the element on small screens (480px to 767px, e.g., Tablet Portrait).
av-mini-hide: Hides the element on very small screens (smaller than 479px, e.g., Smartphone Portrait).Best regards,
Ismael
- You must be logged in to reply to this topic.