I am using this code to hide widgets/sidebar from static pages on my blog


#1

my question is, how can i make the text full width?

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.blog-pager, .footer, .post-footer, .sidebar-container, .feed-links, .sidebar { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}
</style>
</b:if>

Here’s the link to my blog Android Tipster


#2

Very simple :wink: use this html instead :smiley:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.blog-pager, .footer, .post-footer, .sidebar-container, .feed-links, .sidebar { display:none !important;}
#main-wrapper {width: 100% !important; float:none; margin: 0 auto !important;}
</style>
</b:if>

You can also center all the text under #main-wrapper by using this

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.blog-pager, .footer, .post-footer, .sidebar-container, .feed-links, .sidebar { display:none !important;}
#main-wrapper {width: 100% !important;text-align:center; float:none; margin: 0 auto !important;}
</style>
</b:if>

#3

@Nafees dude you’re awesome! It worked and my blog looks much better now. Thank you.

On a side note, would you know how i can increase the width of a blog post towards the outside?


#4

Thanx Brother! :wink: What do you mean by towards the outside do you want to increase the width of a post on home page? Please clarify me :smiley:


#5

This is what i mean man, see the image below


#6

Oh Alberts! Are you using my template? Its pleasure of me.

Firstly, your blog’s header is not looking right. So, for fixing it, search for this CSS:

#header h1 a, #header h1 a:visited {
  font-family: godofwar;
  color: #fff;
  font-weight: 700;
  font-size: 40px;
  margin-top: 10px!important;
}

Now, replace it with this one:

#header h1 a, #header h1 a:visited {
  font-family: godofwar;
  color: #fff;
  font-weight: 700;
  font-size: 33px;
  margin-top: 10px!important;
}

Now, search for this CSS:

.subscribe-content {
  margin-top: 27px;
  font-size: 12px;
  color: #FFF;
  text-align: justify;
  text-shadow: 0px 0px 1px #818181;
  font-family: -webkit-body;
}

And replace it with this:

.subscribe-content {
  margin-top: 27px;
  font-size: 15px;
  color: #FFF;
  text-align: justify;
  text-shadow: 0px 0px 1px #818181;
  font-family: -webkit-body;
}

It will solve the empty space in subscribe box.

Again, search for this CSS:

.subscribe-box {
  box-shadow: 2px 2px 2px 2px #000;
  padding: 30px;
  background: #000;
  height: 480px!important;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

and replace it with:

.subscribe-box {
  box-shadow: 2px 2px 2px 2px #000;
  padding: 30px;
  background: #000;
  height: 446px!important;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

It will solve extra space below subscribe box.

And now, your problem. You can’t do this in seconds because if you have to do that, you will need to increase/adjust widget/margin of header, breadcrumb, main-wrapper, sidebar-wrapper and some others which is not a easy work. I will do it for you on sunday. :smile:


#7

@Shivansh I appreciate your assistance, will be waiting for those solutions.

Stay blessed


#8

Thanks. :smile: Please wait for sunday…


#9

Yes and also You have to change the same for the media queries (That’s a pain in neck)