Slideshows

courtneybruettephoto · Member · Aug 5, 2014 at 4:13 pm
Copy link

Add topic to favorites
Hi,

The slideshows on my site when looked at on mobile devices have a HUGE border around them – when I look at it, the space between the slideshows and the surrounding text is very large and I don’t know why.

It looks great on the computer and ipad but not on the iphone.

How do I fix this?

Thank you!

The blog I need help with is: (visible only to logged in users)
courtneybruettephoto · Member · Aug 5, 2014 at 4:16 pm
Copy link
I don’t want there to be so much spacing between the slideshows and text on any device in general either.

So in summary, I want to eliminate the huge border/space on the iphone and lessen space on other devices as well.

Thank you so much for your help!
timethief · Member · Aug 5, 2014 at 4:23 pm
Copy link
Have you checked to see if Fontfolio is a responsive layout theme? See here http://theme.wordpress.com/themes/features/responsive-layout/

Know that responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading. The mobile theme is a completely different theme.

If Fontfolio is a responsive layout theme then you will need to disable the Mobile theme Appearance > Mobile.
eurello · Staff · Aug 5, 2014 at 9:55 pm
Copy link
Hi there,

Fontfolio is indeed responsive, but you are currently using the mobile theme. You can turn that off here to make the mobile version of your theme display instead:
https://courtneybruettephotography.wordpress.com/wp-admin/themes.php?page=mobile-options

Pick ‘no’ for enable mobile theme.

With that off, I do see the gap issue. You can reduce it only on smaller screens by using a Media Query; something like:
```
@media screen and (max-width: 800px) {
	.slideshow-window {
		margin-top: 0px;
		margin-bottom: 0px;
	}
}
```
That reduces the top and bottom margins on slideshows only on screens narrower than 800px. You can read more about Media Queries here:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/

Give that a try and let me know how it works for you!
designsimply · Member · Sep 2, 2014 at 4:46 pm
Copy link
Hi courtneybruettephoto, I was reviewing this thread, and I noticed you have some mistakes in your custom CSS.

For example, lines like these could be causing trouble and might make your CSS behave in unexpected ways. I would recommend removing all of the lines like these:

media="all"
```
element.style {
}
```
I can see that you’ve been testing with the browser tools! (that’s where something like “element.style” would come from) That’s great!

CSS for the slideshow can be a bit tricky. I’ve found that placing a div in front of the “.slideshow-window” part of the selector makes it work better. Try replacing this:
```
.slideshow-window {
	background-color: transparent !important;
	border-color: transparent !important;
}
```
With this:
```
div.slideshow-window {
	background: inherit;
	border: none;
	margin: 0;
}
```
I tested a similar setup on my test blog and using the iOS simulator on my Mac, and I noticed there were gaps there even after I made CSS edits. I researched it a bit and I found that the gaps happen on the iPhone not because of things like margins, borders, or padding—but rather there is a minimum height set for the slideshow of 410px. So, at a really small screen width such as on a phone, landscape images will appear to have gaps above and below. There is a way to reduce the space, but it is pretty tricky and partially depends on the orientation of your images (i.e. are they all landscape, all portrait, or mixed?). I experimented a little and came up with the following example:
```
@media screen and (max-width: 800px) {
	.home div.slideshow-window,
	.home div.slideshow-slide {
		height: 300px !important;
		max-height: auto !important;
	}
	.home div.slideshow-slide img {
		vertical-align: top;
	}
}
```
The “.home” part limits the rules to the home page so it won’t affect other images. The “@media” part is taken from eurello’s example above, which is a good idea because the height issue doesn’t happen for larger screens and the media query lets you limit the change to only small screens. The height will need to be adjusted depending on your images. I used all landscape images in my test and 300px looked good to me in a test. You may need to experiment and adjust the 300px number depending on how your images are setup.

Start by editing out the extraneous lines from your Appearance > Customize > CSS editor first though. If you leave those in, it will cause you trouble. If you need help as you go, reply back here. I will follow this thread.

No items found.