-
Posts
-
I am having trouble with my website only for how it responds to iphones.
All other screen sizes seem great but with the iphone, the text was responsive but the image was not and only showed a small corner of a very large image.I have searched the forums and installed the code posted below from another thread which helped a little but still is not what I want.
@media only screen and (max-width: 479px) {
.avia-fullscreen-slider .avia-slideshow[data-image_attachment=”fixed”]>ul>li {
background-attachment: scroll;
height: 430px;
}
.avia-fullscreen-slider .avia-slideshow>ul>li {
width: 170%;
height: 170%;
background-size: contain;
background-repeat: no-repeat;
}
.avia-builder-el-0.avia-fullscreen-slider .avia-slideshow, .avia-builder-el-0. (Purchase code hidden if logged out) > .flex_cell {
height: 300px !important;
}
.html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
padding-top: 37px;
}
}This code makes the slider smaller but only shows half of the image and text with the other half off the screen.
Hey SarahKay09!
Thank you for using Enfold.
You may need to create a copy or a clone of that section, toggle the screen options and then use an image that is specifically resized for mobile view. We can resize the background image using css but as you already know, it will either distort the image or create gaps around the slider container.
Cheers!
IsmaelHi Ismael,
That suggestion unfortunatley hasn’t worked. I’m still getting the over sized zoomed in images even with creating a clone and adding an image just for small screens.
Hi,
Do you have a test page with the cloned section? What is the size of the image? Please resize it based on the standard mobile screen sizes.
// http://gs.statcounter.com/screen-resolution-stats/mobile/worldwide
Best regards,
Ismael
- You must be logged in to reply to this topic.