Blogging Blogger (BlogSpot) Tips How To Make Blogger Blog Full Width (100% Working)

How To Make Blogger Blog Full Width (100% Working)

-

There are a lot of custom templates available for Blogger that provide a wide range of customization, but what most of them lack is an edge to edge full-screen view.

As illustrated in the above image, most of the custom templates available for Blogger do not cover the full-screen width in the homepage, posts and pages.

Thus, many bloggers find it difficult to make their Blogger/Blogspot blog full width in order to make it cover the entire screen and provide an attractive edge to edge viewing experience.

Unlike WordPress where almost everything can be changed and controlled using plugins, Blogger is mostly DIY (Do It Yourself) based, and thus, we need to manually change the source code of the template to get our desired changes.

In this article, I will show you a simple process by which you can make any Blogger template full width (edge to edge display) on any display, no matter how large the screen is.    

Note: This tutorial is not for the Header.

Quick Fix Method

This method doesn’t work on all the templates. If it doesn’t work for you, skip to the next section where the full tutorial for making blogger template full width is given.

Go to Blogger –> Theme –> Edit HTML and copy the full code using CTRL+C.

Open Notepad and paste the code.

Press CTRL+F and search for “.row” (without quotes)

make blogger template full width quick method

You will then find the line where the width of the row is defined. Replace the width value of the row with 100%, i.e. .row{width:100%}

make row width 100% blogger full width quick method

Now copy the whole code from Notepad with CTRL+A and CTRL+C.

Go to the Blogger HTML editor and press CTRL+A to select the whole code and press DEL to delete it.

Now press CTRL+V to paste the new code. Now hit the SAVE button.

Your Blogger blog has now become full width! Congrats!

But what if this method doesn’t work for you? Well then your template doesn’t support the row variable, and in that case, please follow the full guide given below. 👇 👇

STEPS TO MAKE BLOGGER BLOG FULL WIDTH

0. Take A Backup Of The Source Code (Very Important)

Go to Blogger –> Theme –> Edit HTML.
Select the whole source code using CTRL + A, copy it using CTRL + C, paste it in Notepad and save it on the desktop.

This step is very important because if you accidentally follow the steps incorrectly, this backup file will help you to restore your blog to the previous form.  

1. Head over to your website/blog

Open Google Chrome or any other browser that supports the Developers Tools function. Then go to your website/blog.  

2. Inspect Size of the elements

Make Blogger Full Width: Inspect Element

Once your website is fully loaded, press the F12 key from your keyboard and the ‘inspect elements‘ box will appear at the right-hand side of the screen as shown in the image.

Click on the button shown in the image above and hover your mouse over the content of your blog which you want to make full width, as shown below.

Inspect max-width

Now you will be able to see max-width of your blog. Our aim is to change it to auto mode so that it fits edge to edge (full width) on any screen on which it is viewed.


Either remember or note down the current max-width value somewhere.

3. Make Changes To The Widths in The Source Code

Go to Blogger.com and click on Theme from the left bar and then click on Edit HTML, as shown below.

Edit HTML in Blogger

[IMPORTANT] PLEASE MAKE SURE THAT YOU TAKE A BACKUP OF THE SOURCE CODE AS SHOWN ABOVE, BEFORE PROCEEDING TO TWEAK IT.

Once the Edit HTML page has loaded, press CTRL + F to bring up the search box.

Search For The Width Variable In The Source Code

Search for the #outer-wrapper max-width value (in my case it is 1200) that you just inspected. Press Enter to see the search results.

Please note that in your template the variable name (max-width) might be different, but it will be somewhat similar, meaningful and recognizable.

Editing HTML Blog Max Width in Blogger



Now you’ll have to make two changes, as you can see in the #outer-wrapper, there are two widths defined: max-width and width. Change both the values to auto as shown below. This will make your main blog content stretch up to the edge.

Inspect The Main Wrapper Width

Now again go to your site and refresh the page.

