How do I resize the featured product image in Dawn theme?

Store Design
1

Hi everyone!Does anyone know how to change the size of image at section featured product?The image is very large.Thank you :slightly_smiling_face:

2

@sonia1709 Could you post a screenshot?

3

I have the same problem. Here is my screenshot. This is in the home page.

4

Στιγμιότυπο οθόνης (125).png
Στιγμιότυπο οθόνης (125).png1327×493 156 KB

5

Are you wanting the image to be less than 50% width?

6

yes please.

7

You would need to edit the css to something like:

.featured-product .grid__item.product__media-wrapper {
    width: 35%;
}

You may need to alter it for the breakpoints.

8

I found the way to resize my picture by changing the % size of the image i the section-futured-product.css
At the very top of the code i change from 100% to 80% and di the job.. I also change padding “rem” to make the entire block smaller and customize couple more things.. Here is my entire code:

.featured-product {
margin-bottom: 0.1rem;
}

.featured-product .product__media-list {
width: 80%; NOTE… HERE IS WHERE I CHANGE THE IMAGE FROM 100% TO 80%
margin: 3rem;
padding-bottom: 0;
}

.featured-product .product__media-item {
padding-left: 1rem;
width: 100%;
}

.featured-product .product__media-item:not(:first-child) {
display: none;
}

.featured-product-section .background-secondary {
padding-top: 5rem;
padding-bottom: 0.1rem;
}

.background-secondary .featured-product {
background: rgb(var(–color-background));
padding: 2.5rem;
}

.product__view-details {
text-align: center; padding-top: 0;
color: white; font-size: 20px; background: #056C27;
display: block;
text-decoration: none;
}

.product__view-details:hover {
color: yellow

}

.product__view-details .icon {
width: 1.2rem;
margin-left: 1.2rem;
flex-shrink: 0;
}

.featured-product .share-button:nth-last-child(2) {
display: inline-flex;
}

.share-button + .product__view-details {
display: inline-flex;
float: right;
}

.share-button + .product__view-details::after {
content: “”;
clear: both;
display: table;
}

@media screen and (min-width: 750px) {
.featured-product .product__media-item {
padding-bottom: 0;
}

.featured-product-section .background-secondary {
padding-top: 0.2rem;
padding-bottom: 0.1rem;
background-color:#056C27
}

.background-secondary .featured-product {
padding: 5rem;
}
}

@media screen and (min-width: 990px) {
.background-secondary .featured-product:not(.product–no-media) > .product__info-wrapper {
padding: 0 0 0 5rem;
}

.featured-product:not(.product–no-media) > .product__info-wrapper {
padding: 0 0 0 7rem;
}

.background-secondary .featured-product {
background: rgb(var(–color-background));
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
}