Docs

[Amanda P]

Hello,

I’m not entirely sure what is happening here… I’m helping out on a client’s website to create some custom styling.

So I set up a child theme because we want some custom css and also some custom blog-post formats.

But something very odd is happening… when I activate child theme, it is using an OLD version of css styles I input into styles.css
I’ve changed the styles.css file, saved and it still brings up these old styles.

However, when I activate regular x-theme (not child), it goes back to no styling.

I’ve tried:
– deactivating plugins to check for conflicts – cannot find any conflicts
– deleting and re-uploading both x-theme & child-theme via FTP – cannot find a solution
– clearing browser cache – does not work
– installing wp cache plugin – does not work

Any ideas what might be happening here?
I will post login details below.

Thank you.

[Amanda P]

This reply has been marked as private.

[Rad]

Hi Amanda,

Thanks for writing in and it appears your site’s styling okay. The child theme is active and I don’t see any issue. Would you mind providing a screen recording of the issue?

Thanks!

[Amanda P]

Hi!

Thanks for the quick reply. Please see this video:
https://youtu.be/q6rHMiHQXhI
And I type you some messages in the video as it moves along.

I just don’t even know where to look for the issue on this one…

Thanks!

[Christopher]

Hi there,

You should remove or update following code :

@media (min-width: 769px) {
     .x-topbar .p-info {
        font-size:17px;
        font-weight: bold;}
}
}

To :

@media (max-width: 769px) {
     .x-topbar .p-info {
        font-size:17px;
        font-weight: bold;}
}
}

Hope it helps.

[Amanda P]

Hi,

Thanks for the css tip. I realized I forgot to change that back.

However, the fix still didn’t fix the underlying issue.

Basically what I’ve done is i’m using Child theme but have to enter all css styles in through customizer. Seems to be working.

[Rue Nel]

Hello There,

The @media block should always be at the bottom of all other custom css to prevent it from being overridden by other css. In your case, the css code should be:

/* Home Page */
.x-promo-content{
  padding:0 !important;
}

.x-subscribe-form-7741 .submit{
  border:2px solid #fff !important;
  box-shadow:none !important;
}

/* Blog Posts */
article .entry-content a{
  color:#a64c9c !important;
  font-weight:bold !important;
}

/*Top bar */
@media (max-width: 769px) {
  .x-topbar .p-info {
    font-size:17px;
    font-weight: bold;
  }
}

And if still doesn’t work, you can always force the style by using the child theme selector like:

/*Top bar */
@media (max-width: 769px) {
  .x-child-theme-active .x-topbar .p-info {
    font-size:17px;
    font-weight: bold;
  }
}

Hope this helps.

[Author]

Posts