make pics in slideshow fit frame

darrylcotton · Member · May 13, 2017 at 4:19 pm
Copy link

Add topic to favorites
Hi

How do I make the photos in the slideshow fit to the edges of the frame so that no background is visible?

The slideshow is on the home page of:
http://www.jewishliteraryfestival.co.za

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 15, 2017 at 6:56 pm
Copy link
Hi there, we can take away the border and set the background to white with the following custom CSS, but if you want the images to all go to the full width, then they all have to be prepared so that they have the same width to height proportions. The slideshow software looks at the images and gets the maximum width and height and then creates a bounding box to fit in the content area on the theme. If it showed all images full width of the content area, then when a portrait oriented image displayed after a landscape oriented image, the text content below would move up and down, which makes it nearly impossible for someone to read. Add the following to your custom CSS.
```
.slideshow-window {
	border: none !important;
	background: #fff !important;
}
```
For the content area on Hemingway Rewritten, you would want your images to all be in a ratio of 1.75 to 1 width to height. In other words, the width of the image should be 1.75 times the height.
darrylcotton · Member · May 17, 2017 at 9:45 am
Copy link
hi

thanks for the help

there were two posts for 2 different websites. i have changed the css for the slideshow for http://www.jewishliteraryfestival.co.za as per your suggestion.

its the slideshow on http://www.meltoncapetown.org that is still not fitting the frame on the right hand side.

thanks
thesacredpath · Member · May 17, 2017 at 5:27 pm
Copy link
Hi, looking at your custom CSS in meltoncapetown.org, you have three CSS rules regarding the width of the slideshows that are conflicting. Go down through your custom CSS and remove these two. There is one above them a ways that sets the width of the slideshow window to 100%, which is what we want.
```
body div.slideshow-window {
	max-width: 700px;
}

body div.slideshow-window {
	max-width: 700px;
	border-radius: 0;
}
```
Also, while I was looking, I found a background color declaration that was without CSS selectors and without any curly brackets. That can cause the browsers not to load any CSS past that point, so I removed it.
darrylcotton · Member · May 18, 2017 at 6:06 am
Copy link
Great! Thank you :)
thesacredpath · Member · May 18, 2017 at 8:16 am
Copy link
You are welcome.

No items found.