Keep Hero Image in Fluid Layout w/ everything else in Fixed Layout.

  • You guys and or girls at GoDaddy did a great job with this theme. I have a start up company and I am in the funding phase of my business; so I don’t want to spend to much time working on my website. I do have a minor quandary however…

    When I go through the process of customizing the theme, there is the option of changing the site layout between fixed and fluid. I could go either way: The fluid option makes the hero image wide enough to touch both edges of the screen; while the fixed option keeps the four widgets neatly centred at the bottom of the screen.

    And there is lies my problem. I want the benefits of both. I don’t mind the, frankly, outdated aspect ratio of the fixed screen layout, but the hero image is cut off instead of scaling appropriately. If I chose the fluid option, the widgets are pushed to the far corners of the screen.

    Could someone help me? Is this going to require CSS? It seems like this issue should be fixed from the beginning. I would prefer to keep the layout fixed, while widening the hero image to 100%. I do not, however, want the hero image to get taller.

    Also, and this is completely optional, but if there is a way to turn the hero image into a fixed background image, that would be great! Here is an example of what I am looking for: https://codetheweb.blog/demo/full-image-hero/

    Anyway, Kind Regards

    Lilli

    • This topic was modified 1 year, 3 months ago by ldemiurge.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter ldemiurge

    (@ldemiurge)

    I fixed it… I think.

    header#masthead {
    padding: 20px;
    }

    .footer-widget-area {
    margin-top: 50px;
    }

    .hero {
    background-position: center center;
    margin-bottom: 50px;
    }

    .hero {
    width: 100%;
    height: 280px;
    max-width: 1000rem;
    }

    .hero .hero-inner {
    width: 100%;
    display: inline-block;
    padding: 5% 50px;
    }

    Hi @ldemiurge,

    Thanks for reaching out!

    Yup, it would require custom CSS, and it seems like you managed to do it on your own pretty nicely!

    To make the hero background fixed, you can just add:

    .hero{
background-attachment:fixed;
}
    Thread Starter ldemiurge

    (@ldemiurge)

    @gdalex Thank you, so much! It looks beautiful.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Keep Hero Image in Fluid Layout w/ everything else in Fixed Layout.’ is closed to new replies.