How Do I Increase The White Space And Reduce The Image Size Of My Site's Blog Post

[Strapatelier]

Hi everybody!

I would like to find out how to increase the white space between my blog’s title and the header. I also would like to find out how to reduce the cover image size of my blog entry, as it is too big.

My blog site: https://www.strapatelier.com/blogs/general/4-watch-recommendations-below-usd-300-for-different-events

[made4Uo]

Hi @Strapatelier ,

1. Go to your Admin store > Online store > Themes > Click Actions > Edit code

To adjust the space between the header and the title, please paste the code below in the theme.scss under the Asset folder. Adjust the px accordingly.

.entry-header .entry-title {
padding-top: 50px
}

To decrease the size of your image. Just add the code below in the theme.scss file under the Asset folder. Adjust percentage accordingly

.entry-format img {
max-width: 60%
}

[Strapatelier]

@made4Uo Thank you. How do I reduce the space between the image and the blog’s title?

[Dan-From-Ryviu]

You can add this code to reduce that space

.template-blog .blog-layout-masonry .blog-wapper .entry-title { padding-top: 30px !important; }

[Strapatelier]

@Dan-From-Ryviu Thank you. How do I centre the cover image?

[Dan-From-Ryviu]

Hi @Strapatelier , use this code to just center the cover image

.blog-layout-masonry .blog-wapper .entry-format { text-align: center; }

Or this code to center other things like image below

.blog-wapper .entry-header { text-align: center; }

l

[Strapatelier]

@Dan-From-Ryviu Thank you. How do I make the sharing bar smaller and flush it to the left.