Aligning page content

• 

  verenakacinskis · Member · May 27, 2016 at 7:56 pm

  • Copy link
  • Add topic to favorites

  Hi!

  I figured out how to center and decrease de width of the texts on my blog. I didn’t like it when I was using a portfolio template and the width was so large. But what happened is that now the layout doesn’t respond so well on ipads and smartphones.

  I deleted the CSS I was using to change the width of the blog posts but I left the CSS code to the pages of the blog (you can see it in the menu “Sobre”, for example) so you can help me.

  I would really appreciate some help!

  Thanks!

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

• 

  michaelvandenberg · Member · May 28, 2016 at 7:01 am

  • Copy link

  Howdie!

  This is the CSS you’ve added to decrease the width of the page:

  .page-content {
  	margin: auto;
  	width: 900px;
  }

  To prevent text from overflowing you just need to set a max-width, like this:

  .page-content {
  	margin: auto;
  	width: 900px;
  	max-width: 100%;
  }

  I hope this helps!

  Best regards,

  Michael

• 

  verenakacinskis · Member · May 28, 2016 at 4:06 pm

  • Copy link

  Michael, it worked perfectly.

  Thank you, I really appreciate your help!

  Gave a great weekend!

  Verena

• 

  verenakacinskis · Member · Jun 2, 2016 at 7:09 pm

  • Copy link

  I need one more thing… I tried to use the same code for the portfolio page but I’m having a hard time trying to align the portfolio title with the rest of the post.

  Could you help me with that also?

  Thanks!

• 

  siobhyb · Member · Jun 3, 2016 at 11:00 am

  • Copy link

  Hi Verena,

  I can see you’ve added the following custom CSS:

  .single-jetpack-portfolio .content-area p {
      margin: auto;
      width: 900px;
      max-width: 100%;
  }

  I recommend targetting the entire .content-area instead of only the paragraphs. This will include the title:

  .single-jetpack-portfolio .content-area {
      margin: auto;
      width: 900px;
      max-width: 100%;
  }

  In addition, you can add the following to remove the margin that the theme adds to the right of the paragraphs:

  .single-jetpack-portfolio .content-area p {
      margin-right: 0;
  }

  Hope that’s helpful! Please let me know if you have any further questions.

• 

  verenakacinskis · Member · Jun 6, 2016 at 4:39 pm

  • Copy link

  Thank you siobhyb!

  It worked. :)

• 

  siobhyb · Member · Jun 6, 2016 at 6:17 pm

  • Copy link

  I’m glad to hear that, Verena! Feel free to start another thread if any extra questions come up.