Media Queries aren't cooperating

Community Forums Forums General Discussion Media Queries aren't cooperating

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Amber 5 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #90480

    Amber
    Participant
    Post count: 20

    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
    #90498

    Tom
    Participant
    Post count: 710

    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 300 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #90500

    Amber
    Participant
    Post count: 20

    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..

    #90533

    Tom
    Participant
    Post count: 710

    CSS Line 1682: remove the duplicate }

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

    Choose your next site design from over 300 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #90673

    Amber
    Participant
    Post count: 20

    That did the trick! Thanks for the help!

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Media Queries aren't cooperating’ is closed to new replies.