iPhones Media Query .slider Styling

Tagged: iphone, media query, Slider, styling

This topic has 3 replies, 2 voices, and was last updated 8 years, 10 months ago by Wes.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
October 3, 2013 at 1:14 pm #7827

jbellison
Customer

Viewing my website on an iPhone shows some strange styling of the .slider area. Suddenly, after being resized properly from iPad portrait and landscape, there is a HUGE (60px+) padding/margin within the .slider area.

as seen here:

Any ideas on how I can reduce that huge empty space in the .slider area? I’ve messed around with just about every CSS selector i know and can’t get anything to work.

October 4, 2013 at 1:32 am #7867
Wes
Moderator
When you added your custom code in the responsive section, you added “padding-top: 80px“….and that is showing up when the responsive css kicks in. Take a look around line 3974 to see what I’m referring to –
```
/* JBE Added 03.10.13*/
		
	.slider .wrap {
		padding-top: 80px;
		margin-bottom: -20px;
		width: 100%;
	}
```
You could change that padding to “0” if you wanted, and it would remove nearly all of the extra space you’re seeing.
October 4, 2013 at 11:23 am #7883

jbellison
Customer

Yep. I was doing that for the iPad media query because the navbar was overlapping my slider. So I just added a .slider .wrap section in my iPhone media query with padding-top:0; and it fixed it.

Thanks Wes.

October 4, 2013 at 10:23 pm #7898

Wes
Moderator

You’re Welcome!
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘iPhones Media Query .slider Styling’ is closed to new replies.