How do I hide an element in HTML on mobile or small windows?

user_11594362 0
Viewed 628

I am setting up a website, and when I open it on mobile or resize the page too small, the logo at the top of the page resizes itself in a way that looks bad. It would be great if I could resize it to look good, but at this point I am running out of time and just want to make it disappear.

I have tried and failed to write JavaScript scripts to make it disappear. I can set the visibility to hidden, but I have no way to do this in a responsive way to the page getting resized and no way to detect if the webpage is too small to begin with. I have attempted to use the onresize DOM Event, but it doesn't seem to work.

Here is my attempt at getting HTML to use the JS function:

<a href="website.com" class="header_logo" id="main_logo" onresize="fixBar()">
<img src="image.png">
</a>

Here is the JS function (which is below all the HTML on the page) that is not working:

<script type="text/javascript">
function fixBar() {
  if (window.innerWidth < 400px) {
    document.getElementById("main_logo").style.visibility = "hidden";
  } else {
    document.getElementById("main_logo").style.visibility = "visible";
  }
}
</script>

But as you can see, I still don't know how to check in the first place if the window is sufficiently small.

Also, I am working under restrictions that make it very difficult to use jQuery. If that is my only option then I will use it, but I would really prefer not to. Thank you for the help!

mobile html javascript
4 Answers

You can use CSS Media Query for responsiveness.

@media only screen and (max-width: 400px) {
  #main_logo {
    display: none;
  }
}
<a href="website.com" class="header_logo" id="main_logo">
  <img src="https://placeholder.pics/svg/200x50">
  <div>Any HTML element</div>
</a>

Here, when the window size is less than 400px the element with id="main_logo" will be removed.

Another CSS rule would be visibility: hidden;

There is a difference between display: none; and visibility: hidden; Check that out here

user_103990010

You can use a CSS media query to accomplish this:

@media only screen and (max-width: 400px) {
  #main_logo {
    visibility: hidden;
  }
}
user_120294810

OK, if you can use CSS media query for those kind of problem.

@media screen and (max-width: 480px) {
  image-container-class {
    position: relative;
    height: 90px;
    width: 150px;
    //display: none;
  }
}

or if you are trying to hide logo on small devices, use display none. see the commented code at up.

user_64014260

I have the almost the same situation as yours; that if the screen width is less than the my specified width it should hide the div. This is the jquery code I used that worked for me.

$(window).resize(function() {

  if ($(this).width() < 400) {

    $('.divIWantedToHide').hide();

  } else {

    $('.divIWantedToHide').show();

    }

});

You might want to combine it with a resize event with you can check you window size

$(window).resize(function() {
  if ($(window).width() < 400) {
     alert('Less than 400');
  }
 else {
    alert('More than 400');
 }
});

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution

Example :

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

AND 

@media only screen and (max-width: 400px) {
  #main_logo {
    display: none;
  }
}

checkout CSS @media Rule Here

you can go with id and class id represent it with # and class represent it with dot i.e .

user_116076760
Related