This is my first time using Omega and I was wondering, is it normal to have to put media queries inside your style sheets, you know since omega is really handling them for you? I decided that on my mobile version, I needed to eleminate the second sidebar and some of my header regions and I put the right classes in my css with display: none but then they wouldn't come back up on the wider layouts because of the onion effect of global.css. I couldn't figure out what CSS to use to make them re-appear in the wide.css or narrow or normal.css. So I wrapped the classes in a media query in my global style sheet like this:

@media screen and (max-width: 740px){
	.not-front aside#region-sidebar-second,
	.not-front #zone-header{
		display: none;
	}
	
}

But is this how I am supposed to use this theme? Is this proper usage of the omega theme? I just want to make sure I'm doing things the right way?

Comments

iwuv’s picture

Not sure about the best practice here with Omega, but you can use display: block; to make your deal show itself again.

jdflorez’s picture

Remember that you have different CSS for the different breakpoints settings that Omega has already: THEMENAME-alpha-default-narrow.css, THEMENAME-alpha-default-normal.css and THEMENAME-alpha-default-wide.css. You can check that in your Theme's grid settings for the exact breakpoints. If you put your styles in global.css, the styles will load always.

In your case, I would do this:
a) Place your code inside css/global.css and in css/THEMENAME-alpha-default-normal.css place this

.not-front aside#region-sidebar-second,
.not-front #zone-header{
	display: block;
}

This will make the blocks show for any resolution above the 740px breakpoint.

beckyjohnson’s picture

Thank you! It took me a bit to realize what the media querying is doing as far as pulling up the right style sheet goes too! I think I was just confused at first. Thanks for your css tips. They were really helpful!