• Resolved keepgoingtravelblog

    (@keepgoingtravelblog)


    Hello,

    I’m trying through different additional CSS to have my front page really full width with no space on left and right. I can’t touch “width:100%” cause it’s needed for responsiveness and playing with “max-width” value gives me different scenarios of blank margins, grey margins or both of different widths, I can’t obtain what I really want: no margins at all in logo and bosy space, real full width.

    I got two different scenarios right now:

    Scenario 1: I got two blank margins on both left and right where just the reapeted pattern background is shown with front page image in the middle if I use the following CSS:

    body.custom-background .main-wrapper {
    background-color: transparent;
    }
    body.custom-background {
    border: 20px solid #fff;
    background-attachment: scroll !important;
    }
    body.custom-background .main-wrapper {
    box-shadow: none;
    }
    .single-post #content {
    width: 100%;
    }
    body.custom-background .main-wrapper {

    margin-left:0px;
    margin-right:0px;
    max-width:1700px;
    width:100%;

    }
    .container
    {

    max-width:1500px;
    width:100%;
    }
    .logo
    {
    margin-left:0px;
    margin-right:0px;
    max-width:1500px;
    width:100%
    }

    Scheenshot at the followng URL:
    https://keepgoingtravelblog.com/WITHBLANKMARGINS.jpg

    Scenario 2: I succeed to remove the left blank space but I got a grey shadow in the right of the image and some other blank space on the right when I use the following CSS :

    body.custom-background .main-wrapper {
    background-color: transparent;
    }

    body.custom-background {
    border: 20px solid #fff;
    background-attachment: scroll !important;
    }
    body.custom-background .main-wrapper {
    box-shadow: none;
    }

    .single-post #content {
    width: 100%;
    }

    body.custom-background .main-wrapper {

    margin-left:0px;
    margin-right:0px;
    max-width:2200px;
    width:100%;

    }

    .container
    {

    max-width:2200px;
    width:100%;
    }
    .logo
    {
    margin-left:0px;
    margin-right:0px;
    max-width:2200px;
    width:100%
    }

    Scheenshot at the followng URL:
    https://keepgoingtravelblog.com/WITHGREYSHADOW.jpg

    Your help would be really appreciated.

    Thanks,

    Silvio

Viewing 11 replies - 1 through 11 (of 11 total)
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘REMOVING FRONTPAGE GREY BAR OR BLANK MARGINS’ is closed to new replies.