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

Solved
Joegr7
Excursionist
39 0 5

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

 

Accepted Solutions (4)
AlexEffron
Shopify Partner
2683 387 1052

This is an 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;
}

 

View solution in original post

dmwwebartisan
Shopify Partner
11515 2438 3529

This is an 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;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
11515 2438 3529

This is an 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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

LitExtension
Shopify Partner
4859 999 1078

This is an 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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 9 (9)
ZestardTech
Shopify Expert
4368 755 1026

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
AlexEffron
Shopify Partner
2683 387 1052

This is an 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
Shopify Partner
5581 642 1542

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
Shopify Partner
11515 2438 3529

This is an 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;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Joegr7
Excursionist
39 0 5

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
Excursionist
39 0 5
dmwwebartisan
Shopify Partner
11515 2438 3529

This is an 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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
LitExtension
Shopify Partner
4859 999 1078

This is an 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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
RewardBotanical
New Member
2 0 0

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

 

 

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!