CODEWITHSUNDEEP
htmlcss
jay777
jay777

Reputation: 135

Toggling Element Display/Visisbilty using Media Queries

Im building a responsive website and I have two versions of the logo. One for Mobile screen sizes and another for tablet/computer screen sizes. Im trying to have the site toggle between the two using media queries.

I basically put two logos on divs right on top of each other, then using media queries,im having the computer size logo set to display:None when window is less than or equal to 450px. Then I set the mobile logo with the same query except i made it so that if the screen is greater than or equal to 450px its set to display:none.

** .cover is the computer/larger logo. **

HTML:

<div id="paralax0">
<div class="cover" style="padding-top:25vh;">
    <img style="width:600px;" src="./img/cover.png">
</div>
<div class="covermobile">
    <img style="width:300px;" src="./img/logo8.png">
</div>
<div class="coverlinks">
    <div class "icon" style="padding: 0px 20px 70px 20px;"><a class="link" href="#"><img src="./img/resume.png"></a></div>
    <div class "icon" style="padding: 0px 20px 70px 20px;"><a class="link" href="#"><img src="./img/mywork.png"></a></div>
</div>
</div>



CSS:

.cover{
  display: flex;
  justify-content: center;
  align-items: center;
}

.covermobile{
  display: flex;
  justify-content: center;
  align-items: center;
}


@media only screen and (max-width: 450px){
.cover{
  display: none;
 }
}

@media only screen and (min-width: 450px){
.covermobile{
  display:none;
 }
}

what I was desiring/expecting would happen was that screens widths <= 450px makes the larger logo disappear leaving only the mobile logo. Vise versa that screen widths >= 450px will make the mobile logo disappear leaving only the larger logo.

Instead the larger logo stays visible regardless of the screen size

Upvotes: 1

Views: 31

Answers (1)

TOMBA
TOMBA

Reputation: 205

I was testing your code and everything works perfectly. I think you are missing this meta tag inside your html head.

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 0

Related Questions