Custom css not working on some websites

[Kenza]

Hi There,

I am currently developing/ maintaining 4 different websites that are using the Xtheme with the integrity stack.

I have applied the same css to two of those websites and the css doesn’t seem to be working.

On one website this code doesn’t work:

/*
//Blog posts full width

*/

.single-post .x-container.max.width.offset {
max-width: 100%;
width: 100%;
}

.single-post.x-boxed-layout-active .entry-wrap {
padding: 0;
border: none;
}

.single-post .x-comments-area {
padding-left: 30px;
padding-right: 30px;
}

.single-post .entry-featured {
display:none;
}

On the other website, this code doesn’t work:

/*
// Button
*/

.btn {
text-shadow: none !important;
}

I have checked everything (other settings are similar, there’s no need of any update) but I can’t see why it’s not working.

Kindly,

[thai]

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Many thanks.

[Kenza]

Hi @thai

For the button, I found out that the code changed from .btn to .x-btn

For the blog post being full width:

It’s working on this website:

and not working on this website:

Steply.io - Intuitive and fun to use, digital workflow solution

[nabeel]

Hi again,

Please change your CSS to this:

.x-btn {
     text-shadow: none !important;
}

Or make sure you assign btn class to the elements to make your CSS work.

Hope this helps!

[Kenza]

Hi @Nabeel

I’ve already fixed the button issue but not the blog post being full width. Do you have any guess on how the code changed for this one?

Cheers

[nabeel]

Hey @Kenza,

Thanks for the update. I couldn’t find the blog page or any post on your site http://steply.io/ but i did test the code in one of our demo site and it works fine. If you have child theme active you can add the above code in child theme’s style.css file or you could try this CSS:

.single-post .x-container.max.width.offset {
  max-width: 100% !important;
  width: 100% !important;
}

.single-post.x-boxed-layout-active .entry-wrap {
  padding: 0 !important;
  border: none !important;
}

.single-post .x-comments-area {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.single-post .entry-featured {
  display:none !important;
}

If nothing works then please provide us with the Blog URL so we can take a closer look and provide you the solution accordingly.

Cheers!