Dawn Theme: How to make product recommendations smaller?

Store Design
1

Hi,

I am using Dawn Theme and product recommendations under the product page are too large. How can i make it smaller?

First screenshot is the featured product and second one is the product recommendations section below it.

Screenshot 2022-04-01 161701.png
Screenshot 2022-04-01 161701.png1827×808 233 KB

Screenshot 2022-04-01 161728.png
Screenshot 2022-04-01 161728.png1835×797 109 KB

1 Like
2

@pinkosce

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

Thank you KetanKumar, this is my website https://pinarkoseoglucecen.myshopify.com/.

1 Like
4

@pinkosce

thanks for url can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file.
@media screen and (min-width: 750px) {
.product-recommendations .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.product-recommendations__heading {
    text-align: center;
}
.product-recommendations .grid--2-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) / 2);
}
}
1 Like
5

Thanks a lot! It looks already much better, however i wonder if it could be aligned to the left, both the title and the products?

1 Like
6

@pinkosce

yes, please remove first one and add this

@media screen and (min-width: 750px) {
.product-recommendations .grid {
    display: flex;
    flex-wrap: wrap;
}

.product-recommendations .grid--2-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) / 2);
}
}
1 Like
7

Perfect! thank you very much!

1 Like
8

@pinkosce

its my pleasure to help us

1 Like