Remove White Left/Right Margin

  • Author
    Posts
  • #2804565

    kmp5268
    Member

    I need help removing the left and right white margins from my website. It is a one-page website with multiple panels. This website works well with mobile devices. The main issue is viewing the website margin-free on a 21.5″ Apple iMac.

    The website is http://www.naturallifehr.com

    The blog I need help with is naturallifehr.com.

    #2804719

    Hello

    If you have the premium or business level account, I can help you edit the CSS code to make the margins black instead of white, which will blend in a bit better to your images.

    Please add the following code to your custom CSS editor. You can read about how to do that at https://en.support.wordpress.com/custom-design/editing-css/

    .site {
        max-width: 100%;
    }
    
    .pique-panel-background {
        background-size: cover;
    }
    
    .site-footer{
    max-width:100%
    }

    Hope this helps!

    #2804747

    kmp5268
    Member

    Hello melindahelt,

    That would, indeed, make the white margins much less conspicuous. Thank you for the code.

    However, I am still seeking to allow panel featured images to extend edge-to-edge of the native screen size of whatever device the visitor is using.

    Any suggestions are appreciated. Thank you.

    #2804748

    Actually…

    I misspoke above :)

    I was initially going to give you the code to make the borders black, but then I worked out the code to extend the images, as you suggested. But, I didn’t clearly explain that. I’m sorry!

    So, the code above should make the images edge to edge.

    Give that a try and let me know how it works.

    #2804750

    kmp5268
    Member

    melindahelt,

    The code immediately worked when I entered it into the CSS editor. However, once I saved and published it, it reverts back to the white margins again and when I go in to fix it in the CSS editor, the code is still there. If I delete and re-enter the code, it works again and then when I go to save and publish it, it reverts back.

    It almost seems as if another code built-in to the Pique theme is overriding the code you gave me. It is, indeed, a valid code because I witnessed the entire page extend to my iMac’s native screen size, but, like I mentioned above, the code remains but the effect is not manifesting itself.

    Any other suggestions? Thank you.

    #2804751

    Hmm…

    Try adding !important to each CSS declaration. That should force an override from any existing style.

    .site {
        max-width: 100% !important;
    }
    
    .pique-panel-background {
        background-size: cover !important;
    }
    
    .site-footer{
    max-width:100% !important;
    }

    Let me know if that works for you.

    #2804752

    kmp5268
    Member

    Hello melindahelt,

    The same thing occurs when using the revised code. I’m not sure what could be the cause. Like always, any suggestions are greatly appreciated.

    If you need any more information on my end, please let me know. Thank you.

    #2804759

    I have the same need and the code works for me but the header image remains on the far left. Any ideas on how to fix that? Everything else looks perfect!

    #2804775

    @timothymarksteward – what’s the link for your site? I can take a look at the header for you.

    @naturallifehr – please double check any custom CSS that you might have related to

    .site{
    max-width:100%;
    }

    On my end, it looks like you might have some extra code in there somehow.

    I am seeing the following, which is creating an error.

    .site{max-width:left 15px 0 100% 100%}

    #2804776

    kmp5268
    Member

    Hello melindahelt,

    I removed the existing CSS codes and re-entered the CSS code you created for me. It now works perfectly. Thank you.

    If I ever have additional CSS questions, I will consult with you.

    #2804779

    @naturallifehr Glad you got it working! Let us know if you run into any other issues.

The topic ‘Remove White Left/Right Margin’ is closed to new replies.