Reduce multicolumn image size for desktop view

[Aabe]

So title, the images are way too big for desktop view, mobile is good. Is there some kind of code that I could adjust it with? Thanks

https://vendicit.com/

[Small_Task_Help]

Hi,

At theme.scss.liquid or styles.scss.liquid

Add the following CSS code to resize the images For example, if the images are inside a class called .product-image, your CSS would look like this:

@media (min-width: 768px) {
  .product-image img {
    max-width: 100%; /* Adjust the percentage as needed */
    height: auto;
  }
}

If you still need help you can contact us (details given at signature)

[Aabe]

Hey, I dont have theme.scss.liquid or styles.scss.liquid in the files. Only theme.liquid, I tried the code there but didn’t work

[BSS-Commerce]

Hi @Aabe ,

To make image smaller as the following img, go to Themes → Edit code


1. Find file “section-main-product.css”, add code in the end of file:
This makes the image to be in the center of its container. You can customize the value of height as you want
“@media (min-width: 768px)” block is used to set responsive style for screen with a width is 768px (desktop screen) - you can change the value of the min-width

@media (min-width: 768px) {
	.product-media-container .product__modal-opener {
		display: block;
		position: relative;
		height: 500px;
	}
	
	.product-media-container.constrain-height .media {
		padding: 0;
		height: 100%;
		display: flex;
		justify-content: center;  
	}
}

2. Go to file “base.css” and add code
This will make the image inherit the height of its container (ex: 500px) and keep the ratio between height and width

@media (min-width: 768px) {
	.media>*:not(.zoom):not(.deferred-media__poster-button) {
		height: 100%;
		width: auto;
		position: relative;
	}
}

3. If you want the image smaller when enlarging image of the product


Find file “section-main-product.css” and add code:

@media (min-width: 768px) {
	.product-media-modal__dialog {
		justify-content: center;
	}
	.product-media-modal__content {
		height: 95%;
		width: auto;
	}
	.product-media-modal__dialog .global-media-settings--no-shadow {
		height: 100%;
		width: auto;
	}
}

NOTE: if these codes not work, you can add “!important” to every css property line to overide the style of the theme, make sure they are added at the end of the file, and choose the right file, for example:

.product-media-container .product__modal-opener {
	display: block !important;
	position: relative !important;
	height: 500px !important;
}

Hope it helps @Aabe !

[Aabe]

Hey, there’s a little misunderstanding, sorry if I wasn’t clear.

I meant the product photos on the homepage of my store, the wine bottle opener and the electric cleaning brush

[BSS-Commerce]

Hey @Aabe ,

1. Go to Theme-> Edit code
2. Find file “section-multicolumn.css” and find “@media screen and (min-width: 750px) {”

• the code: “@media screen and (min-width: 750px) {” wrap setup code for style of desktop

3. Add the following code inside that block

NOTE: you must put code inside block @media screen and (min-width: 750px) { }

.multicolumn-list__item:only-child {
    display: flex;
    justify-content: center;
}

It’ll make the product block to be in the center of screen

.multicolumn-card.content-container {
    width: 75%;
}

It’ll make product image to be smaller, 75% of width of the screen, and without changing the ratio between width and height of the product image (you can change percent of the width)

4. if you want the title to be smaller, you can add the below code behind the code in step 3

“h3” is element which wraps the title, font-size is size of letters

.multicolumn-card.content-container h3 {
	font-size: 18px;
}

To make the descriptions is smaller, add this:
because they are inherited size from the parent, so just add font-size in here

.multicolumn-card.content-container {
    font-size: 14px;
}

P/s: Add !important behind if the code isn’t work, it’ll overide the style of theme

The result will be as the following image: