Solved

How can I remove the grey background from my blog image in the Dawn theme?

Sancho13
New Member
4 0 0

Hello, I messed around with the blog image size and now I cant get rid of the grey background behind the image:

https://lamanchanursery.com/blogs/news/how-to-grow-san-pedro-seeds

I would also like to give it round corners, like here: 

https://lamanchanursery.com/blogs/news

 

thank you

Accepted Solution (1)

PageFly-Richard
Shopify Partner
4322 980 1639

This is an accepted solution.

Hi @Sancho13 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.article-template__hero-adapt.media {
    background-color: unset;
    border-radius: 20px;
    padding-bottom: 50% !important;
}
.article-template__hero-adapt.media img {
    border-radius: 20px;
    object-fit: cover;
}
</style>

PageFlyRichard_0-1712106373936.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 3 (3)

pooja_d_92
Shopify Partner
132 16 18

Hey @Sancho13 

I hope you are well and safe!!

Please use below code in css file:
article.article-template .article-template__hero-adapt {
border-radius: 15px;
overflow: hidden;
}

Thanks

Pooja Devi

PageFly-Richard
Shopify Partner
4322 980 1639

This is an accepted solution.

Hi @Sancho13 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.article-template__hero-adapt.media {
    background-color: unset;
    border-radius: 20px;
    padding-bottom: 50% !important;
}
.article-template__hero-adapt.media img {
    border-radius: 20px;
    object-fit: cover;
}
</style>

PageFlyRichard_0-1712106373936.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Sancho13
New Member
4 0 0

worked perfectly, thank you!