Media Queries or JavaScript to hide an element on certain screens - javascript

We have a section on the page that needs to be hidden on small phone screens, and appear on larger screens.
The easiest way to do it would be to use CSS media queries.
.section {
display: none;
}
#media (min-width: 900px) {
.section {
display: block;
}
}
However, this would keep the section in the DOM, thus potentially making it less efficient.
Alternatively, we could toggle the existence of the section using a state in our JavaScript framework (React in our case, but not important for the question).
My Question is: When is it better to use one, and when is it fine to use the other?

Related

Use hover/active CSS by default on mobile devices

On desktop devices, I have designed my elements to be grayed out by default, but become colored when a user hovers over them. On mobile devices, I want them to use the hover state CSS to be colored in by default. Is it possible to do this through JavaScript?
I have lots of elements with different colors, so it would be much easier to simply trigger the state through JavaScript rather than writing new classes and adding them to the elements.
No need for JS! You can use media queries in CSS to accomplish this.
Note: I'm using Bootstrap 4's numbers for screen sizes in this example:
.element:hover {
background-color: gray
}
#media only screen and (max-width: 767px) {
.element {
background-color: gray;
}
}
Bootstrap starts medium screen sizes at 768px, hence my max width of 767. If you want, you can try it out at https://jsfiddle.net/21haxstd/

How to use different menu for mobile - Shopify (mmenu)

I started to work on Shopify store. The previous developer used mmenu to create the mobile menu.
I want to use different menus for mobile and desktop, the question is, how can I control which menu is shown by mmenu?
Thanks
First, you need to make sure you are cloning the menu (Because the plugin makes lot of changes to the html) with the following option:
$("#my-menu").mmenu({
// options
}, {
// configuration
clone: true
});
Then you need to add the css based on the id (prepend mm-) in order to display the original or the clone.
#media (max-width: 600px) {
#my-menu {
display: none !important;
}
}
#media (min-width: 601px) {
#mm-my-menu{
display: none !important;
}
}
Here's the actual documentation for that

ParticlesJS component in React is hidden with media queries but not coming back to display

I am using the ParticlesJS package for my ReactJS application. It displays at the beginning. I want to hide it when the screen size is under 600px. It sets the display to none, however when the screen is resized back above 600px, the particles element doesn't set display back to block, so it's not displayed again.
html/jsx:
<div className="particles-container">
<Particles params={particleParams} className="particles" />
<div className="home-banner-content">
<img src="./src/style/img/logo_banner.png" />
</div>
</div>
css:
#media only screen and (max-width: 600px) {
.particles-container .particles {
display: none;
}
}
#media only screen and (min-width: 600px) {
.particles-container .particles {
display: block;
}
}
After digging in a bit I saw that the Canvas's height is set to 0 when display: none; is set via the media query.
I'll have to dig in more to get the correct answer to as to why that might be happening. Will return with an update to this answer with a proper explanation regarding this.
Continuing, when your media query sets display: block; the height of the canvas still remains 0 and thus you are unable to see it.
To fix this you can either listen to window resize events inside the javascript code (in case you're resizing).
But in case you're going to fix this for mobile then you can check for window width inside the javascript itself and conditionally render the Particles component.
Also, if you provide a "fixed" height to the Particles component as a prop, your media query will work.
Here, you can see a demo: https://codesandbox.io/s/rw8666x11o

Stop being responsive at a certain width

I know this question sounds crazy, but I'm going to explain it.
I have a responsive website and all works OK, but when the width is too low (width < 500px) the website (which is still responsive) start to rearrange in such a way that I prefer to NOT being responsive anymore.
I'd like to know if there is a script or anything that can solve this. Please any help will be useful :)
set a minimum width on the html / body
html, body {
min-width: 500px;
}
Making elements responsive is usually done by setting width to a percentage of parent elements. The above would be an easy fix, but it's possible there will be elements you need to style using media queries.
You can place your css within media queries so that it only applies under particular conditions. E.g.
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

Setting HTML5 autofocus attribute with CSS

I have a website that has one input field (like a search engine) and I use the HTML5 autofocus attribute on it.
But on very small screen sizes the soft keyboard that pops up on many devices obscures too much of the screen.
Is it possible to se the autofocus attribute in a CSS media query, so its only active on larger displays ?
I know I could set the focus with Javascript, but right now the pages doesn't use any Javascript and I would prefer to avoid it if its possible to use CSS for this.
As suggested above in comments: Use two inputs and make the one hidden (display:none;). Then with a #media rule target screens that have a maximum width of 480px and make the hidden input visible (display:block;) and hide the other one.
CSS:
.smscreen {
display: none;
}
#media screen and (max-width: 480px) {
.lgscreen {
display: none;
}
.smscreen {
display: block;
}
}
See Example using CSS.
Otherwise, you can detect the window size with jQuery on page load, and if the screen is larger than 480px to use .focus() function on the input.
See Example using jQuery.

Categories