I have an omega sub-theme that I have three side by side regions in the 24 column branding-zone as follows: header-first 5 columns, branding 14 columns, header-second 5 columns. The two header regions contain responsive images that re-size at the default omega media query breakpoints.
What I want to do is have the "h1 .sitename" text to re-size at the breakpoints to maintain the spacing. The default behavior as the grid narrows is to wrap the text. This creates extra space under the two header regions on each side.
My CSS:
Global:
h1.site-name a,
h2.site-name a{
font-size: 2.2rem;
line-height: 2.4rem;
}
Narrow:
h1.site-name a,
h2.site-name a{
font-size: 1.65rem;
line-height: 1.8rem;
}
I was under the impression that Global applied unless overwritten specifically in the Narrow, Normal, or Wide, but this CSS does not seem to change the "sitename" font-size for narrow. Any Ideas?
Comments
You may want to check...
I know that the rem property has pretty broad support, but there could be the offhand chance that one of your browser versions isn't applying it. Is the behavior you're experiencing the same across an array of browsers?
You're correct about global.css being the default, unless overridden. If you look at different viewport widths using Firebug or a similar tool, is the CSS updating?
And lastly--have you cleared the caches in your Drupal dev environment and your test browsers?
use Firebug to debug
I highly recommend that you use Firebug or the built-in CSS tools in Firefox or IE, so you can tell which CSS is actually being applied and whether your responsive breakpoints are working. You can also edit the CSS on the fly to try things out.
When debugging, turn off CSS file aggregation in
/admin/config/development/performanceso you can see the original CSS file names.Google Developer Tools
dhalbert, I was surprised that you mentioned IE and Firefox but not Chrome. I always use the Chrome Developer Tools (right click page in Chrome, select "inspect element") to diagnose CSS and even turn on/off CSS rules in real time.
I was wondering if those other browsers have tools not available in the Developer Tools?
dhalbert, I was surprised
No special reason: I am just not familiar with the Chrome tools. It's probably worth trying the tools in all to see what you like (and certainly trying your site on all of them).
In Agreement
Browser compatability list for REM: http://caniuse.com/rem. I am in agreement with the other commenting "Drupalites." With any css issue and Omega, I find it very useful to use Firebug or Chrome Developer Tools. Re-size the browser to the smallest mobile view and inspect the element. Expand the browser and when you hit the next media query breakpoint, inspect the element again. In this way, you will see if your css overrides are working. I try not to use REM unless I have to. I have found the best practice for me is to declare font sizes for H1 - H4 in global.css in em's and make adjustments in the cascade of stylesheets.
Ken Weigand
Which size is showing?
Which size is always showing, the 2.2rem or the 1.65rem?
Learn more at iRolo.net.