CSS HELP!

charlzmorris · Member · Jun 14, 2015 at 2:19 pm
Copy link

Add topic to favorites
Hi,
I’ve just started using a new theme.
I wanted to make the width of all of the content narrower.
I’ve managed to make the width of the containers smaller, but now the main content has a huge margin of some kind on the left.
The sidebar is where I want it, but if I increase the main width it will be knocked off the page.
How can I get rid of this left margin and get the content to move right, closer to the container edge?

The code I have used so far is:
```
.container_body, .site
{ width: 950px; border:0px; }

  #main, #primary
{ float: left;
	width: 550px !important }

  #sidebar
{ float: left; width: 200px }
```
The blog I need help with is: (visible only to logged in users)
charlzmorris · Member · Jun 14, 2015 at 2:19 pm
Copy link
My website is: http://www.charliederry.com
charlzmorris · Member · Jun 14, 2015 at 3:54 pm
Copy link
This only happens on posts/my front page. ‘Pages’ are fine, so I can’t move margins to the left because then it ruins the pages.

I think it’s because I’ve removed the meta data which is usually in this space on the left to the post?
staff-totoro · Staff · Jun 18, 2015 at 12:41 am
Copy link
Hi @charliederry

It is possible to target just posts (excluding everything else) but the one thing that will be difficult is in showing the post date. Moving the body copy to the left will cause it to collide with the post date, and there is not much you can do to avoid it.

The only solution I can think of is to hide the post dates altogether, but I have to admit, I kinda like those. I also don’t object to the whitespace that you have now with the heavy padding on the left. If anything, I think it keeps the line-length for your blog posts comfortably short (like a paperback) which makes them a lot easier to read.

So that’s my $.02 but if you want to increase the width and hide the post dates, I can help with that. :)

Cheers!
charlzmorris · Member · Jun 18, 2015 at 10:29 am
Copy link
Thanks Jerry,
Yeah I brought the date back and kept the width of everything wide so I’ll just keep it as it is now.
Thanks anyway!
staff-totoro · Staff · Jun 18, 2015 at 4:22 pm
Copy link
Cool, I have to say that overall I think you have a great looking site. Keep up the good work! :)
ehtis · Staff · Jun 18, 2015 at 4:25 pm
Copy link
I’d like to add a few of my findings. You can move the date below the post title, and then shift everything towards the left.

Got the idea from this similar thread.

This code will shift the date below the post title:
```
@media screen and (min-width: 1180px)
.entry-meta {
  position: relative;
  text-align: left;
}
```
Now your blog has a custom layout so I couldn’t verify how exactly it will display there, but testing on my Chrome I saw some positive results using this code:
```
@media screen and (min-width: 1180px)
.blog .without-featured-image > .entry-header, .single .without-featured-image > .entry-header, .archive .without-featured-image > .entry-header, .search .without-featured-image > .entry-header {
  margin-left: -18px;
}

@media screen and (min-width: 1180px)
.entry-meta {
  position: relative;
  left: -164px;
  text-align: left;
  width: 170px;
  margin-top: -20px;
}

@media screen and (min-width: 1180px)
.entry-summary, .entry-content {
  min-height: 4em;
  margin-left: -164px;
}
```
This should shift the content towards the left of the container on desktop screen size (min. 1180 pixels width). I believe mobile screen size already displays the content just fine, with date below the post title.

You can edit the different margins if the alignment is not correct.

The topic ‘CSS HELP!’ is closed to new replies.

WordPress.com forums

CSS HELP!