Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive header image with left margin is cutting off

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #277025
    ThinBlueFlame
    Participant

    I am clearly missing something simple. I have an otherwise responsive image in the header (a big, wide image). I want to offset the image by some amount, say 50px, from the left. When I do that, the image itself starts getting cut off as the browser is resized. Help is very much appreciated.

    HTML:

    <header>
         <img id="header-huge" alt="actual alt" src="images/header/header-huge.png">
    </header>
    

    CSS:

    #header-huge {
         max-width: 100%;
         height: auto;
         margin-left: 50px; /* <-- This left indent causes issues. */
    }
    
    #277027
    chris_2080
    Participant

    Put the image in a container and set the margin.
    for example
    https://codepen.io/chris3000/pen/pxzPVM

    #277038
    ThinBlueFlame
    Participant

    Thank you, Chris. That makes sense, but I was hoping to avoid having to add extra markup. Cheers!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.