Images not centring

Hi what happens if you reduce the 990px fixed width page layout to something like 820px.

Regards

That would work for the images that are 800px wide, but the rest would be left justified. I’m thinking I need some CSS magic here for the image to fit centre in the container, but I can’t figure it out in the dev tools for the browser.

Hi you could try the following adding margin-left: 75px. You might want to adjust it to fit your need…..

.clearfix {
    margin-bottom: 30px;
    margin-left: 75px;
    margin-top: 20px;
}

The above is based on your set up.

Let me know how you go.

Regards

Ah ha, that was what I wanted. I couldn’t figure out which element was responsible. That works perfectly for the portraits – thanks.

The slim landscapes leave a huge gap at the bottom. Is there a way of centring them vertically?

Hi alleyoopster can you change the following

Shrink slideshow’s height when width shrinks: ‘Yes’

Let me know if that works.

Regards

Hi,

This unfortunately has the affect of loosing the height control, so the portraits are long and the landscapes still sit at the top of the screen with a large empty space below them.

I have left the setting on with the default ratio of 1:3 so you can see what it does. Changing this ratio does not help.

Regards

Hi the problem I see from the following code is the height: 2400px.

element.style {
    height: 2400px;
    max-width: 800px;
    width: 800px;
}

If you set the height to such a large number then you won’t be able to reduce the height like you want.

Regards

I haven’t set height. The height changed to 2400px after setting “Shrink slideshow’s height when width shrinks: ‘Yes'”

I think your biggest challenge is having so many images of different sizes. I am not sure if the plugin at the moment is set to handle that.

Yes, I agree. I think it should be a feature of the plugin. I have loaded up the final set images for the client and they are a little more forgiving, but one of 2 of the landscapes are still leaving a large gap underneath them. I need to work out if I can centre them vertically in the space with CSS. I am sure there must be a way.

The final images are at Demo Gallery

The only way I think of is if you create a different class for each image. Then you create your css code rules for each image. That would be very time consuming. I think the developer will have to check this for you.

Regards

I found the best solution for this was to pad the images to make them all the same size, so a 200x440px image would become a 800x440px padded image with on a white background.

I can do this easily running the images through a batch process (phatch) to scale,round corners, change canvas size and centre the image.

The other advantage is that I can switch off the width option meaning I do not need any custom CSS to centre horizontally.

It’s a workaround, but it got the result fairly painlessly.

The results are at Demo Gallery

Thanks for you help with this.

Hi alleyoopster I am glad to hear, well done ??

If your issue is resolved can you make this support thread as resolved.

Thank you

done