Okay
  Public Ticket #3702110
How to make the Boxed Layout width SKINNIER?
Closed

Comments

  •  2
    aruback started the conversation

    I am working on a new website & using the Boxed Layout for the 1st time.

    URL > http://tab.doubledownserver.com/

    Is it possible to make the width of the content area SKINNIER? 

    Right now the width seems to be about 1400 pixels. I am wanting to slim it down to 830 pixels so it fits my top logo/header width. Is this possible?

    The layout/header that I am trying to replicate using the Salient theme is this one > https://briansetzer.com/home/

    Any help would be greatly appreciated to accomplish this!

    Thanks in advance,

    Adam

    Attached files:  SS_2.jpg
      SS_1.jpg

  •  1,919
    Judith replied

    Hello Adam,

    Thanks for writing to us.

    To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:

    From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:

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

    Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help. 


  •  2
    aruback replied

    Thanks for the reply! 

    Is it possible to make the content area 830 pixels wide so there is no padding on the left & right of the logo? 

    Or adjust the custom CSS so there is no padding on the left & right of the logo? 

    I am also trying to remove the padding on the top of the logo as I am trying to replicate this website/header > https://briansetzer.com/home/

    When I try & adjust the 'width: 41%' below to a larger/smaller % it is not accomplishing this.

    Thanks in advance,

    Adam

  •  8,938
    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, #boxed #header-outer, #boxed #slide-out-widget-area-bg.fullscreen, #boxed #featured, body[data-footer-reveal="1"] #boxed #footer-outer, #boxed .orbit > div, #boxed #featured article, body.ascend #boxed #search-outer {
            max-width: 830px !important;
            min-width: 830px !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  •  2
    aruback replied

    URL > http://tab.doubledownserver.com/

    After inserting the CSS you provided, the content width is now 830 pixels as I wanted. Thank you!

    Can you send me some additional CSS so that the logo doesn't have any padding on the top & left & fits in the top header area without padding? I am trying to replicate this website/header > https://briansetzer.com/home/

    In the Salient settings I have the Header Padding set to 0px.

    Thanks in advance,

    Adam

    Attached files:  SS4.jpg
      SS3.jpg

  •  8,938
    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) {
        body #boxed #header-outer .container {
            width:100% !important;
            margin-top: 0px !important;
        }
        body #boxed #header-outer .container #logo {
            margin-top: 0px !important;
        }
    }

    Thanks


    ThemeNectar Support Team