Solved

Resize blog banner images with the Spark theme.

VuWing
Tourist
8 1 0

Anyone know how to resize the blog images in the Spark theme? The thumbnails for the blog pages are stretched as wide as the page, completely distorting the image and making the blog look like garbage.  I've also requested support from the Spark theme publisher, but if anyone knows that'd be a huge help. Apparently, searching the forums this is a very common problem across many themes so maybe it's a Shopify issue.

Accepted Solution (1)
VuWing
Tourist
8 1 0

This is an accepted solution.

I hear back from the vender, the code to add to the end of index.css is...

 

.article__image {
    max-width: 540px;
    margin: auto;
}
 
This solved the blog photo size for the Spark theme.

View solution in original post

Replies 13 (13)

Ecommpremium
Shopify Partner
512 43 93

hi @VuWing  please share store URL so i can help you out!

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
VuWing
Tourist
8 1 0

It's https://vuwing.com - you can see a distorted blog page here https://vuwing.com/blogs/news-1/interested-in-our-affiliate-program 

Thanks for having a look!

Ecommpremium
Shopify Partner
512 43 93

please go to assets then  theme.scss.liquid and paste this CSS at the bottom and if you need more help then kindly share here

.image__img {
height:50%;
width:50%;
}

 

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
VuWing
Tourist
8 1 0

That had no affect adding it to theme.liquid... appreciate the idea.

Ecommpremium
Shopify Partner
512 43 93

You have to add it in theme.scss.liquid at bottom.Thanks

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
VuWing
Tourist
8 1 0

theme.scss.liquid does not exist in my theme. 

Ecommpremium
Shopify Partner
512 43 93

@VuWing @ Can you share screenshot of first five files in assets so I can tell you where to past

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
VuWing
Tourist
8 1 0

VuWing___Edit___Spark___Shopify.png

Ecommpremium
Shopify Partner
512 43 93

@VuWing  paste above code in the bottom of index.css file

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
VuWing
Tourist
8 1 0

Adding the code in index.css had no affect. There is an entire blog related section in the .css, I'll have a look through there. 

Ecommpremium
Shopify Partner
512 43 93

yes you can paste it there in .css file

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
VuWing
Tourist
8 1 0

That's what I said, adding the code to the index.css had no affect.

VuWing
Tourist
8 1 0

This is an accepted solution.

I hear back from the vender, the code to add to the end of index.css is...

 

.article__image {
    max-width: 540px;
    margin: auto;
}
 
This solved the blog photo size for the Spark theme.