Search code examples
cssresponsive-designmedia-queries

Media Query Not Working?

Trying to apply a bit of Media Query.

CSS without media query

blockquote {
margin: 1.5em 0;
font-family: 'Gentium Basic', Georgia, serif;
font-size: 20px;
line-height: 1.6em;
font-weight: normal;
font-style: italic;
border-left: 1px dotted;
padding: 0 0 0 25px;
left: 50%;
margin-left: -150px;
width: 650px;
}

Then applied:

/* larger than 800px */
@media only screen and (min-width: 801px) {
  #mobileNav {
    height: 0 !important;
  }
}
/* 800px and smaller */
@media only screen and (max-width: 800px) {
  #bannerImage {
    background-attachment: scroll !important;
  }

blockquote {
margin: 1.5em 0;
font-family: 'Gentium Basic', Georgia, serif;
font-size: 20px;
line-height: 1.6em;
font-weight: normal;
font-style: italic;
border-left: 1px dotted;
padding: 0 0 0 25px;
}

Site here

What I'm trying to do is have the blockquote fit onto the screen. Currently it does this when the width of the page is changed:

enter image description here

When I want it to do this:

enter image description here

Solution

  • If you are not defining the width in the media query, it will just use the width defined in the general stylesheet(which in this case, it's 650px), so you need to define width again in the media query rule block.

    @media only screen and (max-width: 800px) {
    blockquote {
       margin: 1.5em 0;
       font-family: 'Gentium Basic', Georgia, serif;
       font-size: 20px;
       line-height: 1.6em;
       font-weight: normal;
       font-style: italic;
       border-left: 1px dotted;
       padding: 0 0 0 25px;
       width: 100%; /* Specify some width here */
       /* You should use auto value as you are using margins and paddings */
    }

    /* Other styles goes here */
}

    Note: If you have only styles in your media query which you've pasted here, than I would like to inform you that you are not closing the media query block.

    Demo