Okay
  Public Ticket #2879694
Boxed Layout for ultra wide screens
Closed

Comments

  •  1
    John started the conversation

    I wondering if it is possible to enable a Boxed Layout on a website (https://hopeful-fermat.212-48-69-126.plesk.page), but only for ultra wide screens?

    A bit like the Audi website does - https://www.audi.co.uk/

    So once a row set to Full Width Background stretches so far it goes to a boxed version. 

    Or alternatively can I tweak the Extended Responsive Design settings to do something similar?

    Regards

    John

  •  8,844
    Tahir replied

    Hey Again,

    The only way to make this work is to use the Boxed Layout Feature in the Salient Theme Options Panel and enable it for Ultra Wide Screens only. 

    Thanks 


    ThemeNectar Support Team 

  •  1
    John replied

    OK, I know how to enable the Boxed Layout Feature - but how do I set it to only work on Ultra Wide Screens - is it an option or does it require CSS?

    Regards

    John

  •  8,844
    Tahir replied

    This will require Custom CSS, let us know the page url with the Boxed Layout active so we can write it up for you.

    Thanks 


    ThemeNectar Support Team 

  •  1
    John replied

    Much appreciated - here's the website - https://hopeful-fermat.212-48-69-126.plesk.page

    Regards

    John

  •  8,844
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    /* remove boxed above 1000px */
    @media only screen and (min-width: 1000px) {
        #boxed {
            width: 100% !important;
            max-width: 100% !important;
        }
    }
    /* set width and max-width above 1825px */
    @media only screen and (min-width: 1825px) {
        #boxed {
            width: 90% !important;
            max-width: 1600px !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  •  1
    John replied

    Thanks that's kind of worked, but I think there are issues with the menu and row content having additional padding - https://hopeful-fermat.212-48-69-126.plesk.page

    Regards

  •  1,878
    Judith replied

    Hi John,

    Please share screenshots to highlight the padding you are referring to.

    Thanks.

  •  1
    John replied

    Attached a screen shot - on scroll the header menu has a left justified black box around it and some of the content rows have a padding on the left and right handside - I've checked the margins/padding on the actual row and it looks ok. 

  •  1,878
    Judith replied

    Hi John,

    Please try this css:

    .wpb_row .row-bg-wrap .row-bg-overlay {
        left: -13px;
        width: 1591px;
    }

    Thanks.

  •  1
    John replied

    Thanks I added that CSS code and it didn't really seem to make much of a difference. 

    Also the menu looks to be behaving in boxed mode when it's under ultra wide resolution - so isn't full width and is left justified. 

    Regards

  •  8,844
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (min-width: 1000px) {
        #boxed .full-width-content.blog-fullwidth-wrap, #boxed .wpb_row.full-width-content, #boxed .page-submenu > .full-width-section, #boxed .page-submenu .full-width-content, #boxed .full-width-content.nectar-shop-outer, body #boxed .full-width-section .row-bg-wrap, body #boxed .full-width-section .nectar-parallax-scene, body #boxed .full-width-section > .nectar-shape-divider-wrap, body #boxed .full-width-section > .video-color-overlay, body[data-aie="zoom-out"] #boxed .first-section .row-bg-wrap, body[data-aie="long-zoom-out"] #boxed .first-section .row-bg-wrap, body[data-aie="zoom-out"] #boxed .top-level.full-width-section .row-bg-wrap, body[data-aie="long-zoom-out"] #boxed .top-level.full-width-section .row-bg-wrap, body #boxed .full-width-section.parallax_section .row-bg-wrap, #boxed .nectar-slider-wrap[data-full-width="true"], #boxed .wpb_row.full-width-section .templatera_shortcode > .wpb_row.full-width-section > .row-bg-wrap, #boxed .portfolio-filters-inline.full-width-section:not(.non-fw), .single-product #boxed .product[data-gallery-style="left_thumb_sticky"][data-gallery-variant="fullwidth"] .single-product-wrap {
            margin-left: -7%;
            width: 115%;
            left: 0;
        }
        #boxed #header-outer {
            width: 100% !important;
            max-width: 1600px !important;
        }
    }

    Thanks


    ThemeNectar Support Team