Increasing the Size of the Main Content Area with CSS in the Writr theme

• 

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

  • Copy link
  • Add topic to favorites

  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.

  Thanks in advance!

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

• 

  thesacredpath · Member · Apr 24, 2015 at 5:07 pm

  • Copy link

  Hi there, Nice job of digging into CSS. It can be a lot of fun!

  I’m noticing a few things in your CSS that should probably be adjusted or changed. First off, it is typically better not to set widths greater than 100% since that can put content outside of parent divs. It is better to look at parent divs and CSS the element is in and find the one with the width setting and widen that. For .site-branding you have a width of 120%, and on smaller screens where your site shifts to a single column design, this is what I’m seeing at 959px and narrower: https://cldup.com/d0FizOWo9C.png.

  I think we can work with most of what you have now and just limit things to widths 960px and greater and let the design fall back to the original for smaller screens.

  I’m working on that right now, but it is going to take a little time to get it all sorted and tested. I just wanted to let you know you haven’t been ignored. :)

• 

  rars22 · Member · Apr 27, 2015 at 9:30 pm

  • Copy link

  THANK YOU!

  Basically, I did a trial and error method to figure out the CSS and the applied changes. So, I can imagine that there is a better way to accomplish the visual changes that I want.

  The site – as it looks on a regular computer screen is how I want it to look, minus the fact that the main content area isn’t large enough.

  So – if you can figure out the exact correct code for me to have everything look like it does on a regular computer screen and have a larger content area per my request, then I’d be ecstatic to copy and paste it into my CSS editor.

  I know it is probably a lot of work but I can’t afford any more time to keep messing with the CSS and changing things back to 100% and then figuring out the right way to accomplish what I want. So, if you are willing to help then I’d really appreciate it. I just don’t want things to go back to how they were or look even worse – which is what would happen if i just moved the percentages back to 100%.

  Thanks for your efforts and help! I don’t know what i’d do without ya.

  -Robin

• 

  thesacredpath · Member · Apr 28, 2015 at 8:52 pm

  • Copy link

  Due to the way that Writr adjusts for wider screens, to do this where things expanded smoothly would be a whole lot of CSS work. Give this a try. At 1420px and wider screens/windows, it will give you an extra 200px of width.

  @media only screen and (min-width:1420px){
  	#page{
  		width:1400px
  	}
  
  	#page:before{
  		width:1000px
  	}
  
  	.content-area{
  		width:1000px
  	}
  
  	.entry-thumbnail{
  		width:1000px
  	}
  
  	.entry-attachment .attachment{
  		width:1000px
  	}
  
  	.video-wrapper .video-player{
  		max-width:920px
  	}
  	.entry-thumbnail {
  		background: #fff;
  	}
  	.entry-thumbnail img {
  		box-shadow: none;
  	}
  }

• 

  rars22 · Member · May 22, 2015 at 9:22 pm

  • Copy link

  Can you help me with this please:

  https://en.forums.wordpress.com/topic/sela-theme-modifications-with-css-and-nowscreen-viewing-trouble?replies=3

  Thanks!!