Positioning an image above our featured slider

• 

  vanguardhq · Member · Apr 27, 2016 at 8:54 am

  • Copy link
  • Add topic to favorites

  Hi

  Please can you suggest the CSS I need to move an image on our home page from below the featured slider to above the featured slider?

  I am trying this in our test site, which is here: https://01handshake01.wordpress.com/. Our site uses the Portfolio theme.

  I have tagged the image id=”testing”

  Many thanks
  Sarah

• 

  thesacredpath · Member · Apr 27, 2016 at 10:02 pm

  • Copy link

  Hi Sarah, which image are you wanting to put above the slider? On responsive designed themes, the can be challenging due to the fact that we have to use position: absolute; in order to do that which means the element loses its relationship to the other page elements and basically float above everything else.

• 

  vanguardhq · Member · Apr 28, 2016 at 8:50 am

  • Copy link

  Hi, thanks for getting in touch.

  The image that I’d like to put above the slider is the red circle that says ‘Join Vanguard’. It’s a rectangular image with a transparent background and a red circle in the middle of it.

  Sarah

• 

  thesacredpath · Member · Apr 28, 2016 at 5:46 pm

  • Copy link

  Thanks. This is a challenge. Add the following and make sure and view things in tablets and phones and see what you think.

  .page-template-homepage-php #featured {
    padding-top: 30%;
  }
  .page-template-homepage-php #container {
    position: relative;
  }
  .page-template-homepage-php section.main-content {
    max-width: 860px;
    position: absolute;
    top: 200px;
    width: 90%;
  }
  @media screen and (max-width: 600px) {
  	.page-template-homepage-php section.main-content {
  		top: 250px;
  	}
  }

  With the way the HTML and CSS are structured, it is challenging to keep this right in the center. There are some CSS3 things we could use, but unfortunately IE is way behind the curve on supporting them, as in only their latest version.