Custom CSS style stripped - Forum | JoomShaper
Solved Helix Framework

Custom CSS style stripped

Asked by Mike Lawson 3 years ago Last activity 3 years ago

I have added a basic border bottom CSS style in my Custom CSS template settings, however the styling is completely stripped out in tablet or mobile view. Sample URL: http://avalon.temp.domains/~tristar/component/sppagebuilder/page/15

(login in hidden content)

The menu bar on the right labeled (Service Links) has the bottom border under each link item...but when you look at it in tablet or mobile view, the borders disappear. When I inspect it in Dev Tools the style is being applied as ```

@media (min-width: 1400px)
.navborderbottom {
    border-bottom: 1px solid #d2d2d2;
    width: 85%;

So for some reason it's automatically applying the @media screen condition to the CSS...any idea why it's doing this? Thanks

Accepted answer

Marked as the solution
Ofi Khan Staff
3 years ago

Yes, you can add CSS without media query. Actually, you have to check on which CSS it works the best. It is upto you and needs to be customized. Sorry, we do not provide customization support.

11 more replies

Oldest first Newest first Most helpful
Ofi Khan Staff
3 years ago

Hello Mike Lawson

This CSS is most probably coming from addon settings. I need to check to verify. Please share your administrator access. Use the Hidden Content box to share the credentials. Make sure that you have a full site backup with you before sharing.

Best regards

Mike Lawson Asked this
3 years ago

Hello. The CSS class was created in the template Custom CSS settings, and being applied in SPPB.

I have added your admin access in the hidden content. Thanks

Ofi Khan Staff
3 years ago

I have changed the CSS. Applied this

@media(min-width:320px){
  .navborderbottom{
    border-bottom: 1px solid #D2D2D2; 
    width: 85%;
  }
}
Mike Lawson Asked this
3 years ago

Applied it where??? Im not seeing the changes in my custom CSS. Ive already tried applying that anyways...doesnt work. Why is the template automatically applying Media queries to the CSS anyways?? sounds like a bug.

Ofi Khan Staff
3 years ago

I have changed the CSS to Template Options -> Custom Code -> Custom CSS. The issue was in your Custom CSS. It is not a bug.

Mike Lawson Asked this
3 years ago

The CSS code you provided was NOT in the Custom CSS as you mentioned. Regardless, I applied the code myself and it's still not working.

The CSS is being stripped in tablet and mobile view, but works fine in Desktop view.

When I inspect the element it's now showing this

@media (min-width: 1400px)
@media (min-width: 320px)
.navborderbottom {
    border-bottom: 1px solid #D2D2D2;
    width: 85%;
}

As you can see it's still forcing the min-width:1400px media query even if I try to add 320px. Again I ask you...why is it automatically applying the media query to my custom CSS?

Mike Lawson Asked this
3 years ago · edited

Ok, I see you added the @media queries and cleaned up the CSS and it's working now. But my question remains..why is it forcing me to add the min-width media query with my custom CSS? Why cant I just add the CSS without the media query and have it function on all screen sizes?

Mike Lawson Asked this
3 years ago

Hello, any update on this? Thanks

Mike Lawson Asked this
3 years ago

Ok thank you

Log in to reply.