Make Slideshow Smaller

Kentinada

I read in another read about changing Buy button colors and making a slideshow smaller. I pasted this code below into my theme's CSS section. I put the nice border around my slideshow but it didn't make it smaller. Can I do that?

My website is www.adahighlanderphotography.com.

Thanks!

/* Make the slideshow, download and buy buttons smaller */
.sm-user-ui .sm-gallery-cover .sm-button-size-large {
font-family: verdana,georgia,times,arial;
font-size: 12px;
color: #FFFF00;
background-color: #FD5F00;
padding: 1px;
border: 3px solid #FFFF00;
border-radius: 6px;
}

.sm-user-ui .sm-gallery-cover .sm-button-size-large:hover {
    background-color: #000080;
    border-color:#FF0000;
    }

Hikin' Mike

Looks like you found my tutorial.

/* 
* Adds Border and Drop Shadow on the Slideshow 
******************************************************/
.sm-user-ui .sm-slideshow-image .sm-tile-single.sm-tiles-uncropped .sm-image {
    border: 5px solid #000000;
    -webkit-box-shadow: 5px 5px 5px #151515;
       -moz-box-shadow: 5px 5px 5px #151515;
            box-shadow: 5px 5px 5px #151515;
    margin: 0px auto 10px;
    max-width: 90%;
    padding: 25px;
    background: #fff;  
    }

Kentinada

I did! And I added the code I included which added the lovely border and drop shadow but it didn't make it smaller. Should I replace that code with what you just posted?

Hikin' Mike

I just posted the code from my tutorial before I went to dinner...lol!

FWIW, the thread you posted earlier doesn't have anything to do with making the slideshow smaller. Just the slideshow BUTTONS.

Hikin' Mike

Just to add, if you want them smaller you can select what size you want to show. You can also increase the max-width from the code I posted above.

Kentinada

Ah, well I missed that on the buttons part but your posting of the tutorial was very timely! So I tried making the slideshow smaller by changing the Height setting in the slideshow gadget to fixed and 600px. That worked on my desktop but messed up how it looked on my iPhone. So I put that back to Auto and changed the max-width statement in your CSS code from 90% to 70%. That worked for both! But I know have a large amount of space below the slideshow. See the attached below. I tried changing padding and margin to 0px but that didn't affect it. Do you know where this is coming from?

Kentinada

So here's what I tried last that mostly works. I kept your CSS code as written which eliminates the large white space below the slideshow. Then to make the slideshow a little smaller, I put a spacer sized at 15% on both sides of the slideshow. This works perfectly on my desktop. On my iPhone, the slideshow is about 90% visible. Livable but I'm still trying to be sure my site is responsive/mobile friendly.

Hikin' Mike

Looks like you've removed the code.

If you want to limit the size of the photos then go to the Gallery Settings > Maximum Display Size

Kentinada

Thanks Mike. Can you help me understand these lines in your code? Not sure what they do.

-webkit-box-shadow: 5px 5px 5px #151515;
-moz-box-shadow: 5px 5px 5px #151515;
box-shadow: 5px 5px 5px #151515;

Kentinada

Never mind. I just found an article in Google that explained them. Thanks.

denisegoldberg

@Kentinada said:
...making a slideshow smaller.

I'm curious - why are you setting the photos in your slideshow to be smaller than shown in lightbox? If I pop into lightbox on one of your photos then decide to see the slideshow, the photo as shown is smaller. That seems to me to be an odd viewing experience.

Also - are you aware of the tool http://quirktools.com/screenfly/? It allows you to see how your site looks on different sized devices. On some smaller devices only your logo, menu, and text show on the initial display, no photos.