Global CSS Issue Fixter Template
Matt
Hello I am having some trouble with the CSS on my site. One example would be globally enlarging the font size of any <p> text when viewed in mobile. I tried the following CSS:
@media (max-width: 768px) { body, p { font-size: 16px !important; } }
When placed in the custom.css file, or the Helix Template Global Custom CSS area, I get no change. It only works when placed directly in SPPB > Page> Section > Custom CSS area - but of course I cant do that continuously.
I have also had other issues with CSS in the custom.css file just not showing and I have had to place that code elsewhere. The problem being my css is scattered all over the place and I would prefer it centralized in the custom.css file.
Is it possible the custom.css file is not loading last? Am I missing something?
Thanks!
Matt
Ziaul Kabir
Accepted AnswerHello Matt,
Thanks for reaching out.
The CSS you added should normally work from the custom.css file or the Helix Global Custom CSS area. In many cases, when styles only work inside the SP Page Builder section CSS, it means that other styles (often generated by SP Page Builder or the template) are loading later and overriding the global CSS.
Please try the following steps:
- Clear the Joomla cache and your browser cache.
- Make sure the custom.css file is located in the correct template folder and is being loaded.
- Temporarily disable CSS/JS optimization or compression if enabled and test again.
If the issue still persists, please share your site URL so we can inspect how the CSS files are loading and identify what might be overriding the styles.
Best regards.
Matt
Accepted AnswerThanks Ziaul, I checked it out and custom.css is loading but is then being overwritten by template.css. I found this thread and the second post was the solution. https://www.joomshaper.com/forum/question/16804?order=newest
Thanks!
Matt