Slider size – mobile compatibility

saltyluxe · Member · Aug 5, 2016 at 10:11 pm
Copy link

Add topic to favorites
Hi,

When viewing my site on PC the slider takes up the entire screen, acting as a feature (which I love). I would like this to be the same with accessing via mobile device. But at this time when you view via mobile, the slider takes up just under half the screen & then you see half of the next page which looks terrible!

Is there a CSS code for this?

THANK YOU!!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 8, 2016 at 6:48 pm
Copy link
Hi there, I’m seeing the slider full width on my iPhone 5s both in portrait and landscape orientations. Are you still having this issue? If so, which phone and what OS/browser are you seeing this on?
saltyluxe · Member · Aug 9, 2016 at 1:10 am
Copy link
Hi,

Thanks for getting back to me! Yes, still having the same problem. As you can see in the below image, the slider only fills half the screen – I want it to fill the entire screen when viewing on a phone/ PC, not half of two different pages.

I’m using the Iphone5 to take this screenshot.

Hope this make sense!

Thanks
thesacredpath · Member · Aug 9, 2016 at 11:32 pm
Copy link
Hi there, I don’t see a link to a screenshot, but here is a screenshot of what I see on Safari on my iPhone 5s with iOS 9.3.3: https://cldup.com/KnZb1IV7UJ.PNG
saltyluxe · Member · Aug 9, 2016 at 11:40 pm
Copy link
Hey,

Yes that’s what I see too.

However, what I would like to see is the full image “best of Byron bay’ taking up the entire screen. I don’t want to view the slider + half of the ‘Recent Posts’ section. Is there a CSS code or something I can do?

Cheers,

Sarah Royall
thesacredpath · Member · Aug 10, 2016 at 6:17 pm
Copy link
Sarah, looking at the CSS and how things work for smaller screens, we can adjust this a bit with the following Media Query. It limits this change to 479px and narrower screens and increases the minimum height of the slideshow from 280px to 350px. See what you think with this and make sure and look at things on your phone, both in landscape and portrait orientation. It will be difficult to exactly fill the entire screen on all phones since currently there are nearly 100 different screen dimensions for phones and tablets, and it would be really difficult to account for all of those.
```
@media screen and (max-width: 479px) {
  .home-slider .slideshow .slides li.post, .home-slider .slideshow .loading {
    min-height: 400px;
  }
}
```
saltyluxe · Member · Aug 11, 2016 at 1:00 am
Copy link
That’s absolutely amazing & just what I needed. Thank you so much! All fixed J

Take care,

Sarah Royall

[sig removed by @thesacredpath]
thesacredpath · Member · Aug 11, 2016 at 8:27 am
Copy link
You are welcome, Sarah. One thing, here in the forums, we do not use signatures, such as what you have added. You are free to sign your name if you wish. Thanks in advance.

No items found.