How to Make Blogger Theme Full Width Like WordPress

If your Blogger website looks narrow and you want it to stretch across the full screen just like a WordPress site, this guide is for you. Many Blogger themes have a fixed container width by default, which limits how much of the screen your content uses. In this step-by-step tutorial, you will learn exactly how to make your Blogger theme full width by modifying the container width, updating the CSS, removing the sidebar, and ensuring your layout is fully responsive on all devices. This method works on any Blogger theme and requires no coding experience beyond basic copy and paste. Follow each step carefully and your blog will have a clean, modern, full-width layout in just a few minutes.

Image Source: flaticon.com

How to Make Your Blogger Theme Full Width (Just Like WordPress)

Table of Contents

• Loading…

Step 1: Locate and Modify the Container Width

• Open your Blogger Theme Editor.
• Search for this line inside <b:skin> (CSS section of the theme)

XML Code

<Variable name="outerContainer.width" description="Container Width" type="length" default="1178px" min="1178px" max="1378px" value="1178px"/>

Replace it with:

XML Code

<Variable name="outerContainer.width" description="Container Width" type="length" default="100%" min="100%" max="100%" value="100%"/>

Step 2: Modify the CSS for Full Width

Search for:

CSS Code

.container {
    position: relative;
    max-width: 1080px;
    width: 1080px;
}

Replace it with:

CSS Code

.container {
    position: relative;
    max-width: 100%;
    width: 100%;
}

Step 3: Ensure Full Width Layout

Search for:

CSS Code

#outer-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

If there is a max-width value (e.g., max-width: 1178px;), replace it with:

CSS Code

max-width: 100%;

Step 4: Expand Content & Remove Sidebar

Search for:

CSS Code

<style>
/* Container */
.code-container {
  position: relative;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 10px;
  margin: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>

Replace it with:

CSS Code

.item-view #feed-view {
    width: 100%;
    float: none;
}

Find:

CSS Code

#sidebar-container {
    position: relative;
    float: right;
    width: $(sidebar.width);
    box-sizing: border-box;
    padding: 0;
}

Replace it with:

CSS Code

#sidebar-container {
    display: none;
}

Step 5: Save & Test

1. Click Save Theme in Blogger.
2. Open your website on mobile, tablet, and desktop to check if the pages are full-width.

Final Result

After completing all five steps, your Blogger website pages will be full width on all devices, just like a WordPress site. The sidebar will be removed and your content will stretch across the entire screen with a clean and professional layout.

Wrapping Up

Making your Blogger theme full width is one of the most effective ways to give your blog a modern and professional look. By following the five steps in this guide, you have changed the container width, updated the CSS, and removed the sidebar so your content now fills the entire screen on any device.

If the exact CSS class names in your theme are slightly different, use your browser's Inspect tool to find the correct selector and apply the same width changes described here. The logic is the same for any Blogger theme.

If this guide helped you, feel free to share it with other Blogger users. Leave a comment below if you have any questions or run into any issues during the process.