Unable to adjust slideshow width

Hi Pete can you share your URL.

Hi,

Apologies, i added the wrong URL. Here it is: https://www.petersmartphotography.co.uk/bump-to-baby/

Hi, currently you have the following settings for the width.

element.style {
    height: 650px;
    max-width: 834px;
}

If you change the mas-width: to width: you will get a result. However you must take into consideration the overall width of your wrapper or website.

The class in question is slideshow_container slideshow_container_style-dark.

Try the above and see how you go.

Hi,

Do you want me to add your pasted code to the following? and if so where exactly? many thanks for your patience, i’m not a code guy as you’ve probably guessed.

.slideshow_container { background: #000; }

.slideshow_container a { text-decoration: none; }
.slideshow_container a:hover { text-decoration: none; }

.slideshow_container .slideshow_slide { margin-right: 2px; }
.slideshow_container .slideshow_slide_image { }
.slideshow_container .slideshow_slide_video { }

.slideshow_container .slideshow_slide_text div.slideshow_title { font-size: 1.3em; }
.slideshow_container .slideshow_slide_text div.slideshow_description { }

.slideshow_container .slideshow_slide_text div,
.slideshow_container .slideshow_slide_text p,
.slideshow_container .slideshow_slide_text h1,
.slideshow_container .slideshow_slide_text h2,
.slideshow_container .slideshow_slide_text h3,
.slideshow_container .slideshow_slide_text h4,
.slideshow_container .slideshow_slide_text h5,
.slideshow_container .slideshow_slide_text h6 {
text-align: center;
}

.slideshow_container .slideshow_description_box { background: #000; width: 100%; }

.slideshow_container .slideshow_description_box div.slideshow_title { font-size: 1.3em; }
.slideshow_container .slideshow_description_box div.slideshow_description { }

.slideshow_container .slideshow_description_box div,
.slideshow_container .slideshow_description_box div a,
.slideshow_container .slideshow_description_box p,
.slideshow_container .slideshow_description_box p a,
.slideshow_container .slideshow_description_box h1,
.slideshow_container .slideshow_description_box h1 a,
.slideshow_container .slideshow_description_box h2,
.slideshow_container .slideshow_description_box h2 a,
.slideshow_container .slideshow_description_box h3,
.slideshow_container .slideshow_description_box h3 a,
.slideshow_container .slideshow_description_box h4,
.slideshow_container .slideshow_description_box h4 a,
.slideshow_container .slideshow_description_box h5,
.slideshow_container .slideshow_description_box h5 a,
.slideshow_container .slideshow_description_box h6,
.slideshow_container .slideshow_description_box h6 a {
text-align: center;
color: #fff;
}

.slideshow_container .slideshow_transparent { filter: alpha(opacity = 50); opacity: 0.5; }
.slideshow_container .slideshow_transparent:hover { filter: alpha(opacity = 80); opacity: 0.8; }

.slideshow_container .slideshow_loading_icon {
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin: -16px 0 0 -16px;
background: url(‘%plugin-url%/images/SlideshowPlugin/loading-icon-128×128.gif’) no-repeat;
background-size: 32px 32px;
}

.slideshow_container .slideshow_controlPanel {
width: 20px;
height: 20px;
margin-left: -10px;
}

.slideshow_container .slideshow_controlPanel ul { }

.slideshow_container .slideshow_controlPanel ul li {
width: 20px;
height: 20px;
}

.slideshow_container .slideshow_controlPanel ul li:hover { }

.slideshow_container .slideshow_play {
background: url(‘%plugin-url%/images/SlideshowPlugin/dark-controlpanel.png’) 0 0 no-repeat;
}

.slideshow_container .slideshow_pause {
background: url(‘%plugin-url%/images/SlideshowPlugin/dark-controlpanel.png’) -20px 0 no-repeat;
}

.slideshow_container .slideshow_button {
margin-top: -50px;
height: 100px;
width: 24px;
background: url(‘%plugin-url%/images/SlideshowPlugin/dark-arrows.png’) no-repeat;
}

.slideshow_container .slideshow_previous { }

.slideshow_container .slideshow_next {
background-position: -24px 0;
}

.slideshow_container .slideshow_pagination { bottom: 20px; }

.slideshow_container .slideshow_pagination_center { }

.slideshow_container .slideshow_pagination .slideshow_currentView {
filter: alpha(opacity = 80);
opacity: 0.8;
}

.slideshow_container .slideshow_pagination ul { }

.slideshow_container .slideshow_pagination ul li {
margin: 0 2px;
width: 15px;
height: 15px;
background: url(‘%plugin-url%/images/SlideshowPlugin/dark-bullet.png’) no-repeat;
}

Here are the settings you can try.

Maximum width. When maximum width is 0, maximum width is ignored = add a value here to control the maximum width. You could start by adding 450.

Image behaviour = set this to Crop to fit.

To change the width, add a value to the following code in the style settings.

.slideshow_container { background: #000; width: 450px;}

Try this and see how you go.

Hi,

I’m confused, as I don’t see that exact bit of code you state, what I see and it’s in CUSTOM STYLES not in STYLE SETTINGS, is the following that’s similar to your code, is this correct?-

Its right at the beginning

.slideshow_container { background: #000; }

First can you confirm I am in the right place? I added the extra bit to see if it would work but nothing happened to enlarge to the width I want which is 834px wide which my blog can take with images.

Thanks with your help and patience with resolving this problem.

Hi, yes that is the area that you need to add the width:834px;

Its right at the beginning

.slideshow_container { background: #000; }

But remember you need to add the width to the correct style. Check to make sure that if you have created a custom style that you are adding the width to the custom style.

If the above does not work then try the following changes. Add Maximum width. When maximum width is 0, maximum width is ignored = 834
and
Image behaviour = Stretch to fit.

I think I created a new custom style sheet but when I try to add width: 834px;} it throws me to the ALL SETTINGS page on my WordPress dashboard! Any ideas why this is happening?

How much memory do you have allocated to your website?

I’ve asked my website hosting to increase memory and they have done the following –

memory_limit = 128M
post_max_size = 128M
upload_max_filesize = 128M

The same problem still persists, when I click to save the changes it throws me to the SETTINGS page on my dashboard.

Can you give me exact step by step instructions please as it may be that I am not creating a new custom style sheet though it does seem pretty straight forward.

Hi, please read the following documentation. See if this can help you.

Thank you