How can I improve my Supply Theme blog layout?

[LynnieHHHY]

Help please.  I have been adding some blogs on my website and find the way it displays very messy. There are gaps between image and text.  I also would like to remove the sidebar which shows categories.

Also how do I change the url to read my new blog title?

https://www.healthierhome.com.au/blogs/news

[suyash1 · Accepted solution]

@LynnieHHHY - please add this css to the very end of your theme.scss.css file and check

.template-blog .sidebar{display:none; visibility:hidden;}
.template-blog .lazyload__image-wrapper{padding-top: 5% !important;}
.template-blog .lazyload__image-wrapper img{position: initial !important;}

[suyash1 · Accepted solution]

@LynnieHHHY - please add this css to the very end of your theme.scss.css file and check

.template-blog .sidebar{display:none; visibility:hidden;}
.template-blog .lazyload__image-wrapper{padding-top: 5% !important;}
.template-blog .lazyload__image-wrapper img{position: initial !important;}

[LynnieHHHY]

THank you. That looks much better.

[ZenoPageBuilder]

Hello @LynnieHHHY 👋

In Shopify Admin, you can go to Edit theme code, open file base.css, and add this code at the bottom

.lazyload__image-wrapper img {
    width: 100% !important;
}

The result

Hope that helps!

[LynnieHHHY]

I can not find the file base.css

[sakinur-rahman · Accepted solution]

@LynnieHHHY  please add this css to the very end of your theme.scss.css file and check

.template-blog .sidebar {
display: none !important;
}
.template-blog .grid-item {
width: 100% !important;
}
.template-blog .article__image {
width: 100% !important;
}
.template-blog .lazyload__image-wrapper {
margin: unset !important;
}
.template-blog .lazyload__image-wrapper {
margin-bottom: 10px !important;
}


.template-blog h2 {
font-size: 40px;
}

[LynnieHHHY]

This is much better.  Looks tidy.  Thank you.

[LynnieHHHY]

Can I make the image smaller?

[sakinur-rahman]

.template-blog .article__image {

max-width: 300px !important;

}