Next, inspect the width of the Content (#main-wrapper).

Inspect Main Wrapper



Remember the width (location shown by the arrow in the image) of the wrapper.

Edit The Main Wrapper Width

Go back to Blogger –> Edit HTML.

Now, search for the width value that you just inspected (in my case it is 800).

Change Main Wrapper Size

Replace the width value with 70%, and after the semicolon, add- padding-right:30px;

It would then look like : width:70%;padding-right:30px

Do not make any other changes in that line.

Inspect The Width Of The Sidebar

Again use inspect element to know the current width of the sidebar.

Edit Sidebar Width In Blogger


In my case, as it can be seen from the screenshot, the width is 300px.

Remember the value.

Edit Sidebar Width In Source Code

Again, go to Blogger –> Edit HTML.

Search for the sidebar width (300px in my case) which you inspected just now, from the source code in Edit HTML.

Search Width

Replace the width value with 27% and remove float: right (if present)

It would then look like width:27%;

Do not make any other changes on that line.

Finally, click on Save changes.

Refresh your blog and verify that if it has become full width or not.


Also Checkout – My handpicked list of the best magazine templates for blogger.

Hope this tutorial has helped you and you could make your blog full width successfully.

If not, please recheck that you followed all the above steps properly.

Open the backup text file from the desktop that you made in Step 0, select all the code, copy it and paste it in the HTML editor and click on Save changes.

Your blog will be restored to the previous format. Now, please follow all the steps again, more carefully.

If still, any problem persists, feel free to comment down your problem, and I will help you fix it, as soon as possible.

Done! Congratulations!

You’ve successfully made your blogger blog full width and now your blog will be displayed edge to edge (100% full width) on any screen, no matter how large or small it is.

Issue Still Not Fixed?

I understand it’s a bit confusing task to do, especially finding out the correct line of code where the change has to be made.

So, if you fail to fix it yourself even after many attempts, you can email me at [email protected] with the HTML source code of your Blogger template, which you can obtain from Themes -> EDIT HTML.

I will fix your code and make your Blogger template full width for free, and e-mail you back the correct code. 🙂

Also check out: How to make Progressive Web App (PWA) for Blogger

If this article has helped you, kindly let me know in the comments below, and also don’t forget to share this article on your favourite social media site, because you know, Sharing is Caring! : )

Tired of slow indexing of your blog posts by Google? Check Out: How To Get Your Blog Posts Indexed By Google Instantly [2 Minutes]


You might also like: How to Correctly Setup Cloudflare Free CDN for Blogger + Features Review

Anirban Roy
Anirban Roy is the founder of TechRBun. He is a Computer Geek. He likes to share his knowledge about PC, Mobiles and Blogging. He studies in class XII and when he is not studying, he can always be found tweaking his PC or surfing the web on his mobile phone. He loves music and literature too!

14 COMMENTS

  1. not worked for me bro please can i add you admin to set it for me. i will give you backlinks on my 2 posts

    My blog shows good on desktop but on mobile devices its width is so small (thin) please help me email bongoexclusive[at]hotmail[dot]com

  2. Thank you so much dude! I was looking for this tutorial since a long time and finally I found this one and this actually works! Now my blog fits full width on big screens and small screens as well and it looks amazing!

  3. Please i try locating outer-wrapper max-width on my blog edit html and is not showing please i will need your help and also, how to drive more traffic to my blog thank you. https://www[dot]ugbesman[dot]com[dot]ng

    • Hi! I will surely try my best to help you out. I will e-mail you. You will have to invite me to your blog and I can fix that for you. ☺️
      Either reach out to me on Instagram @heyanirban or send me an email at [email protected] and I will help you out regarding your blog’s width.

      To get more traffic, promote your articles on quora. Answer related questions and leave a link to you website at the end. This method works great. Also, if you use a keyword research tool, simply write articles on keywords that have low competition. I would recommend not to depend entirely on keyword research tools as they are pretty inaccurate. Simply Google for stuff related to your niche. If you feel like the articles that are ranking are missing some info or are irrelevant, waste no time and write an article and submit it to google search console. Your article will surely rank high and bring in a lot of traffic if it’s of good quality. If you’re targeting a global audience, I would recommend you to use .com domain instead of .com.ng.

      I have also noticed that you are writing posts on a lot of topics and that too saturated and are on very competitive niches.

      I would strongly recommend you to check out the 8 Dangerous Blogging Mistakes That Beginners Must Avoid [Motivation] article on this site. So that you don’t waste your time doing stuffs that are not worth it.

      You may also check out Google questions hub. It suggests you topics to write articles on that people are looking for but not getting a satisfactory result.

      I will soon publish and in-depth article on how to grow blog traffic. I will notify you when I publish it. ?

      • Thank you, Anirban

        For the blog readers: I contacted Anirban via E-mail and gave him my HTML code. He edited it and made my blog full width. Now it looks great!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

You might also likeRELATED
Recommended to you