Dwan Theme: How to reduce the size of the photos in the blogs/news

Store Design
1

Hi Community, I need to reduce the size of the photos in the blog page or news page, it is too big, also in the blog or page section

This is the website: www.thegiftcompany.com.au

Thank you,

Joegr7_0-1632205403106.png
Joegr7_0-1632205403106.png1888×926 85.1 KB

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
.blog-articles .article-card__image.media.media--landscape {
padding-bottom: 40%;
}
3

Hello @Joegr7

Please Go to Online Store → Themes → Edit code → Assets → base.css and paste this code at the end of this file.

.blog-articles__article .article-card .article-card__image-wrapper .article-card__image {
padding-top: 36% !important;
}
4

hii, @Joegr7
paste this code on top of the component-article-card.css file.

.article-card__image-wrapper {
    height: 182px;
    width: 307px;
}

Thank You.

5

@Joegr7

Please Go to Online Store → Themes → Edit code → Assets → base.css and paste this code at the end of this file.

.main-blog.page-width {
    max-width: 800px !important;
    margin: 0 auto;
    padding: 0 1.5rem;
}
6

Hi, the blog collection page is now with normal size. However the blog page still with the big photo see below

Joegr7_0-1632220577844.png
Joegr7_0-1632220577844.png1772×911 156 KB

7

Here’s the example

https://thegiftcompany.com.au/blogs/news/new-collection-maison-blanche

8

@Joegr7

please add below code in bottom of assets/section-blog-post.css

@media screen and (min-width: 1320px){
.article-template__hero-container {
    max-width: 75rem;
    margin: 0 auto;
}
}
9

Hi @Joegr7 ,

Please follow these steps below:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > base.css and paste this at the bottom of the file:

/* For blog page /
.blog-articles .article-card__image.media–landscape{
padding-bottom: 40% !important;
}
/ For article page */
.article-template .article-template__hero-container .media{
padding-bottom: 50% !important;
}

Hope it helps!

If you find my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

10

@Hardik29418 @LitExtension @dmwwebartisan @Zworthkey

Hello! Well, I read all the solutions, and I do not have any of these “css” y’all talk about under “assets” so I cannot figure this out.

I am NOT a code person, I’m just the youngest on staff so I am the one who does the Web site, and I don’t do it well. I need EXACT instructions as to what I can do to REDUCE the size of the photos on my blog posts. If you look at this link, you can see they are HUGE. https://www.rewardbotanicals.com/blogs/news

None of the solutions here are viable bec none of those css thingys listed are found under “assets” when I try to follow the instructions. Please help me. These photos are way too big and I look like an idiot.

This is what I have listed under “assets” and I have zero idea what they mean…

Thanks! I just want the pics to be smaller. I’m not sure why this is so difficult. Thanks for any help you can give!