Unable To Override Bootstrap.min.css
Orlando Browne
Hi Im using helix ultimate. I have used the developer tools in edge to analyse an alignment issue on the website www.quericasalsa.nl I have identified in "Bootstrap.min.css" the css setting that can fix the issue as being :
@media (min-width: 1400px) .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1320px; }
So I copied this code to my custom.css file (which loads LATER than the bootstrap.min.css). So i can change it as follows:
@media (min-width: 1400px) .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1130px; }
Somehow the code does not overwrite. What am i doing wrong?
Pavel
Accepted AnswerHi Orlando. You just made a mistake in the code.
Your code in custom.css is
@media (min-width: 1400px)
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1130px !important;
}But should be
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1130px !important;
}
}Tip: if something does not work in cusstom.css always look for your mistake instead of editing the template files.
In particular, if the code contains media query, this is not possible to correctly copy the code from the inspector. You should check and edit it after copying
Mehtaz Afsana Borsha
Accepted AnswerHi,
Thanks for contacting us. Could you please give me a screenshot of your issue? I need to check.
-Regards.
Orlando Browne
Accepted AnswerHi, thanks for answering... here are two images (with comments included) that illustrate the issue:
https://quericasalsa.nl/images/qrs_images/QRS_align_wrong.jpg https://quericasalsa.nl/images/qrs_images/QRS_align_correct.jpg
So to clearify.... The header outlining should get narrower and align with the first menu-item below
Paul Frankowski
Accepted AnswerIf I may...
Now seems to be OK, I checked on Firefox, fresh / no cached view.
All overrides should be done inside: /templates/shaper_helixultimate/css/custom.css file.
sometimes you can use !important value if you want to force style.
Orlando Browne
Accepted AnswerHi Paul, Sure you may ;-).
Yes it is ok now, but not corrected the way it should. I did manage to crorrect the issue, but only by editing "Bootstrap.min.css" itself. The issue is that:
- I have used "custom.css" to overide.... >>> That did not work
- Also Idid use the code "!important" >>> That also did not help to override.. That was my frustration after which i just corrected the issue in a "quick" and definitively DIRTY way...
You say: "All overrides should be done inside: /templates/shaper_helixultimate/css/custom.css file" I assume that is t same file you encounter when navigating in Joomla to ..... A) > extentions > templates > templates ... B) select the corresponding template, C) > CSS folder > select "Custom.css" Right?
Paul Frankowski
Accepted AnswerAbout Custom CSS all is explaned in Helix Documenation https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/custom-code-css-js-meta
If you edit boostrap.min.css you have to remember about it after next template update etc. so this is not recommended method.
Paul Frankowski
Accepted AnswerThanks @Pavel. I totally agree with you.
My tip #2
Use CSS Validator https://jigsaw.w3.org/css-validator/ from time to time for your custom.css to make sure that you don't have other small mistakes.