Position Previous and Next Buttons for responsive design

O.K. so I managed to get the buttons to position a little better on mobile devices by changing the following code to from 50% to 30%, it’s not quite centered on the screen on desktop computers, but looks better on mobile devices.:

.slideshow_container .slideshow_button {
    top: 30%;}

I wish I could figure out a way to center it vertically and look perfect on all devices.

O.K. Now I would like to try and figure out a way to make the arrow previous and next buttons scale in size. I fooled around with changing the pixel height to percentages thinking that might do the trick like so:

.slideshow_container .slideshow_button {
	height: 17.4%;
	width: 2.807%;
	background: url('%plugin-url%/images/SlideshowPlugin/dark-arrows.png') no-repeat;
}

Unfortunately, when the page scales down to smaller devices, the arrow button just gets cut off and you can’t tell that there is anything there to click.

My theory was the slideshow’s width is 855px and 24px is 2.807% of 855. Meanwhile the slideshows height is 755px at 100%. The button sized at 100px high would be 17.4% of 755.

Is there something else that will scale the dimensions of the buttons? They are just too large on a phone and are covering up about a third of the image.

I’m open to any suggestions.

________________________________________________________________

Finally I would like to “Show title and description” permanently with “Hide description box, pop up when mouse hovers over” toggled to no. However I would like to format it so that my descriptions, which tend to be quite long, are displayed below the slideshow. Otherwise on a mobile device they cover the entire image. Is there anyway to position the description so it is visible below the slideshow container?

I was thinking maybe “overflow: visible;” somewhere might do the trick. This stuff is really starting to push the limits of my CSS knowledge.

You should look into media queries. They allow you to specify certain css styles based on the width of your device.

For example, the navigation images could be positioned at 50% on desktop and 30% on mobile. You could even replace the arrows with a smaller arrow image for mobile.

The basic format of media query is:

@media (max-width: 1140px)  {
        /* Put CSS in here for any screen size smaller than 1140px */
}

Learn more about media queries here.

Hope this helps!

Thanks.