custom coding a inline style in side a visual composer element in css for mobile view

Question

This is the inline style causing the problem... mobileheadingsh1 is the extra class name i added in visual composer and i added the custom code to the visual editor css still didn't work..

  <h1 class="vc_custom_heading mobileheadingsh1" style="font-size: 70px;color: #007a4d;line-height: 20px;text-align: center;font-family:Roboto;font-weight:700;font-style:normal">REUNITING YOU WITH</h1>

This is the inline style that's my site is showing but it clutters it together on mobile view. its in a visual composer element custom header...

inline style   {
    font-size: 70px;
    color: #007a4d;
    line-height: 20px;
    text-align: center;
    font-family: Roboto;
    font-weight: 700;
    font-style: normal;
}

This is the code im trying to show on mobile view.

    @media only screen and (max-width: 500px) {
.h1 {
    font-size: 35px;
    color: #007a4d;
    line-height: 20px;
    text-align: center;
    font-family: Roboto;
    font-weight: 700;
    font-style: normal;
}

thanks for answer but that doesn't work either. im adding the code to visual composer in the back end of a wordpress site — Dutchess Dad, Aug 09 '17 at 01:38

score 0 · Accepted Answer · answered Aug 09 '17 at 01:14

I see two typos in your css.

One is front dot of .h1, remove it so it's h1 instead, h1 is not a class.

Second you are missing a closing bracket for h1 tag, not sure if you are just missing it here or not.

@media only screen and (max-width: 500px) {
    h1 {
        font-size: 35px;
        color: #007a4d;
        line-height: 20px;
        text-align: center;
        font-family: Roboto;
        font-weight: 700;
        font-style: normal;
    }
}

Now because you have inline styles, that will have a higher priority over your custom css, are you able to remove that? and then instead of inline style, set css for h1 tag.

h1 {
  font-size: 70px;
  color: #007a4d;
  line-height: 20px;
  text-align: center;
  font-family: Roboto;
  font-weight: 700;
  font-style: normal;
}

@media only screen and (max-width: 500px) {
  h1 {
      font-size: 35px;
      color: #007a4d;
      line-height: 20px;
      text-align: center;
      font-family: Roboto;
      font-weight: 700;
      font-style: normal;
  }
}

  <h1 class="vc_custom_heading mobileheadingsh1">REUNITING YOU WITH</h1>

Last but not least, remember to remove your browser cache after these changes

custom coding a inline style in side a visual composer element in css for mobile view

1 Answers1