Adjust Photo size on Home Page with Taste Theme

Store Design
1

I’m using the Taste theme and have added a block with a blog. The featured image is huge when viewed on a desktop. It looks fine on a mobile device.

How can I adjust the size/space the image takes up on the homepage?

I am redesigning and the site is not live yet, but here is the preview link: https://zl06dw0x7rxt89n9-425656385.shopifypreview.com

I am unfamiliar with how to find the code to adjust it. Thanks for any advice!

2 Likes
2

@PBGrocery

oh sorry for that issue

can you please share section screenshot

3

Yes, I had to zoom out to 50% on my browser just to see everything. The first image is viewing my regular internet browser and then zooming out.

my regular internet browser screen
my regular internet browser screen2722×1162 346 KB

zoomed out at 75%
zoomed out at 75%2362×1190 337 KB

zoomed out 50%
zoomed out 50%1658×1152 243 KB

viewed on my mobile device
viewed on my mobile device1284×2778 236 KB

4

Hi @PBGrocery ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-featured-blog.css->paste below code at the bottom of the file:
@media (min-width: 990px) {
.blog__posts.articles-wrapper {
    justify-content: center !important;
}
.blog__posts.articles-wrapper .article {
    max-width: 50% !important:
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

I appreciate the suggestion, however this didn’t change anything. Any other ideas?

6

Hi @PBGrocery ,

Sorry, I confused the “;” and “:”

You try below code in section-featured-blog.css file:

@media (min-width: 990px) {
.blog__posts.articles-wrapper {
    justify-content: center !important;
}
.blog__posts.articles-wrapper .article {
    max-width: 50% !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

Thank you! That did make the whole image smaller. Would there be a way to keep the width the same or slightly smaller, while decreasing the overall height? I realized that might change the ratio of the image I’m uploading (which is ok). I think it would look better if the proportions were like that vs just decreasing the overall size.

8

Hi @PBGrocery ,

You try below code in section-featured-blog.css file:

@media (min-width: 990px) {
    .blog__posts.articles-wrapper {
        justify-content: center !important;
    }
    .blog__posts.articles-wrapper .article {
        max-width: 50% !important;
    }
    .blog__posts.articles-wrapper .article img {
        max-width: 80%;
        left: 10%;
        height: auto;
        object-fit: contain;
    }
    .blog__posts.articles-wrapper .media {
        background: transparent;
    }
    .blog__posts.articles-wrapper .ratio:before {
        padding-bottom: 54%;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

9

Thank you. I copied that code and it gave me the same result. The image did get smaller both in height and width. I do appreciate you trying to help! Any advice on how I can find out more on how to decrease only the height and not the width?

Screen Shot 2022-03-22 at 8.22.24 PM.png
Screen Shot 2022-03-22 at 8.22.24 PM.png2278×1184 249 KB

10

Hi @PBGrocery ,

You try below code in section-featured-blog.css file:

@media (min-width: 990px) {
    .blog__posts.articles-wrapper {
        justify-content: center !important;
    }
    .blog__posts.articles-wrapper .article {
        max-width: 50% !important;
    }
    .blog__posts.articles-wrapper .media {
        background: transparent;
    }
    .blog__posts.articles-wrapper .ratio:before {
        padding-bottom: 50%;
    }
}

NOTE: Value padding-bottom: 50% → you can change 50% to increase or decrease height

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

11

Thank you!! I was able to adjust it to work the way I wanted. I VERY much appreciate your help!!

1 Like