Force CSS changes to go live right away

• 

  humayun21 · Member · Oct 3, 2017 at 1:51 am

  • Copy link
  • Add topic to favorites

  Hi everyone!

  Thanks in advance for all the help you provide via this forum – it’s very useful! I’ve gotten a prior question answered, and it helped a lot.

  I’m trying to modify my site’s CSS. To do so, I go to the theme customizer, and then paste CSS into the custom CSS box. However, when I do this, changes don’t register to my site. Specifically, I wanted to add this code to my site:

  @media only screen and (min-width: 800px)
  #page .content-area {

  margin-left: 0%;
  padding-right: 2.0%;
  padding-left: 17.0%;
  }

  .column {
  float: right;
  }

  I added this to the CSS and saved the sheet, but when I next checked the customizer, this is what was saved in it:

  @media only screen and (min-width: 800px)
  #page .content-area {

  }

  .column {
  float: right;
  }

  In other words, the margin and padding info. was missing, and I could see no changes to the site.

  I’m trying to get the site to look like this: https://imgur.com/a/jEdH7

  I can do it by modifying the style sheet on Chrome, but not the actual style sheet in WordPress.

  Does anyone know why this is occurring? Is it just slow to load? Will it show up in a few hours? Thanks in advance!

  The blog I need help with is: (visible only to logged in users)

• 

  garysixtyeight · Member · Oct 3, 2017 at 2:26 am

  • Copy link

  Hi there,

  There’s a set of brackets missing from the CSS media query you used.

  Please try replacing the CSS with this:

  @media only screen and (min-width: 800px) {
    #page .content-area {
      margin-left: 0%;
      padding-right: 2.0%;
      padding-left: 17.0%;
    }
  
    .column {
      float: right;
    }
  }

• 

  thesacredpath · Member · Oct 3, 2017 at 2:52 am

  • Copy link

  In the code above, you have a blank line between
  #page .content-area {
  and
  margin-left: 0%;
  That causes a syntax error and the rule will be stripped out. Also, you do not have the media query syntax right. The Media query has to have opening and closing curly brackets around the CSS rule(s) inside. This is what things should look like.

  @media only screen and (min-width: 800px) {
  #page .content-area {
  margin-left: 0%;
  padding-right: 2.0%;
  padding-left: 17.0%;
  }
  }
  
  .column {
  float: right;
  }

• 

  humayun21 · Member · Oct 3, 2017 at 5:34 am

  • Copy link

  Thank you so much, both! This helped immeasurably.

• 

  thesacredpath · Member · Oct 3, 2017 at 6:22 am

  • Copy link

  You are welcome.