WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Media Query Overriding the Main Styles (7 posts)

  1. jaeeun
    Member
    Posted 1 year ago #

    Hi,

    I added this at the end of my style.css

    @media only screen
    and (max-width:719px;){
    
    #wrapper { width: 520px; margin: 30px auto 0 auto;z-index:200;position:relative;}
    
    #single-text {
    	float:right;
    	width: 300px;
    	}
    
    #single-img {
    	float:left;
    	margin-bottom:0;
    	border-top:1px solid #ccc;
    	padding-top:10px;
    	padding-bottom:0;
    	}
    }

    and now even when the screen is wide the media query styles are applied.

    The link the page;

    http://www.underdonk.com/exhibitions/cantaloupe-today/

    and the main styles are;

    #wrapper { width: 730px; margin: 30px auto 0 auto;z-index:200;position:relative;}
    
    #single-text {
    	float:right;
    	width: 500px;
    
    	}
    #single-img {
    	float:left;
    	margin-bottom:0;
    	border-top:1px solid #ccc;
    	padding-top:10px;
    	padding-bottom:0;
    	}

    I'd appreciate your help!

    Best,
    Jaeeun

  2. jaeeun
    Member
    Posted 1 year ago #

    It's also affecting the size of the slideshow images somehow. They appear to be squeezed.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

  4. jaeeun
    Member
    Posted 1 year ago #

    Thanks.

    I don't need the first stylesheet because I just put the codes in it in my main stylesheet style.css, and the part it's giving error messages in the second stylesheet is the media query part.

    What should I do??

  5. jaeeun
    Member
    Posted 1 year ago #

    I deleted ; from (max-width:719px;) and now it works as it should.

    Thanks!

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Line 77 is not in the media query - that's an error here:

    #content{
    	color:#666;
    	width: 990px;
    	margin: 30px 0 0 0px;
    	padding:0;
    	}
    
    	width:1000px;
    	height:600px;
    	}
    
    #press {border-top: 1px solid #ccc;}

    And the semi-colon after 729px is an error:

    @media only screen
    and (max-width:729px;){
  7. jaeeun
    Member
    Posted 1 year ago #

    Thank you so much!

Topic Closed

This topic has been closed to new replies.

About this Topic