Slideshow Size
-
How can I make my slideshow size on my sustainability page a bit smaller but still centered?
The blog I need help with is: (visible only to logged in users)
-
Hello! It’ll be easier for us to take a look at your specific site and come up with CSS if the page is published so we can check it out live on the page (and that will also allow volunteers to see it so they can suggest CSS if they know some that will work).
Can you publish it and reply when that’s done so we can take a look, please? Or if you’d rather not publish yet, there is some CSS on this thread that may work to help with resizing (but may need adjusting for your specific site/theme): https://en.forums.wordpress.com/topic/slideshow-not-resizing-text-not-wrapping-correctly-for-mobile?replies=13
-
Hi Sarah,
We can’t change my site them, I already spent a lot of time manipulating it the way that I wanted it. Also, I’m not publishing any pages until I’m completely finished with the website which will take some time. Can you still help me?
-
Hi there!
I didn’t mean for you to change your theme, but that volunteers, who are great with CSS, help answer questions here, and they won’t be able to help if they can’t see the page.
On your sustainability page, you can target the slideshow with this #gallery-522-6-slideshow, so CSS like this may get you on the right track:
#gallery-522-6-slideshow { width: 80%; margin-left: auto; margin-right: auto; }That makes it 80% of its current size and the two margin lines center it. To make more changes, you can check out the CSS in this thread and grab pieces of code to add to yours to adjust as you’d like: https://en.forums.wordpress.com/topic/slideshow-not-resizing-text-not-wrapping-correctly-for-mobile?replies=13. (It includes options for changing colors, adjusting image size, etc. so it’ll depend on what else you want to do.)
-
-
Also, what about the height, can i change that like I changed the width? I tried to enter another line that said height: 70%; but it didn’t work…
-
Great! You could add this to the previous CSS to make it transparent so it is the color of the surrounding background:
background-color: inherit; border: none;Add it before the closing } . You can also switch “inherit” to a color if you don’t want it to be the same background color as the rest of the page.
Found here: https://en.support.wordpress.com/slideshows/.
Hope that helps!
-
-
-
You can change the caption color with some CSS like:
.slideshow-slide-caption {
color:#000;
}Here is a tool you can use to figure out the color codes if you want something other than black:
http://html-color-codes.info/Changing the height of the slideshow is actually quite difficult because of the number of different elements that have a height set on them. It might be better if you tried cropping the transparent space around the images in your slideshow first to see if that brings it to a more suitable height automatically.
-
-
-
I also resized and cropped all of my photos and it helped a little but I would still like the height to be adjusted smaller.
-
You can try adding this to the #gallery-522-6-slideshow CSS rule you have and you can play with the 46.25% value. Originally it was 56.25%, and if you get much less than 46.25%, make sure and view in tablets and phones as sometimes things can go a bit awry. An example would be the navigation buttons overlaying the captions.
padding-bottom: 46.25% !important; -
The code give in correct, but because of the way the CSS is done on that component, we are going to have to add the !important keyword to the declaration so it looks like this.
.slideshow-slide-caption { color:#000 !important; } -
The color changed perfectly but the captions show a shadow and are hard to read. Is there a way to remove that shadow or make the font size a little bigger so that it’s not difficult to read?
-
To get rid of the text shadow, add this to the rule I gave you above.
text-shadow: none !important; -
-
- The topic ‘Slideshow Size’ is closed to new replies.
WordPress.com Forums 