Solved Templates

Unable to override bootstrap.min.css

Asked by Orlando Browne 4 years ago Last activity 4 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?

Accepted answer

Marked as the solution
Pavel
4 years ago · edited

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

7 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
4 years ago

Hi,

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

-Regards.

Paul Frankowski Senior Staff
4 years ago

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

Orlando Browne Asked this
4 years ago

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?

Paul Frankowski Senior Staff
4 years ago

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.

Orlando Browne Asked this
4 years ago

Hi Pavel,

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

Log in to reply.