Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 1, 2017 at 3:52 am #740967
    kevinmcgillivray

    I have a client who has a high resolution monitor and has a website with images as backgrounds in 100% height color sections. When they stretch the window to be the height of their monitor, these sections stretch to the point that the photo backgrounds look wrong. Is there a way to put a max height on the 100% height sections and still have the content in the sections center top to bottom in the sections?

    Please let me know if this is unclear.

    Thanks!

    February 2, 2017 at 7:55 am #741607
    Rikard

    Hey Kevin,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    February 2, 2017 at 8:19 am #741616
    kevinmcgillivray

    Sure. See private content.

    Thanks!

    February 6, 2017 at 8:33 am #743199
    Nikko

    Hi,

    Can you post a screenshot on how it looks on a high screen resolution monitor, just upload it to http://imgur.com/ and post the link here. For the meantime, you can use this css code and add it to Quick CSS (located in General Styling):

    .avia-section {
  height: 100%;
  max-height: 800px;
}

    This should set the height to 100% but if the height of the screen is beyond 800px then it will not make the height 100% and just limit it to 800px. Hope this helps.

    Best regards,
    Nikko

    February 6, 2017 at 4:11 pm #743434
    kevinmcgillivray

    Please see the image in the attached link. This is after applying the CSS code with a max height of 1080px. The semi transparent content box should be centered vertically over the top picture but it extends into the bottom picture. Any thoughts?

    February 6, 2017 at 9:10 pm #743609
    Nikko

    Hi,

    It contains a top padding and the 800px max-height is short enough for it. Instead of using .avia-section which is global class for sections, try to use the id you have set it in the section for example use #mat instead. Try to remove the code I gave before and add this one instead:

    #mat {
    display: flex;
    align-items: center;
}

    This should only affect the section with an id of mat. Let us know if this helps :)

    Regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.