Okay
  Public Ticket #994535
Boxed Layout Padding
Closed

Comments

  •  2
    Riall started the conversation

    Hello,

    I would like to limit my site to be 1440 px wide, centered in the browser window. I've almost got the look I want but have hit a wall. I've set the site to a boxed layout. I need to remove the padding on each side so that I hit 1440 px. Here's a link to the design. I've set the bkg to light yellow to show the padding: 

    Padding Screenshot

    I have tried countless things before submitting a ticket. Here's a couple of css snippets I've tried:

    #boxed {
            margin: auto !important;
            width: 1440px !important;
            min-width: 100% !important;
            position: relative;
            padding: 0% !important;   
            z-index: 10000;
            background-color: #f5f5f5;      
            box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
    }

    #boxed, #boxed #header-outer, #boxed #header-secondary-outer, #boxed #slide-out-widget-area-bg.fullscreen, #boxed #page-header-bg[data-parallax="1"], #boxed #featured, body[data-footer-reveal="1"] #boxed #footer-outer, #boxed .orbit > div, #boxed #featured article, .ascend #boxed #search-outer {
        width: 1440px !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: auto !important;
        padding: 0% !important;
    }

    Neither approach works. The site is no longer centered. It becomes left-aligned.

    I really apprecaite your assistance with this.

    Thanks,

    Riall

  •  8,996
    Tahir replied

    Hey Riall,
    The site is already at a max point of 1400px as per the css and centered :

    Could you provide your site url so we can have a look ?. 
    Thanks 



    ThemeNectar Support Team 

  •  2
    Riall replied

    Thanks Tahir. Unfortunately, I am using localhost. I have attached my .css files from the "themes/salient" folder. Not sure if that helps, but thought I'd attach anyways.

    Using Developer Tools, I have looked everywhere for the max-width: 1400px!important setting. No matching searches.

    A few questions:

    1. Which .css file controls the site width? I have looked everywhere for the code you red-boxed.
    2. Is there any reason why I can't  increase the site to 1440px and remove the 90% width setting?


    Thanks,

    Riall

  •  8,996
    Tahir replied

    Hey Again,

    It can be overriden with this css ,Your css was not working because you hadnt put the media query in it . 

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (min-width: 1000px) {
        #boxed, #boxed #header-outer, #boxed #header-secondary-outer, #boxed #slide-out-widget-area-bg.fullscreen, #boxed #page-header-bg[data-parallax="1"], #boxed #featured, body[data-footer-reveal="1"] #boxed #footer-outer, #boxed .orbit > div, #boxed #featured article, .ascend #boxed #search-outer {
            max-width: 1440px!important;
            width: 100%!important;
            min-width: 980px;
        }
    }

    Thanks



    ThemeNectar Support Team