How to Change Blogger Template Width Without Breaking It

Your posts look cramped in a narrow column with huge empty margins on both sides, or the opposite: lines of text stretch so wide on a laptop that reading them feels like watching tennis. Changing the Blogger template width is a small edit, but done carelessly it pushes the sidebar under the posts, breaks image galleries and ruins the mobile layout.

I customize Blogger themes for clients every week, and width changes are the edits I see go wrong most often. Here is how to adjust the Blogger template width safely, on both the older Layout themes and the newer ones like Contempo, Soho, Emporio and Notable.

Back up before touching the Blogger template width

Go to Theme, click the arrow next to Customize, and choose Backup. Download the XML file and rename it with today's date. If something breaks, you can restore the whole theme in under a minute. Our checklist on what to back up before changing your Blogger theme lists the widgets that a theme restore does not bring back.

Then open your blog in a separate tab and take two screenshots, one on desktop and one on your phone. You will compare against them later.

Decide what width you actually want

Before typing any numbers, decide what the change is for. Most people want one of three things:

More readable posts. Comfortable body text runs about 60 to 75 characters per line. At an 18 pixel font size that is a post column of roughly 680 to 760 pixels.
Room for a wider sidebar. A sidebar of 300 to 340 pixels fits standard 300 pixel wide widgets and images without cropping.
A fuller look on large screens. A total container width between 1100 and 1200 pixels suits most laptops and desktop monitors.

Element	Sensible range	Common mistake
Whole page container	1100 to 1200 px	Setting 100% so text spans the full screen
Main post column	680 to 780 px	Going past 900 px on a text-heavy blog
Sidebar	300 to 340 px	Below 250 px, which squashes widgets
Gap between columns	30 to 50 px	Zero gap, so text touches widget borders

Older Layout themes: use Theme Designer first

If your blog uses one of the classic themes such as Simple, Picture Window, Awesome Inc or Ethereal, Blogger still offers a built-in width tool.

Go to Theme, then Customize.
Open Adjust widths.
Drag the Entire blog slider to your total width, for example 1140 px.
Drag the Right sidebar slider, for example to 320 px.
Check the live preview, then click Apply to Blog.

This is the safest route because Blogger rewrites its own width variables, so nothing else in the template falls out of sync.

Newer themes: editing width with CSS

Contempo, Soho, Emporio, Notable and Essential do not offer width sliders. Instead you add a small CSS override. Do not edit the theme's original CSS block directly. Adding an override is easier to undo.

Go to Theme, click the arrow next to Customize, and choose Edit HTML.
Press Ctrl+F inside the editor and search for max-width. Note the selector names your theme uses for the outer page and the main column. They vary from theme to theme.
Close the editor. Go to Customize, then Advanced, then Add CSS.
Add a rule that targets the outer container you found, setting its max-width to your chosen value, such as 1140px. Add a second rule for the main column if needed.
Click Save, then reload your blog with a hard refresh.

Use max-width rather than a fixed width. A fixed width of 1140 px forces sideways scrolling on any screen narrower than that, which is the most common way a width edit breaks mobile. With max-width, the container shrinks on small screens and simply stops growing on large ones.

The "just make it full width" advice causes more problems

Lots of tutorials suggest setting the container to 100 percent so the blog uses every pixel of the screen. It sounds modern. In practice, it hurts most text blogs.

On a 1920 pixel monitor, a full width post column gives lines of 150 characters or more. Readers lose their place jumping back to the start of each line, and time on page drops. Images uploaded at 1600 pixels start to look soft when stretched further. And widgets in the sidebar, which are usually built for 300 pixels, float awkwardly in a vast column.

Full width does make sense for photo-led blogs and galleries, where the image is the content. For a blog people come to read, a capped width with generous side margins is a better choice. If you want a fuller feel, increase the font size slightly instead of widening the column.

Checking the result on every screen

A width change is not done until you have checked it at three sizes.

Desktop. Compare against your screenshot. Is the sidebar still beside the posts, not underneath them?
Tablet. In Chrome, press F12, toggle the device toolbar and pick a 768 px width. Look for text running off the right edge.
Phone. Check a real phone, not only the preview. If Blogger's mobile version is enabled, your CSS may not apply to it at all.

If the sidebar drops below the posts on desktop, the main column plus sidebar plus gap now adds up to more than the container. Reduce one of them by 20 to 40 pixels and recheck. If images overflow, add a rule giving post images a max-width of 100 percent and an automatic height. Our wider guide on customizing a template without breaking the layout covers that and other common fixes.

When to leave the width alone

If your theme came from a third-party designer and its CSS uses lots of percentages and media queries, width changes can conflict with the designer's breakpoints. In that case, look for a width setting in the theme's own options, often near the top of the Edit HTML code, before overriding anything.

And if your header image was cut to the old width, it may need resizing too. A header built for 960 pixels will look small or blurry in a 1200 pixel container.

Frequently asked questions

How do I change the width of my Blogger template?

On classic themes, use Theme, Customize, Adjust widths and drag the sliders. On newer themes like Contempo or Soho, add a max-width CSS rule through Customize, Advanced, Add CSS. Always back up the theme first.

What is the best width for a Blogger blog?

For most text-led blogs, a total container of about 1100 to 1200 pixels works well, with a post column of 680 to 780 pixels and a sidebar of around 320 pixels. Photo blogs can go wider.

Why did my sidebar move below my posts after changing the width?

The columns no longer fit inside the container. Either the main column or sidebar is now too wide, or the gap between them pushed the total over the limit. Shrink one value by 20 to 40 pixels and check again.