Jump to content

Cannot Remove Padding - Works in Chrome Dev Tools but not when applied to site

Recommended Posts


I'm working on a site at http://www.sportscare1.com and I'm trying to remove the padding in the heading area between the three sections.  The very top part of the menu is using the embed section for the social icons, under that is the line with the logon and the buttons and I'm using a container with an image and 2 button sections. The last is a megamenu section.

Using Chrome Dev tools I can decrease the padding by setting the second line of code below to having padding: 0; and this works using Chrome Dev tools but when adding to custom CSS It doesn't display.  I've tried .pl-sn-pad fix and also using the unique section id's as well.  Tried everything but I still can decrease the padding  that is way to much between the sections in the header.

Any assistance would be greatly appreciated

Thank you - chules



.pl-sn-pad {
    padding: 1rem;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    background-size: cover;
    background-position: 50% 50%;
    position: relative;
    z-index: 3;


Share this post

Link to post
Share on other sites

Hi, are you sure you used  .pl-sn-pad.fix not pl-sn-pad fix?

Edited by edgarcheverier (see edit history)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now