[SOLVED] - Slideshow / Banner - How to center? (images inside)

Right,

After fixing the issues that Netos extension created I still can not get my slideshow or banner on the home page to be centered again. It was before the issue but I cant see any difference in the slideshow.css / slideshow.tpl / banner.tpl compared to what I have now. Sadly I managed to get this centered a fair few months ago and I can not remember or find how I did it again (I have searched and searched and searched)


So ill explain my issue with more detail and a picture:


- The 400 image is 400H x 400W

- The 800 image is 400H x 800W

So with the above you can see the current situation and what I am after (again). I'm not sure what effects for the slideshow / banner change opencart supports so if anyone can do a list that would be fantastic but the main question is how can I get the image centered?


Someone mentioned matching the margins - Where would I do this? Eventually all banners / images in the slideshow will be the same so I just want to know how I can define them so its centered. I do have a backups of the website before the issue but when trying to use them the image stays to the left hand side of the screen.

Any help appreciated as I am desperate to get this sorted as I see it is a commonly asked question (and the answer will be highlighted when its successful to aid other members)

thanks

Weekend bump ...

I managed to get this to work... To aid others in this community who searched and could not find help or a solution this is what I did.


Option 1: - Credit to Mojtaba Sabeti for this method

- Open stylesheet.css (shop/catalog/view/theme/? ? ?/stylesheet/stylesheet.css)
(Replace ? ? ? to the theme you have installed)

- Add this to the very end;
Option 2: - Credit to Andrey Mamykin for this method

- Open stylesheet.css (shop/catalog/view/theme/? ? ?/stylesheet/stylesheet.css)
(Replace ? ? ? to the theme you have installed)

- Add this to the very end;

Thanks. the option 2 works for me (OC 3.0.2.0)

Option 2: - Credit to Andrey Mamykin for this method

- Open stylesheet.css (shop/catalog/view/theme/? ? ?/stylesheet/stylesheet.css)
(Replace ? ? ? to the theme you have installed)

- Add this to the very end;

Code: Select all

.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

richylh wrote: ↑

Wed Aug 22, 2018 5:08 am

Thanks. the option 2 works for me (OC 3.0.2.0)

Option 2: - Credit to Andrey Mamykin for this method

- Open stylesheet.css (shop/catalog/view/theme/? ? ?/stylesheet/stylesheet.css)
(Replace ? ? ? to the theme you have installed)

- Add this to the very end;

Code: Select all

.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

Option 2 works in v3.0.3.2 as well, thanks everyone!

max-width: 100%;
The only Drawback of such a Solution is, that smaller sized Images/Banners will
look like shit, if blown up to a larger size than created originally
A much better Solution is, to create Banners, meeting the Max-Size of the largest
Browser View Setting, by adding a MAX-View Display Setting Limit to all Pages shown.
Then, the images will always be centered automatically.

IP_CAM wrote: ↑

Thu Apr 30, 2020 6:53 am

max-width: 100%;
The only Drawback of such a Solution is, that smaller sized Images/Banners will
look like shit, if blown up to a larger size than created originally
A much better Solution is, to create Banners, meeting the Max-Size of the largest
Browser View Setting, by adding a MAX-View Display Setting Limit to all Pages shown.
Then, the images will always be centered automatically.

Many thanks,
Considering your input and others, I have made the change as follows and it works nicely on OC3038.

/* Limit the size of carousel images and thumbnails */
.carousel-inner > .item > a > img,
.carousel-inner > .item > img,
.img-responsive,
.thumbnail a > img,
.thumbnail > img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

/* Set a max-width for the container to limit image size */
.container {
max-width: 100vw; /* 100% of viewport width */
margin: 0 auto; /* Center the container horizontally */
width: 98%; /* to make use of the entire page, giving 2 percent space for text base pages like about us page */
}