CSS Overrride doesn’t work

  • Resolved jsnowbusiness

    (@jsnowbusiness)


    1 year, 8 months ago

    When viewing my page on mobile, 1/2 width columns stack and there is a margin between them. Checking the CSS reveals this code putting a 1.5rem margin above the second column:

      @media only screen and (max-width: 767px)
.su-row .su-column + .su-column {
  margin: 1.5rem 0 0;
}

    I edited the code in browser after inspecting it and everything looked good. Copied it and Pasted it into Shortcodes Ultimate General Setting and it didn’t work…

    So then I decided to try a bunch of different variations to override it in Shortcodes Ultimate General Settings with all these different codes (not all at once) but nothing works, caching plugin is turned off.

    @media only screen and (max-width: 767px)
.su-row .su-column + .su-column {
  margin-top: 0px;
}
@media only screen and (max-width: 767px)
.su-row .su-column + .su-column {
  margin-top: 0px !important;
}
  @media only screen and (max-width: 767px)
.su-row .su-column + .su-column {
  margin: 0 0 0;
}
  @media only screen and (max-width: 767px)
.su-row .su-column + .su-column {
  margin: 0 0 0 !important;
}
  @media only screen and (max-width: 767px)
.su-row .su-column + .su-column {
  margin: 0px 0px 0px;
}
  @media only screen and (max-width: 767px)
.su-row .su-column + .su-column {
  margin: 0px 0px 0px !important;
}
@media only screen and (max-width: 767px)
.su-row .su-column + .su-column {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
@media only screen and (max-width: 767px)
.su-row .su-column + .su-column {
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px!important;
}

    Nothing works. I’ve also tried adding it to Additional CSS in Customize, plus using a plugin for CSS… and I also added it inline on the post. Nothing works. I’ve never had this issue with altering/overriding CSS on anything else ever before.

    What’s up with SU’s responsive coding taking precedence over everything else?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter jsnowbusiness

    (@jsnowbusiness)

    Wasn’t even a reply, so I’m not sure why topic was marked “resolved”… I’ve changed it back.

    Plugin Author Vova

    (@gn_themes)

    Hi @jsnowbusiness,

    I’m marking topics as resolved if they don’t receive answer after 2 weeks.

    As for your original question, there’s missing curly brackets in your code. Media queries should also have a set of brackets. See an example below:

    @media only screen and (max-width: 767px) {
  .su-row .su-column + .su-column {
    margin-top: 0px;
  }
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS Overrride doesn’t work’ is closed to new replies.