-
-
Hi Codeless,
I got a programmer to help me as you guys suggested for my site http://www.carlevabay.com, and we made the child theme as you suggested. We were able to slow down the speed of the homepage slider images so that they and the text are readable, hooray! BUT we still have another issue which is described by my programmer as follows:
“Hi Codeless, I’ve been having some trouble with the responsiveness of the homepage slider. While the images that I’ve selected are fine on desktop, on mobile they don’t look very good after applying this css rule that you gave me: @media (max-width: 979px){ .header_wrapper { background: rgba(255,255,255,0.45) !important; } .codeless_slider_swiper.parallax_slider { height: 470px !important; min-height: 470px !important; } .swiper-slide.swiper-slide-active { background-size: cover !important; } }. The images on the slider were truncated and cutoff instead of being made to fit. Some of the slides when viewed on a mobile were so cut off that only a small portion of the image was even visible (for example, on the slide showing the night view, you could only see part of a tree, not the house at all). I don’t have screenshots of that, but it was only optimized for desktop and with all other devices the slider images were cut off to varying degrees.
After realizing that, I changed the.swiper-slide.swiper-slide-active { background-size: cover !important;} }rule to.swiper-slide.swiper-slide-active { background-size: 100% 100% !important; } }which made the image fit, but it distorted the aspect ratio of the images causing a drop in image quality. You can see an example of one of the distorted slides on an iPhone here: https://www.dropbox.com/s/rtlp63e39wxolyl/IMG_5782.PNG?dl=0and here’s another one from iPhone: https://www.dropbox.com/s/xl4xt5wxnesf52v/IMG_5786.PNG?dl=0and here it is on a Macbook using Firefox, showing the bottom part of the image cut off: https://www.dropbox.com/s/f4pbp3rmn0shfw3/Screenshot_2019-08-31%20Carleva%20Bay%20Villa%2810%29.jpg?dl=0and here’s another one from Macbook using Firefox: https://www.dropbox.com/s/t27qzk3zmt9tejl/Screenshot_2019-08-31%20Carleva%20Bay%20Villa%286%29.jpg?dl=0
Neither of these options are acceptable and I want to know if there is any way to set different images on mobile, and on desktop and larger screens that will make the slider more responsive without altering the image in any way, but still making it fit.”
Please let us know! And thanks for all your help with this. -
Hello,
You have added custom CSS in Specular > General > Custom CSS box and in Appearance > Additional CSS as well. The code was targeting the same section in theme and thus conflicting. You have to add custom css in only one place that is theme’s Custom Css box.
I removed the conflicting code and this is the result in mobile: https://ibb.co/nkn1VPZ
Let us know.Best regards!
-
You must be logged in to reply to this topic.