Unable To Override Bootstrap.min.css - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Unable To Override Bootstrap.min.css

OB

Orlando Browne

Template 3 years ago

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?

0
8 Answers
Pavel
Pavel
Accepted Answer
3 years ago #85138

Hi 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

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #85093

Hi,

Thanks for contacting us. Could you please give me a screenshot of your issue? I need to check.

-Regards.

0
OB
Orlando Browne
Accepted Answer
3 years ago #85099

Hi, 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

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #85108

If 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.

foto_8816_2022.jpg

0
OB
Orlando Browne
Accepted Answer
3 years ago #85115

Hi 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:

  1. I have used "custom.css" to overide.... >>> That did not work
  2. 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?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #85118

About 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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 years ago #85139

Thanks @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.

0
OB
Orlando Browne
Accepted Answer
3 years ago #85178

Hi Pavel,

Thanks for your answer and correction. That indeed did the trick. Also Paul, thans for the extra tip.

0