Posted by ian on Fri, Jun 09, 2023 - 1:59am

Showing my ignorance again... I have created a simple subtheme of snazzy which draws some legacy css from local.css and new css for this site from new.css. The theme works nicely so far, but on one specific page that has its own layout (created by copying Moscone and editing some bits) I am struggling to over-write the css from grid-flexbox.css with new css in new.css.

grid-flexbox.css:
@media (min-width: 75em) { .container { max-width: 72.25rem; } }

new.css:
@media (min-width: 75em) { .container { max-width: 90.00rem; } }

Trouble is I don't want every instance on every page on the site affected so I've been trying to put it inside as follows:

div.1-wrapper-inner.container.container-fluid {
@media (min-width: 75em) {
  .container {
    max-width: 90.00rem;
  }
}
}

This doesn't work and inspecting the page in Firefox shows that the original grid-flexbox.css is still active so I'm at my limit with this as I've been assuming my new.css would be the last css file loaded and trherefore overwrite all the earlier css (it does for every other css code I've altered).

Anyone got some pointers for me?...

 

 

Accepted answer

@Ian

Spotted the issue:

Your selector has "1-wrapper" rather than "l-wrapper" (i.e. the numeral for one rather than lowercase L)

Try:

@media (min-width: 75em) {
  div.l-wrapper-inner.container.container-fluid {
    max-width: 90.00rem;
  }
}

Comments

Fri, Jun 09, 2023 - 2:06am by yorkshirepudding

Hi @Ian

With CSS you cannot nest a media query inside a selector. Try instead:

@media (min-width: 75em) {
  div.1-wrapper-inner.container.container-fluid .container {
    max-width: 90.00rem;
  }
}

Fri, Jun 09, 2023 - 2:22am by ian

Hi @yorkshirepudding

Thanks for the quick reply... but it didn't work and neither did a shortened form

@media (min-width: 75em) {
  div.1-wrapper-inner.container {
    max-width: 90.00rem;
  }
}

or

@media (min-width: 75em) {
  div.1-wrapper-inner.container.container-fluid {
    max-width: 90.00rem;
  }
}

or

@media (min-width: 75em) {
  div.1-wrapper-inner.container.container-fluid {
   .container {   

max-width: 90.00rem;
  }
}

}

Looks like there is something more at work here...

Fri, Jun 09, 2023 - 2:29am by yorkshirepudding

@Ian

Yes, it does sound like there is something else at work (you did flush the cache, at least for CSS, didn't you?)

In your browser:

  1. Right click on an element as close to the container top as you can get and select "Inspect Element"
  2. Find the opening of the container and click on that within the selector window
  3. Experiment by deselecting the selectors at the top and see what else comes into play further down.
  4. Look at what selectors are being used and tailor your selectors accordingly.

Fri, Jun 09, 2023 - 2:51am by ian

@yorkshirepudding

Yes I did flush the caches :)

I've also used Firefox to inspect the element - which is where I get the

"div.1-wrapper-inner.container.container-fluid" from. While hovering on that code in the Inspector I can read which lines, in which css file is affecting .1-wrapper-inner, container, and container-fluid - that's how I find that grid-flexbox.css has the @media code and if I edit that in Firefox Inspector then the change I want to effect happens - the width of the div expands...

I've reviewed the selectors from the top of the page right through to the foot... can't see any otehr reference to max-width that is active on the page.

Fri, Jun 09, 2023 - 4:05am by yorkshirepudding

@Ian

Spotted the issue:

Your selector has "1-wrapper" rather than "l-wrapper" (i.e. the numeral for one rather than lowercase L)

Try:

@media (min-width: 75em) {
  div.l-wrapper-inner.container.container-fluid {
    max-width: 90.00rem;
  }
}

Fri, Jun 09, 2023 - 3:25pm by ian

Oh the benefits of a new set of eyes.... I don't know how many times I've looked at that css and not spotted that! Mind you, in my defense, my eyes are over 70 years old (and obviously in need of testing)... correcting it to a lower case "L" works as expected.

Thank you @yorkshirepudding !

Fri, Jun 09, 2023 - 2:18am by DrAlbany

You can also use the CSS Injector module to add CSS from within Backdrops User Interface rather than editing the CSS files.

It' makes it really easy to experiment.

Fri, Jun 09, 2023 - 2:35am by ian

@DrAlbany

Thanks, but at this stage I'm trying to limit the number of modules on the server... if all else fails I'll take a look at CSS injector.