Full Width on Blogger Website

image Source: flaticon.com

Blogger.com Theme full width just like in WordPress, without showing the slider. 100% working for any Blogger Theme.

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

This comprehensive guide will walk you through the process of converting your Blogger.com theme into a full-width layout similar to WordPress, without including the slider. This technique is applicable to any Blogger theme and guarantees a modern and professional appearance for your site. By following these straightforward instructions, you'll learn how to change the container width, tweak the CSS for a full-width view, eliminate the sidebar, and make sure your content stretches across the entire screen. Whether you're new to Blogger or have experience, this tutorial will assist you in creating a sleek, full-width design that is responsive on all devices. Save time and improve your blog's look with this foolproof solution!

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

✅ Your Blogger website pages will now be full width on all devices, just like WordPress.
✅ The sidebar is removed to ensure full-screen content display.