Anyone know how to left align the content in the Swell theme's Blog?

• 

  laurapalmerwp · Member · Jan 2, 2015 at 3:34 pm

  • Copy link
  • Add topic to favorites

  Apparently, this will cause problems with the mobile version – but I’d like to give it a go. I have had a play using the Inspect Element on my browser but with varying degrees of success! I have managed to align left the post images and the description under those images – but otherwise, things were going a bit mad!

  Essentially, I’d like to align the content left like it is in my Contact Us and What we do sections.

  http://palmerowen.wordpress.com/learn-about/
  http://palmerowen.wordpress.com/about/

  Anyone help?

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

• 

  thesacredpath · Member · Jan 3, 2015 at 5:57 pm

  • Copy link

  Hi, I’m seeing the text within your post content on the blog page left aligned. The featured image section and post meta/title are not left aligned. Is that what you are wanting left aligned? If so, try the following which sets the entry header area to the same maximum width as the content and sets left alignment for everything.

  .entry-header {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
  }
  h2.entry-title, h2.entry-title a {
      text-align: left;
  }

• 

  laurapalmerwp · Member · Jan 4, 2015 at 2:45 pm

  • Copy link

  Hi, thanks for your help on this.

  I have added that css – and its kinda worked! However, the large image at the top on each page are now set to presumably that max width of 800px too. I’d like those images to span the size of the screen as they were. Also the date, author and comments are indented, where I’d like them left aligned without a margin.

  Can they be fixed with that new css in place?

• 

  thesacredpath · Member · Jan 6, 2015 at 6:31 pm

  • Copy link

  Hmmm, I didn’t look close enough. Remove this from your custom CSS

  .entry-header {
      margin-left: auto;
      margin-right: auto;
      max-width: 800px;
      text-align: left;
  }

  and then add this

  .#main header.main .meta, #main header.main .meta p, #main .entry-title, #main header.has-background .meta {
      text-align: left;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
  }
  .date-author .posted-on {
      margin-left: 0;
  }

• 

  thesacredpath · Member · Jan 6, 2015 at 6:33 pm

  • Copy link

  Oh, and add this to, to get rid of the short line since it looks entirely strange left aligned and is very difficult to position centered below the title.

  #main header hr.short {
      display: none;
  }

• 

  laurapalmerwp · Member · Jan 7, 2015 at 3:11 pm

  • Copy link

  Ok, have added it all – which has fixed the large images at the top site-wdie – but centred all other text content on the blog! Apart from each post title and content that is, which remain aligned left!

• 

  thesacredpath · Member · Jan 9, 2015 at 5:33 pm

  • Copy link

  I’m getting a little lost here. :)

  Add this to left align the titles, categories and date/author on your blog page.

  .blog .entry-header, .blog .meta {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
  }

  The above does not affect the single post pages (after you click on a post title).

• 

  laurapalmerwp · Member · Jan 10, 2015 at 11:03 am

  • Copy link

  Me too! Its worked however – thanks!

• 

  thesacredpath · Member · Jan 10, 2015 at 6:41 pm

  • Copy link

  Well then, we both managed to work through the confusion. Please let us know if you have additional questions or problems. Your site is looking Awesome!

• 

  laurapalmerwp · Member · Jan 10, 2015 at 7:55 pm

  • Copy link

  Oh thanks very much!

• 

  thesacredpath · Member · Jan 14, 2015 at 7:22 pm

  • Copy link

  You are welcome. :)