How can I decrease the width in source theme?

Themes
1

Hello, I want to decrease the width in source theme And make the big featured image a bit smaller. How can i do it?

Thank you

2

Hi @umut_yasar

Try to add this code to the footer:

<script>
document.addEventListener('DOMContentLoaded', () => {
    const headers = document.getElementsByClassName('gh-header');
    if(!headers.length || headers.length > 1) return;
    ['gh-container-inner', 'gh-inner'].forEach(clazz => headers[0].classList.add(clazz))
})
</script>

The idea of the script is to re-use existing styles insted of adding something new. I am adding gh-container-inner and gh-inner to the elemenet with class gh-header

Here is a result. In red I highligted what was removed. Or you can check out my blog without this fix for comparison.

Screenshot 2024-09-22 at 20.47.59
Screenshot 2024-09-22 at 20.47.591715×851 124 KB

My blog:

I hope it solves your poblem

3

hello, thank you for the help however it didnt work. I need to reduce the width of main container i guess. Can i do that with css? How?
Thank you.

4

You’re going to want to define this variable, which is defaulting to 720px. – try some smaller values there and see what works best for you.

<style>
:root {
 --content-width: 720px !important
}
</style>
1 Like
5

Thank you it worked for single post layout but i want to implement it on homepage.

6

Oh. There are multiple homepage layouts and multiple parts to some of them. If you can say more about your setup or link it, that’d help. :)

7

hi, i use highlight layout. Here is my site: kozanhaber.com

8 
:root {
    --container-width: 1000px;
}
9

That worked. Thank you so much.

1 Like