Pretty Pictures | Adjust Text alignment in header image

Community Forums Forums Design Tips and Tricks Pretty Pictures | Adjust Text alignment in header image

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  SoZo 1 year, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #17501

    davidthayer
    Participant
    Post count: 1

    I’m putting a site together for our wedding and have a great picture for the header, but want to adjust the title and widget alignment. Does anyone know where I can add padding (or something) to move the video off my fiance’s face? ;)

    *ps – I haven’t loaded the actual video. I’m not really going to use the surfing vid that’s there now.

    http://www.kayceeanddave.com/

    Thanks!!

    #17504

    SoZo
    Moderator
    Post count: 1573

    That is currently set here

    [code].author-box div,
    .hentry,
    .navigation,
    #comments,
    #footer .wrap,
    #header .wrap,
    #nav,
    #respond {
    padding: 8% 20%;
    overflow: hidden;
    width: 60%;
    }[/code]
    But editing that will effect all of those divs so you can add a new rule targeting only the #header .wrap, e.g.

    #header .wrap { padding: 8% 25%; }

    Or you could add a left margin/padding to #header .widget-area if you only wanted to effect the video and not the title.

    It’s still going to move around in different sized browsers though so you can’t always guarantee you won’t be covering something up. YOu can see what happens by reducing the width of your browser.

    You could keep it centered by adding a fixed width and auto left/right margins to #header .widget-area


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #17661

    davidthayer
    Participant
    Post count: 1

    Thanks John! I went with the #header .wrap padding and it did the trick. It certainly breaks on mobile devices, but it’ll look good for 90% of visits.

    If anyone else is looking to do the same: in style.css,

    [code]#header .wrap {
    padding: 4% 25%;
    }[/code]

    That will set the padding to 4% for top and bottom and 25% for left and right.

    #17693

    SoZo
    Moderator
    Post count: 1573

    You’re welcome :)


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Pretty Pictures | Adjust Text alignment in header image’ is closed to new replies.