-
AuthorPosts
-
April 14, 2018 at 4:21 pm #941967
hello,
i am using fullwidth easy slider banner in homepage here: https://rdapsentencereduction.com
i’ve gotten it to look good in all normal portrait smartphone sizes, but when smartphone turned sideways there is a ton of empty space on top of the banner in all sideways (landscape) smartphone sizes (see attached photo). This doesnt happen in normal portrait view.
How can this be fixed?
April 14, 2018 at 6:06 pm #942001Hey zohar2014,
Sorry, I was unable to reproduce with a Android phone, or with Chrome developer tools. Please see this video.
Are you using a iPhone?Best regards,
MikeApril 15, 2018 at 9:49 am #942159Thank you for checking. The phone i used for the test in screenshot is Android (Samsung Galaxy S8 Plus)
If you check the responsiveness in a website like http://www.responsinator.com/ you will see in sideways view it now shows alot of empty space between the top text and the bottom of the photo. This empty space is not present in normal portrait view. Is this because of the image itself? Is there any way to have the image display like it does in normal portrait view?
I guess it’s not that big of a deal because not many people look at their phones sideways (as far as i know), but it doesn’t look good!
April 15, 2018 at 5:27 pm #942242Hi,
This is because of the image size, if we give it a max-height it will not reach the edge without stretching it, which will not look good.
But you can create a new layerslider for these sizes, 664px – 738px which will cover the 4 landscape sizes
667 – 684 – 734 – 736 and add it below your current one on the page,
then use these media queries, note it includes 2px below and above.
your current layerslider we will call layer_slider_1, and your new one we will call layer_slider_2@media only screen and (min-width: 664px) and (max-width: 738px) { div#layer_slider_1 { display:none!important; } } @media only screen and (max-width: 663px) { div#layer_slider_2 { display:none!important; } } @media only screen and (min-width: 739px) { div#layer_slider_2 { display:none!important; } }
In the layerslider set your canvas width 736 and the height you like, perhaps 200px, so you can see it and place the text where you would like.
After you create the new layerslider, we will be happy to help adjust the media queries above.Best regards,
MikeApril 15, 2018 at 8:00 pm #942270Hi Mike,
Unfortunately this sounds confusing to me as im not an actual developer. How do i give the layersliders names? So I create three different unique layersiders in my page?
Is the directions above something you could implement onto my site, or is that something you don’t cover with support? I’ve provided WP ADMIN login details in private area in original post
hope to hear from you,
Thanks
April 15, 2018 at 9:19 pm #942291Hi,
The layerslider’s names are created automatically, I was guessing at them from experience in order to explain the code above.
I took a look and found that you are also using a full width slider, under the layerslider, in much the same setup as I was trying to explain.
So to illustrate better, I created a copy of your layerslider, and set the dimensions for a landscape phone, and moved the layers around so they would be shown.
You will want to go in and edit them the way you like, right now it’s just too much stuff, too big. It was only to get you started.
Then I added the css above to your General Styling > Quick CSS field, turned out my guess was right, I also added some code to hide the full width slider for landscape phones.
Please check on http://www.responsinator.com/Thoughts:
I wonder if converting your full width slider into a layerslider will work better for tablets 768px and portrait phones?
I see your first layerslider is hidden under 989px, so it for desktops.
so I recommend creating a new layerslider to take the place of your full width slider, try to create with the canvas width of 988px, this would be for tablets and portrait phones.
Then edit the layerslider I created for landscape phones.Or if you like the way the full width slider looks on tablets, leave it as is.
Best regards,
MikeApril 16, 2018 at 11:30 am #942514Thank you, i will look into it
You can mark the topic resolved
Wishing you happiness and a big raise
Thanks!
- This reply was modified 6 years, 7 months ago by zohar2014.
April 17, 2018 at 2:34 am #942864 -
AuthorPosts
- The topic ‘smartphone sideways view messed up’ is closed to new replies.