Post by looker » Fri May 14, 2021 8:07 am

Hello dear members,
English is not my native language but I try my best to explain the situation.
I am setting up online store and when I have website turned on my computer in maxed window, product list items on my homepage are borderless.
As long as I try to make the window with my website smaller, the white borders are appearing and the image is pretty small.

When I added max resolution 1000x1000 in my "Latest" and "featured" products, it worked great but the page was loading for ever because of the size of the images.
I would like to set up resposivity the way, that images adjust into max resolution when on smaller screen, same like it does when the website is maxed out.

Did a lot of my reasearch but I am not the smartest here. I understand opencart bootstrap to configure responsivity if I understand it correctly. I been trying to play with my stylesheet.css but I am not certain what to change or add to get desired outcome.

I have pasted part of my css into this Topic as I feel that might be where change is needed or in bootstrap in admin panel.
Please help me out. It helps talk to me like a 5 years old.
Appreciate your patience. :)
Frank

Code: Select all

/* product list */
.product-thumb {
	border: 1px solid #ddd;
	margin-bottom: 20px;
	overflow: auto;
}
.product-thumb .image {
	text-align: center;
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.8;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
	float: left;
	padding: 0 15px;

}
}
.product-thumb h4 {
	font-weight: bold;
}
.product-thumb .caption {
	padding: 0 20px;
	min-height: 180px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
	min-height: 210px;
	padding: 0 10px;
       
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
	min-height: 0;
	margin-left: 0;
	padding: 0 10px;
}
.product-grid .product-thumb .caption {
	min-height: 0;
}
}
.product-thumb .rating {
	padding-bottom: 10px;
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: #999;
	font-size: 15px;
}
.rating .fa-star {
	color: #FC0;
	font-size: 15px;
}
.rating .fa-star + .fa-star-o {
	color: #E69500;
}
h2.price {
	margin: 0;
}
.product-thumb .price {
	color: #444;
}
.product-thumb .price-new {
	font-weight: 600;
}
.product-thumb .price-old {
	color: #999;
	text-decoration: line-through;
	margin-left: 10px;
}
.product-thumb .price-tax {
	color: #999;
	font-size: 12px;
	display: block;
}
.product-thumb .button-group {
	border-top: 1px solid #ddd;
	background-color: #eee;
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 60%;
	border: none;
	display: inline-block;
	float: left;
	background-color: #eee;
	color: #888;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid #ddd;
}
.product-thumb .button-group button:hover {
	color: #444;
	background-color: #ddd;
	text-decoration: none;
	cursor: pointer;
}
@media (max-width: 1200px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
@media (max-width: 767px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
}
.thumbnails > li {
	margin-left: 20px;
}
.thumbnails {
	margin-left: -20px;
}
.thumbnails > img {
	width: 100%;

}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
}

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

	#column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

	#column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}

Newbie

Posts

Joined
Tue Nov 11, 2014 5:56 am

Post by by mona » Fri May 14, 2021 8:25 am

A link to your site would help and maybe some screenshots with circles where you see a problem.

I don’t really understand.
You have no border on your images on wide screen?
The border takes up the space of the image in a small screen?

Opencart has responsive images - please post your opencart version
A theme? An extension image?

Understand people prefer faster sites and images that can be expanded to see detail (the are also used to it today)
Unless the images are critical (in which case you edit your store to work around that) not only should you use smaller images, but you should compress them as small as you can also.

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by paulfeakins » Fri May 14, 2021 4:31 pm

looker wrote:
Fri May 14, 2021 8:07 am
Did a lot of my reasearch but I am not the smartest here. I understand opencart bootstrap to configure responsivity if I understand it correctly. I been trying to play with my stylesheet.css but I am not certain what to change or add to get desired outcome.
Sounds like you'd better pay a developer from the Commercial Support forum.

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk


User avatar
Guru Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom

Post by by mona » Sun May 16, 2021 10:05 am

looker wrote:
Fri May 14, 2021 8:07 am
product list items on my homepage are borderless.
As long as I try to make the window with my website smaller, the white borders are appearing and the image is pretty small.

I am just working on something and I saw these “white borders” and I remembered you - is this what you mean - try adding this to your stylesheet.css

Code: Select all

@media (max-width:767px) {
    .img-thumbnail {
       padding: 0px;
    }
}

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by faizanyasn » Sun May 16, 2021 11:56 am

Donot set height to image rather if you want to make image size bigger then edit image resolution/ dimension in admin panel or if you can code then change image resolution from controller files manually, Opencart use to crop and manipulate images thats why it drops result on bigger display

For further assistance with Opencart Development you can reach me at
asktofaizan@gmail.com | https://asktofaizan.com |


Newbie

Posts

Joined
Tue Jan 12, 2021 2:28 pm

Post by by mona » Mon May 17, 2021 1:14 am

To check whether it is a css issue or an OC resizing issue :-

1) Right-click on your image and open the image in new tab
2) If the image has white borders/bands, left-right or top-bottom then the aspect ratio of your original image is different from the aspect ratio you defined in admin.
2b) you might have to download the image or set your the body background-color to black to check.

When resizing an image, OC creates a white image in the dimensions you specify for it in admin.

It then resizes the original to fit on that white image while preserving the original's aspect ratio and copies it on it. OC does not crop or stretch the original.

This means that different aspect ratio's will result in white bands just like when you view a cinema movie on a tv screen. You may mistakenly assume it is a css border.

original: 2000x1200px ar:0.6
admin: 800x800px ar:1
image copied: 800x480px ar:0.6
result: 800x800px image with white bands top-bottom of (800-480)/2 = 160px each

original: 2000x1200 px ar:0.6
admin: 800x480 px ar:0.6
result: no bands

original: 2000x2000 px ar:1
admin: 800x800 px ar:1
result: no bands

3) To prevent banding, make sure your originals all have the same aspect ratio and that you use that aspect ratio in admin while specifying smaller dimensions.

There are other ways of resizing the originals preventing bands but that would require code changes to the OC system.

4) If the image does not have white borders/bands, then the image resizing is solid leaving it is a pure css issue.
4b) Try the solution I posted above - It would appear that there is a missing class for the image in a couple of places where it gets small, it is not unpleasant and no-one has ever complained about it, but it might be what you mean.

5) If the above does not work / you are unsure how to do - please follow the advice on my first post - a link to your site would be best. I am still not sure where or why - so guessing what the problem is does not assist in resolving the problem :)

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am
Who is online

Users browsing this forum: DesignCart and 99 guests