CODEWITHSUNDEEP
htmlcsslayout
Morgan Smith
Morgan Smith

Reputation: 301

Media query issue: resizing/moving blocks

I am trying to have three different layouts
Desktop- image + text block on top of a page
Medium devices- image on top of a page and text on the bottom of the page
Mobile- text on the bottom of the page

I have figured out how I want to do the desktop and the mobile, and I thought I had the medium devices figured out, but it isn't working correctly.

HTML

<div class="some-container--top">
    <div class="row">
       <div class="column image">
         <img src="{image url}" alt="alt" />
       </div>

    <div class=" column container">
       <img src="{image url}" alt="color" />
       <div class="text-block"> 
          <h3>title</h3>
          <p>text</p>
       </div>
   </div>
 </div>
</div>

<div class="some-container--bottom">
<p>text</p>
</div>

CSS:


@media only screen and (min-width: 1000px){
.some-container--bottom{
display:none;
}
}

@media only screen and(max-width:999px) and (min-width:601px){
.container{
display:none;
}
.some-container--bottom{
display:none;
}
}

@media only screen and (max-width: 600px){
 .some-container--top{
 display:none;
}
}

So, desktop works (i.e, I have the picture and the text showing up correctly) and mobile works ( I have the text showing up where I want). However, for my medium devices it shows everything( text and image on both bottom and top of page). What is wrong with my code?

Upvotes: 1

Views: 35

Answers (1)

MightyFirebird
MightyFirebird

Reputation: 36

There is an error in your css-rule:

@media only screen and(max-width:999px) and (min-width:601px){
                      ^ There must be a space between 'and' and the opening parenthesis

Demo

Upvotes: 1

Related Questions