Full Width Containers in Limited Width Parents

  • Author
    Posts
  • #116437

    chrisrowlands
    Member
    Original poster

    Is it possible to use CSS with Puzzle to have an image wider than the parent container?

    I’d like the article container to be a fixed width, but the first image to stretch across the screen.

    An exact example is explained here but the CSS doesn’t seem to work with Puzzle.

    I’ve spent a few hours trying but to no avail. Any help is much appreciated!

    The blog I need help with is: moderntraveller.net

    #116604

    binarymoon
    Theme Author

    Hi there – hopefully this will do what you want.

    .full-width {
        display: block;
        width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
        left: 50%;
        right: 50%;
        position: relative;
    }
    
    .full-width img {
        width: 100%;
    }

    You should then add the full-width class (eg class=”full-width”) to any html elements you want to be full width. You will need to do this in the html editor.

    #116684

    chrisrowlands
    Member
    Original poster

    Hi,

    Thanks for your response!

    I’m afraid this still doesn’t seem to work; the image will only seem to display as wider than the width of the article if its position is set as absolute, which obviously causes the layout to go wrong – any suggestions?

    Thakns
    Chris

    #116707

    binarymoon
    Theme Author

    You don’t need to use absolute positioning to make the image full width. The code I gave you should be applied to an image container (which I didn’t mention).

    If you just add the class to the image then the you would need to add max-width: 100vw to the full-width styles making it this:

    .full-width {
        display: block;
        width: 100vw;
        max-width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
        left: 50%;
        right: 50%;
        position: relative;
    }
    #116712

    chrisrowlands
    Member
    Original poster

    Ah, wonderful! Thanks so much for your help – that’s worked a treat.

    Cheers,
    Chris

The topic ‘Full Width Containers in Limited Width Parents’ is closed to new replies.