Padding and margin changes won't stick

  • poweroftwo2

    (@poweroftwo2)


    12 years, 12 months ago

    I am trying to adjust padding and margins on various aspects of my site (header, widgets, text elements, etc). When i am viewing the site (not in the dashboard), I r-click on an element and choose “Inspect Element” I make sure I have the correct element (by the fact that it highlights in the screen as i hover over the code) and I select that line in the code. On the right hand side i see a number of options including padding and margins. I uncheck margin-top, change it from 40px to 10px and recheck the item. I see the change on my screen.
    Then i either close my screen or go back to my dashboard. When i come back, the change has been reverted. Am I doing something wrong? Is there some way i should be saving those changes so they stick?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 12 months ago

    Sorry, Google Chrome’s developer tools (any many other developer tools) only work temporarily. They’re there to test out stuff on the browser, for easier and quicker development. You’re supposed to then implement them through the files themselves.

    Sounds like you’ll need to make either a Child Theme or use a Custom CSS plugin for your CSS changes.

    Thread Starter poweroftwo2

    (@poweroftwo2)

    12 years, 12 months ago

    Good to know. How do i get to the files themselves. I looked for margin codes in Appearence/Menu/Header and it wasn’t there.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 12 months ago

    You ought to be creating new styles instead of modifying existing styles (no need to look for margin codes).

    For example, look at this padding-top style (on the right) http://snag.gy/uHvpN.jpg

    To override that, you’d create a new style:

    .threadauthor {
 padding-top: 0;
}

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 12 months ago

    Do you have a Child Theme or Custom CSS plugin?

    Thread Starter poweroftwo2

    (@poweroftwo2)

    12 years, 12 months ago

    Downloading Custom CDD plugin. Will play with it. Thx

    Thread Starter poweroftwo2

    (@poweroftwo2)

    12 years, 12 months ago

    ok, really basic question. i have been looking around and understand what i need to write to add padding. But i don’t know how to apply it to the header.
    I have entered the code below in My Custom CSS, but nothing happens

    header {
    padding-top: 15px
    padding-bottom: 15px
    }

    When inspect the element on the webpage i get
    <header id=”header”>

    I know i’m missing something pretty basic

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 12 months ago

    We can’t tell without a link to the webpage in question.

    Thread Starter poweroftwo2

    (@poweroftwo2)

    12 years, 12 months ago

    the webpage link is http://www.responsibleprescriber.com/wp/
    I also realized that as “header” is an id, i needed to add a # in front of it, so i changed it to

    #header {
    padding-top: 15px;
    padding-bottom: 15px;
    }

    Still no result. thx

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Padding and margin changes won't stick’ is closed to new replies.