Custom CSS Style Stripped
Mike Lawson
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
Ofi Khan
Accepted AnswerYes, 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.
Ofi Khan
Accepted AnswerHello 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
Accepted AnswerHello. 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
Accepted AnswerI have changed the CSS. Applied this
@media(min-width:320px){
.navborderbottom{
border-bottom: 1px solid #D2D2D2;
width: 85%;
}
}Mike Lawson
Accepted AnswerApplied 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
Accepted AnswerI 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
Accepted AnswerThe 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?
Ofi Khan
Accepted AnswerIt is not automatically added. It is coming from your Custom Code -> Custom CSS section.
I have fixed the Custom CSS. Please check now.
Mike Lawson
Accepted AnswerOk, 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?