Media Queries aren't cooperating

[Amber]

I've created a Minimum child theme and I'm trying to overwrite a bunch of styles in my media queries however nothing seems to update or change as it should. I've done this before with no problem, I've looked through the code, worked on different naming conventions, moved the code around but it still doe not work.

For example:
If you check out the testing site here, you'll see that the .search-speakers overlaps the speakers image. Well I then try to go into my media queries to then make that class have a position of relative and a top:0!important which then should just move it up (as it does when I inspect the class/div with firefox and chrome), however nothing happens. Then I move on to the image itself and set the containers img to width:100% and nothing happens. I have tons of borders everywhere, to show me when something is working or not working and NONE of them show up. :/

It seems as if the media queries give only register @media only screen and (max-width: 1023px) and then die.

Any help into this matter would be very appreciated!

http://spellbindersspeakers.org/febnew/speaker/roslyn-franken

[Tom]

Hi Amber,

For your question about @media only screen and (max-width: 1023px) you could remove

.search-speakers { position: relative!important;)

However, if you have a speaker with a really long name, the name will probably bump into the speaker search anyway, and all names will conflict for smaller screens. Maybe if you put the search-speakers DIV before the speaker-main DIV?

(Is there a reason you're using Minimum and not Minimum Pro?)

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Amber]

Okay, thanks for the suggestion Tom, however I still have the issue with every other style not working in my media queries past the max-width: 1023px.

Like my #title{ width: 100%; margin: 0 auto; border-bottom: 2px solid green;} and #SlideDeck-289-frame { display: none!important;} in my 600px query and .speaker-listing p, .speaker-features { width: 87%!important;} in my 300px media query, plus more...

As soon as something is placed in that media query the main style should be overwritten, but they aren't overwriting.

No reason for the Minimum, didn't know there was a Minimum Pro theme. I've already done all the work for this child theme so I have to stick with it now..

[Tom]

CSS Line 1682: remove the duplicate }

	#title {
		margin: 0 auto; border-bottom: 2px solid blue;}
	}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Amber]

That did the trick! Thanks for the help!

[Author]

Posts