Changing Superhero main column and side bar size

• 

  singinkuz · Member · Mar 23, 2015 at 2:53 pm

  • Copy link
  • Add topic to favorites

  Hi, I would really like to increase the width of both the main column and the sidebar of my blog using the superhero theme. My blog is http://www.MusiCampTO.wordpress.com (email visible only to moderators and staff).

  Is this possible.

  If possible I would like to do it ONLY for computer’s screen and not any mobile devices. (The tablet layout is perfect and won’t fit any more).

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 23, 2015 at 9:13 pm

  • Copy link

  Hi, give the following a try. It increases both the content and sidebar widths by 100px. I also included code to widen the FB like and twitter widgets since they do not expand in width like many other widgets.

  @media screen and (min-width: 1160px) {
  	#main {
  		width: 1160px;
  	}
  	#primary {
  		width: 795px;
  	}
  	#secondary {
  		width: 340px;
  	}
  	#facebook-likebox-4 iframe, #twitter_timeline-3 iframe {
  		width: 300px !important;
  	}
  }

• 

  singinkuz · Member · Apr 15, 2015 at 5:13 pm

  • Copy link

  Thanks so much Sacredpath and sorry for my delayed gratitude.

  I finally just had a chance to try it out and the 100 px was a bit too much width. So I played around with the numbers but the problem i had concerns the space between main/content column and sidebar, which was too big and seemed to only get bigger when I lowered the px size. It resulted in a rather unbalanced look. Anyway to keep the space small and centre everything nicely?

  Btw, if you look at the site now, in my Css you can see my last attempt but I used /* */ so it won’t show up on the site itself – it just looks too unprofessional.

  Thanks!

• 

  thesacredpath · Member · Apr 15, 2015 at 10:29 pm

  • Copy link

  Hi, when I add the above code, this is what I see for a gap between the sidebar and the content: https://cldup.com/phm33brQs4.png.

  You can try this instead. I kept the 1160px min-width for the media query, but reduced the main by 100px and the primary and secondary by 50px each.

  @media screen and (min-width: 1160px) {
  	#main {
  		width: 1060px;
  	}
  	#primary {
  		width: 745px;
  	}
  	#secondary {
  		width: 290px;
  	}
  	#facebook-likebox-4 iframe, #twitter_timeline-3 iframe {
  		width: 300px !important;
  	}
  }

• 

  rars22 · Member · Apr 20, 2015 at 8:56 am

  • Copy link

  Hi. Hopefully you can help me as well. I have been trying to accomplish this all day and can’t get it quite right.

  I currently have the Writr theme with the Custom Design upgrade and have made quite a few changes through trial and error. I would really like to widen the content area on all pages, posts, etc. The sidebar is fine – i figured that out myself – finally.

  From playing with widths for the white box content area on the right side of my blog, it seems that 860px is pretty close to perfect. But, when I change the primary content using the following code, it moves the text to the right width but not the content-box and at the bottom of the post, the white box is much smaller. This is the code I have been trying to perfect. It may be the wrong code entirely.

  `@media screen and (min-width: 1160px) {
  #main {
  width: 860px;
  background: 860px;
  align-content: center;
  }
  #primary {
  width: 860px;
  }
  #facebook-likebox-4 iframe, #twitter_timeline-3 iframe {
  width: 300px !important;
  }
  }
  `

  So – I basically want the white content area on every page and post to be wider with just approximately 10px of the background showing on the left and the right to give the appearance of a border. I hope that makes sense.

  I would also like the post identifier (standard, aside, picture, video, etc) to disappear because it seems that it will no longer fit between the main content area and the sidebar without overlapping and i think it might look a bit more professional (like a website) if it isn’t there anyway.

  This is the blog that needs help: http://www.robinspielberger.com

• 

  thesacredpath · Member · Apr 21, 2015 at 1:58 am

  • Copy link

  @rars22, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.

• 

  rars22 · Member · Apr 22, 2015 at 8:53 pm

  • Copy link

  Done.

  https://en.forums.wordpress.com/topic/increasing-the-size-of-the-main-content-area-with-css-in-the-writr-theme?replies=1#post-2358754