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

[Joegr7]

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, 

[AlexEffron · Accepted solution]

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;
}

[dmwwebartisan · Accepted solution]

@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;
}

[dmwwebartisan · Accepted solution]

@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;
}
}

[ZestardTech]

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%;
}

[AlexEffron · Accepted solution]

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;
}

[Zworthkey]

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

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

Thank You.

[dmwwebartisan · Accepted solution]

@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;
}

[Joegr7]

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

[Joegr7]

Here's the example 

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

[dmwwebartisan · Accepted solution]

@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;
}
}

[LitExtension · Accepted solution]

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.

[RewardBotanical]

@AlexEffron  @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....

•  sectionhub.scss.liquid
•  sectionhub-julia.scss.liquid
•  gift-card.css.liquid
•  theme.css.liquid
•  variables.css.liquid
•  gift-card.js
•  ie11CustomProperties.min.js
•  layouthub-jquery.min.js
•  lazysizes.js
•  password.js
•  sectionhub.js
•  theme.js
•  ico-select.svg.liquid
•  ajax-loader.gif

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!