Moving Home Page Banner

• 

  debrambecker · Member · Aug 3, 2015 at 4:28 pm

  • Copy link
  • Add topic to favorites

  The normal placement of text on my homepage banner is not readable over my photo. I wanted to change the color and opacity, move it down and right justify. I experimented with CSS and ended up using this code:

  #home-banner #banner-text .secondary p { font-weight: bold; color: #663399; font-size: 30px; font-style: italic; opacity: .6; text-align: right; margin-top: 400px; margin-left: 625px; }

  It does not look the same way on the preview as it does on my laptop, which has a 17″ screen. I concerned that it will not display uniformly on different screen sizes. Just using the text-align: right code didn’t right justify. And as far as moving the text down, same issue.

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

• 

  ehtis · Staff · Aug 3, 2015 at 6:12 pm

  • Copy link

  This would stick the secondary header to bottom-right on all screen sizes. Changed to absolute positioning to achieve this:

  #home-banner #banner-text .secondary p {
    font-weight: 700;
    color: #639;
    font-size: 30px;
    font-style: italic;
    opacity: .6;
    position: absolute;
    right: 5px;
    bottom: 0;
  }

  Adjust the values as required! :)

• 

  debrambecker · Member · Aug 3, 2015 at 6:31 pm

  • Copy link

  Thanks very much! Your advice worked like a charm!