-
Posts
-
Hi,
I have a full screen slider on first page of my website, but it’s not responsive on phones.
The images are kind of cropped, not scaled down. Images resolution are 1920 x 1080.Any idea why?
I took the transparent-header as template.
Thanks,
LilianeHey Liliane!
It depends on the screen size. If you wanted the images to use 100% of the container then they would look very distorted on phones in portrait orientation. If you’d like to switch it to a fullwidth easy slider on mobiles instead then add one to your page and we’ll give you some CSS to hide switch them depending on the screen size.
Regards,
ElliottHi Elliot,
You mean that I would keep the actual slider for usual screens, but add one fullwidth easy slider for phones only?
What about tablets (iPad, Android), would it keep the actual slider?Please send me the CSS I would have to put in place?
Thanks,
LilianeHi!
Elliot suggested, to use the Full Width Easy slider, where responsiveness is applied.
Let us know if you have more questionsCheers!
BasilisBut I don’t want to use the full width, I want the full screen because I want the pictures to take full screen when they land on my home page.
Will the full width do the same?Hey!
I think it could work in your case. Let us know when you are done and we’ll take a look.
Cheers!
AndyHi,
I tried your solution (see private content below). It’s not exactly what I was expecting.
Images are too big (if I put no scaling dimensions in slider option) or cropped if I choose the other parameters, like Featured Large for example.So, my question is what should be the ideal picture dimensions to get the perfect result on pc/mac, tablet or phone?
Thanks,
LilianeHi!
There is no perfect image. Images variate from different screen sizes and that is responsive design, in such cases. Solution is to use or add round the images options like gradiens etc, who will cover the images been cut in some dimensions.
Cheers!
BasilisHi Elliott,
I created another page for phone/tablet (see private message).
What would be the code to add like you mentioned, to make it work?Thanks,
LilianeHi!
You want to hide the full slider? What you want to do based on Elliot replies, and I would love to provide you the CSS needed
Cheers!
BasilisWhat I don’t understand is what’s the difference between the fullscreen slider and the fullwidth easy slider.
With the fullscreen slider, my site is perfect on any platform except when it’s in portrait mode on phones and tablets.
Also, with fullscreen slider, you can see at the bottom of the page an arrow suggesting that there’s more content when scrolling down.
I don’t see that type of arrow with the fullwidth easy slider.So, basically I just want to get a responsive page not matter what’s the platform and orientation page.
Thanks,
Liliane.Hi!
responsive does not mean that it will look good automatically on all screen sizes. Instead it means that you are able to define different behaviors for different screen sizes. So again we are asking you to tell/show us which kind of behavior/look you wish exactly for phone and for tablet. Please use screenshots/mockups to make things clear for us, so we can provide you some precise CSS code. Use imgur.com or dropbox.
Regards,
AndyHi Andy,
I don’t think I need to send mockups. Just une any phone or tablet in portrait mode and compare it to landscape mode and you should see what’s the problem.
Regards,
LilianeHey!
It looks fine to me. When viewing in a portrait aspect ratio the images are still going to be zoomed in a bit with the fullscreen slider (because they go fullscreen). Otherwise they would look distorted. Perhaps what your wanting is to use the fullwidth easy slider instead so the images will display in the same aspect ratio on all screen sizes.
Regards,
Elliott
- You must be logged in to reply to this topic.