Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 9, 2018 at 3:00 pm #895259
    opvab

    Hi.

    Is there a CSS-way to change size on the av-section-color-overlay, by using color mode and not an image.
    I want it the same size as my Maximum Container width (1310px) and not the full width of the color section.

    Thanks,
    OPVAB

    January 10, 2018 at 12:52 am #895452
    Jordan Shannon

    Hey opvab,

    Please provide a link to site page in question? Also, please provide a screenshot so that I can see exactly what you are trying to achieve?

    Best regards,
    Jordan Shannon

    January 10, 2018 at 12:38 pm #895633
    opvab

    Hi.
    You’ll find url & printscreen in PC.
    I have on the section #meny:
    – Color section with one full screen stretch bg image
    – Section Overlay bg, #FFFFFF 0.5
    – Column layer elements.

    Dont’t want any bg color on Column elements, but instead let the Section overlay color stretch to my site maximum container width.

    Thanks,
    OPVAB

    January 10, 2018 at 2:48 pm #895680
    opvab

    Hi.

    This works if your are on a 1920 screen and don’t care about responsive:
    .av-section-color-overlay {
    max-width: 1310px;
    position: relative;
    }
    div .av-section-color-overlay {
    top: 0;
    left: 297px;
    height: 100%;
    width: 100%;
    }
    But realy need a css that wraps the overlay accordingly the container.

    /
    OPVAB

    January 14, 2018 at 12:50 pm #897067
    Nikko

    Hi,

    Try adding this css code:

    #top #meny .av-section-color-overlay {
    left: 0;
    min-width: 100%;
}

    Let us know if this helps :)

    Best regards,
    Nikko

    January 14, 2018 at 3:30 pm #897100
    opvab

    Hi.
    min-width: 100% is going to stretch the color-overlay full width.
    I want the color-overlay to act like main container, such as:
    .responsive .container {
    max-width: 1310px;
    }

    /
    OPVAB

    January 14, 2018 at 7:18 pm #897139
    Nikko

    Hi,

    Try using this css code instead:

    #top #meny .av-section-color-overlay {
    left: 50%;
    margin-left: -655px !important;
    max-width: 1310px !important;
    min-width: 0 !important;
}

    Hope this helps :)

    Best regards,
    Nikko

    January 14, 2018 at 8:26 pm #897168
    opvab

    Hi and thanks for all the effort.
    Your CSS works superfine for 1920px wide screen, but when watching with differtent screen resolution or on Ipad,
    the color-overlay no longer follow the container.

    I don’t know if it is possible for the color-overlay to be responsive and always centered as the .container
    who probably pick up responsive code from bootstrap framework, but it would be great if it could be solved.

    Thanks,
    OPVAB

    January 15, 2018 at 4:15 am #897335
    Nikko

    Hi,

    Try adding this css code after the code I gave:

    @media only screen and (max-width:1310px) {
  #top #meny .av-section-color-overlay {
    left: 0;
    margin-left: 0 !important;
  }
}

    Hope this helps. :)

    Best regards,
    Nikko

    January 15, 2018 at 9:32 am #897436
    opvab

    Nikko,
    I works now like a charm, you did my site. Thanks a lot.

    Cheers,
    OPVAB

    January 15, 2018 at 9:37 am #897440
    Nikko

    Hi OPVAB,

    Glad to hear that. Thanks for using Enfold :)

    Best regards,
    Nikko

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