Sela text overlapping picture

• 

  growstrongreaders · Member · Jun 27, 2016 at 2:24 pm

  • Copy link
  • Add topic to favorites

  I’m using the Sela theme, and on the main page, there is a large picture with a text box through the middle. I would like to move the text box to a different position so that it does not cover part of the picture. If possible, I would like the text box and picture side by side, not overlapping. I am brand new to this, so please give me very specific directions. :) Thank you!

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

• 

  thesacredpath · Member · Jun 28, 2016 at 7:41 am

  • Copy link

  Hi there, to do this, you would need the WordPress.com Premium Plan or WordPress.com Business plan upgrade, which includes Custom CSS.

  You can try out and preview custom CSS before you buy as explained here. This would be the CSS you would need.

  @media screen and (min-width: 768px) {
  .home .hero img {
      width: 45%;
  }
  .home .hero .hentry {
      float: right;
      width: 45%;
  }
  }

  I’ve limited this to 768px and wider screens since that is when the white box content moves down below the image on Sela.

• 

  geelongskillsandjobscentre · Member · Jun 29, 2016 at 1:57 am

  • Copy link

  Hi, I’m also using the Sela theme, and am having trouble with the title overlapping the featured image on blog posts.
  Here is my site:
  http://www.thegordonskillsandjobscentre.com
  I’m wondering if you would be able to help out with a code for this? I have a premium plan.
  Thanks!

• 

  thesacredpath · Member · Jun 29, 2016 at 5:13 am

  • Copy link

  @, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS

  .single .entry-header {
      margin-top: 0;
  }

• 

  geelongskillsandjobscentre · Member · Jun 29, 2016 at 5:25 am

  • Copy link

  That’s so good. Thanks so much for this.

  It seems to have worked for the individual blog posts, but not for the blog roll page. Is there something else I could put in for this?

  Thanks again. Much appreciated.

• 

  thesacredpath · Member · Jun 29, 2016 at 6:13 am

  • Copy link

  Change what I had given above to the following.

  .single .entry-header, .blog .entry-header {
      margin-top: 0 !important;
  }

• 

  geelongskillsandjobscentre · Member · Jun 29, 2016 at 6:45 am

  • Copy link

  Thanks again. That’s worked perfectly!

  Appreciate the assistance.

• 

  thesacredpath · Member · Jun 29, 2016 at 6:54 am

  • Copy link

  Hooray and you are welcome!