Blogger's new themes are responsive and you get a very little option to change the set width of the main area. The theme designer doesn't even an option to adjust the widths either.
We will use custom CSS codes to customize the width of the Soho theme's blog area to stretch more than the default setting.
This post would be very short, the reason for this being short is that this tutorial will simply teach you how to do a specific thing - here setting the width and that doesn't require too much technical background. Also we will be posting a series of customization tutorial for Blogger's new Themes (Soho, Contempo, Emporio and Notable), be sure to subscribe to our blog for updates.
The width of the parts of the theme is dependent on the available screen width, this is the nature of response web design. Nowadays everybody has screens larger than 1000px in width so it is a good idea to stretch the blog wider on larger screens than to leave empty areas.
After copying keep it in a notepad / textedit app since we are going to need it in the next step.
You can customize the values according to your needs if you know what you are doing else it is suggested you post a comment down below explaining how you want it to be different for your use so that we can help.
We will use custom CSS codes to customize the width of the Soho theme's blog area to stretch more than the default setting.
This post would be very short, the reason for this being short is that this tutorial will simply teach you how to do a specific thing - here setting the width and that doesn't require too much technical background. Also we will be posting a series of customization tutorial for Blogger's new Themes (Soho, Contempo, Emporio and Notable), be sure to subscribe to our blog for updates.
Getting Started
Currently the largest width Soho theme stretches is 1000px, if the screen is more than 640px the blog post area as well as header & footer will stretch as much as 1000px.The width of the parts of the theme is dependent on the available screen width, this is the nature of response web design. Nowadays everybody has screens larger than 1000px in width so it is a good idea to stretch the blog wider on larger screens than to leave empty areas.
CSS Snippet
Following is what we need, you don't have to customize it, it works well with existing standard screen widths and stretches the areas as required. Copy the CSS code -/* For screen widths less than 1280px */
/* For screen widths less than 1280px */
@media screen and (min-width:1280px) {
.centered-bottom, .centered-top {
width: 1180px;
}
body.item-view .widget.Blog .post {
width: 800px;
}
}
/* For screen widths less than 1400px */
@media screen and (min-width:1400px) {
.centered-bottom, .centered-top {
width: 1300px;
}
body.item-view .widget.Blog .post {
width: 1060px;
}
}
After copying keep it in a notepad / textedit app since we are going to need it in the next step.
You can customize the values according to your needs if you know what you are doing else it is suggested you post a comment down below explaining how you want it to be different for your use so that we can help.
Applying the CSS
For a complete guide on adding CSS codes in Blogger refer to this tutorial - How to add CSS to your Blogger Blog.- Open your Blogger Dashboard and choose the blog
- Go to the Theme section
- click on Customize
- Navigate to Advanced > Add CSS
- In the Add custom CSS text field enter the copied CSS code from the previous section. It should look like this -
- Click on Apply to Blog to save the changes and go to the blog to see it live.
That's it. Once the CSS is applied you will start seeing the customized width live on the blog.
What's next?
We plan on posting more small tutorials like this on customizing parts of new themes. If you have any suggestions email it to us on depy45631@gmail.com or post your idea in the comments below.
