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

Solved
Joegr7
Excursionist
26 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

 

0 Likes
Pallavi
Shopify Expert
2383 397 515

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
0 Likes
HardikDavra
Shopify Partner
2464 386 1037

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

 

0 Likes

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

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

Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme,
Hire us. or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Buy me a coffee ☕ Donate Us
0 Likes
dmwwebartisan
Shopify Partner
9124 2113 2882

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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Joegr7
Excursionist
26 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

 

0 Likes
Joegr7
Excursionist
26 0 5
dmwwebartisan
Shopify Partner
9124 2113 2882

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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes