In this post, I will explain how to easily remove or get rid of the large margin or spacing between the sidebar and main content in the Contempo Blogger themes by simply adding a little bit of CSS and avoid editing the themes.
The Contempo Blogger themes are fully responsive mobile optimized themes that can fit any screen resolution on desktop, tablets or smart-phones.
However, when the Contempo is viewed on larger desktops screens there is a wide margin between the sidebar and main content.
This appears to be ugly to some Bloggers who would like to get rid of this margin between the sidebar and content.
This can be done in two ways-
1] The CSS given below will remove the margin/spacing and reduce it to a minimum.
You have to go to the Blogger Theme Designer – Add CSS Section and add this code.
@media screen and (min-width: 1440px)
{
.page_body .centered {max-width: none }
}
If you have heavily customized your theme and if the code does not work by pasting it in the Blogger Theme Designer you can manually add ii by editing the theme and adding the code above-
]]></b:skin>
But first Back-Up and save your theme before editing your template.
The 1440px value is for the default width of the theme. If you have changed the width, then you can change the value accordingly.
2] This CSS Code given below will enable you to control the margin/spacing.
@media only screen and (min-width: 1440px) {
.page_body .centered {
max-width:80%;
}
}
This code should also be used in the same manner as the first code. But do not use both the codes use only one of the two.
The highlighted value of the % can be changed according to the margin you want to add.
The Contempo Blogger themes are fully responsive mobile optimized themes that can fit any screen resolution on desktop, tablets or smart-phones.
However, when the Contempo is viewed on larger desktops screens there is a wide margin between the sidebar and main content.
This appears to be ugly to some Bloggers who would like to get rid of this margin between the sidebar and content.
This can be done in two ways-
1] The CSS given below will remove the margin/spacing and reduce it to a minimum.
You have to go to the Blogger Theme Designer – Add CSS Section and add this code.
@media screen and (min-width: 1440px)
{
.page_body .centered {max-width: none }
}
If you have heavily customized your theme and if the code does not work by pasting it in the Blogger Theme Designer you can manually add ii by editing the theme and adding the code above-
]]></b:skin>
But first Back-Up and save your theme before editing your template.
The 1440px value is for the default width of the theme. If you have changed the width, then you can change the value accordingly.
2] This CSS Code given below will enable you to control the margin/spacing.
@media only screen and (min-width: 1440px) {
.page_body .centered {
max-width:80%;
}
}
This code should also be used in the same manner as the first code. But do not use both the codes use only one of the two.
The highlighted value of the % can be changed according to the margin you want to add.
Hi! I didn't understand. Even if I paste any of those CSS codes, I see no change. I don't like the space that is in between the entries (posts) what can I do?
ReplyDeleteThis tutorial is for removing margins between sidebar and content.
Delete