slideshow sizing

• 

  courtneybruettephoto · Member · Oct 16, 2014 at 3:12 am

  • Copy link
  • Add topic to favorites

  Hi there,

  I just tried updating my slideshow to appear larger on my website. I found this code on a previous forum topic from someone else:

  .slideshow-slide img {
  width: 100%;
  min-height: 100%;
  }

  This made the width better but the height didn’t translate well – it was too stretched out from the width.

  Then I changed it to this:

  .slideshow-slide img {
  width: 200%;
  min-height: 120%;
  }

  and it looks like this will be awesome – but now the height is cut off.

  I have it updated on my site using the latter code.

  What can I do?

  Thank you so much!!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Oct 16, 2014 at 4:00 pm

  • Copy link

  Hi there, we need to increase the height of the parent element for the slideshow, in this case, .slideshow-window. Add the following. 500px is a bit taller than the images, but that should keep things from getting cut off. We need to use the !important keyword because the height for the window is set by the theme files directly in the HTML. The !important keyword lets us override that.

  .slideshow-window {
      height: 500px !important;
  }

• 

  courtneybruettephoto · Member · Oct 16, 2014 at 4:08 pm

  • Copy link

  You are so awesome. :)

  Thank you very much!!

• 

  thesacredpath · Member · Oct 16, 2014 at 4:23 pm

  • Copy link

  You are welcome, and thanks. :)

• 

  courtneybruettephoto · Member · Oct 26, 2014 at 3:16 am

  • Copy link

  Hi again thesacredpath,

  I love the way my slideshow looks! But… it looks really weird and distorted on my mobile devices now.

  How do we fix this?

  Thank you!

• 

  thesacredpath · Member · Oct 26, 2014 at 5:07 pm

  • Copy link

  This is due to the responsive nature of your theme, which adjusts for screen sizes from the largest desktop monitor all the way down to a phone. That is the reason that % widths and heights are used.

  What we can do is to use a Media Query to limit this change to screen widths 960px and greater as that is where the slideshow starts to resize with the content area. Remove the two slideshow related CSS rules you have and then paste in the following at the very end of your custom CSS. The rules are the same, but we are telling the browser to only apply them at widths of 960px and greater.

  @media screen and (min-width: 960px) {
  .slideshow-window{
  	height:500px !important
  }
  .slideshow-slide img{
  	width:100%;
  	min-height:100%
  }
  }