Footer Background Colour CSS Missing - Only On Custom Post Types (Viewport Mobile)

[DannyC]

Hi,

I’ve got a weird bug where my CSS gradient background isn’t showing on mobile, but only when viewing my Case Studies custom post type.

For the case studies page, I used some code from your forums to hide the sidebar and make the content full width (this may be the issue) but until you guys offer more layout options for custom post types, I’m stuck with this hack-y approach.

I’ve attached 2 screen-shots, could you take a look?

Here is a case study page - https://befairmarketing.co/case-study/celebrating-disability/

I’m using a gradient CSS in the theme options CSS and adding the class to the footer “.gradient-footer-global”

This works fine on all other screen sizes and pages. Very odd.

I’ve added credentials in a private note, so you can take a look.

Thanks

Dan

[rad]

Hi Danny,

Thanks for reaching out.

It looks like there is unclosed @media in your CSS, may I know to which location you added the CSS related to .case-stats-number ?

@media (min-width:768px){
.case-stats-number{
    min-height:80px;
}
.flexmethod{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-line-pack:stretch;
    align-content:stretch;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.x-container:before{
    content:normal;
}
@media (max-width:766px) {
....
...
..
.

As you can see, you started another @media without closing the first, it should like this

@media (min-width:768px){ /* this is the opening */

.case-stats-number{
    min-height:80px;
}
.flexmethod{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-line-pack:stretch;
    align-content:stretch;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.x-container:before{
    content:normal;
}

} /* this is the closing for @media (min-width:768px)  */

@media (max-width:766px) {
....
...
..
.

Any CSS added below it now becomes part of it, hence, it will only take affect on tablet and above (eg. @media (min-width:768px) ).

I found another issue in Theme Options > CSS, this time, it has extra closing bracket. Please remove it

Hope this helps.

[DannyC]

@Rad

.case-stats-number

Hi There,

Thanks for getting back to me.

The .case-stats-number is part of the element CSS for the animated numbers on the case study pages. Example here https://befairmarketing.co/case-study/celebrating-disability/

That would make a lot of sense if that wasn’t closed off.

I added this CSS to the section.

@media (min-width: 768px) {

.case-stats-number {
min-height: 80px;
}

And then added .case-stats-number to each of the text as a class (see conversion rate, new users, session duration etc)

I did this because the boxes and text weren’t displaying right in different screen sizes.

I’ve added the extra R Brace } and it all appears to be displaying correctly now

I’ve removed the extra closing bracket in the main CSS, thanks.

I’ve tried to keep everything in the main CSS of the theme, so not quite sure why I added that to the element there. It’s not as scalable. Do you think it would be best to add the CSS class and media query to the main CSS and remove it from the section element?

Thanks

Dan

[ruenel]

Hello Dan,

Adding an inline element css to a section is only applicable if that css will only work for that section. If you want to re use the code in other sections as well, then it would be good that you add it to the Editor’s custom css or in the theme option’s global css instead.

Hope this helps.

[DannyC]

Hi,

Yep, thanks for that.

I had the CSS saved in the template for that section.

I’ve moved it to the main CSS now and kept the class references in the template (saved as a template so that they are associated)

Thanks for your help with this.

Dan

[Prasant]

You are most welcome.