-
Posts
-
Hi
I am have for a couple of hours now testing how the Color Section behaves on desktop, mobil and tablet. And I am struggling to get a consistent result.
What I want:
An image that has a parallax effect and scales to fit the width of the site. (I am using full width layout).
I can get it as I want on desktop. But not matter what setting I try the mobile and tablet version does not fit.
The image is of three people spread evenly out in the image. On Mobile I can either get their heads chopped off and it seems to center center the image. Or I can get the center top of the image showing with one person and the others chopped of to the side (Image does not scale to fit the width).To get the image to Center on top and scale down to fit the width of a mobile browser is just NOT happening. And it seems such a simple thing.
Should I use another component then color section to achieve this?
Thomas
Hey jtp77!
Thank you for using Enfold.
The background size of the color section is set to “cover’ which means that it will scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. What you can do is to create another color section with a different or smaller background image specifically for mobile devices. Use css media queries to show or hide the section on different screen sizes. Please refer to these links:
http://stackoverflow.com/questions/11796297/div-show-hide-media-query
https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263
https://kriesi.at/support/topic/displaying-another-slider-on-mobile-devices/
https://kriesi.at/support/topic/replace-slider-on-mobile/
https://kriesi.at/support/topic/home-page-video-on-mobile-phone/#post-449787
Cheers!
Ismael
- The topic ‘Scaling image in Color Section – Parallax.’ is closed to new replies.