Kevin Powell - Community•2y ago

quick question

hey all, i just have a quick question, can i do something like this: so on mobile, i have 4 images, then i set a media query where when we are at 1440px wide, i add more 7 more images, so 11 images in total in desktop. is this possible? add/remove html on media query condition

11 Replies

StefanH•2y ago

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

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

son argOP•2y ago

thanks what does @media screen mean?

StefanH•2y ago

It means we require a screen

son argOP•2y ago

and how can i reverse the same? like: display: not_none but obv, not_none is not a thing, i mean its equivalent

StefanH•2y ago

@query screen and (min-width: 1440px) {
    .only-smallscreen {
        display: none;
    }
}

@query screen and (min-width: 1440px) {
    .only-smallscreen {
        display: none;
    }
}

son argOP•2y ago

ah okay, got you this removes display: none on an element?

StefanH•2y ago

I always rather have utility classes like this set the display to none than hardcoding something like block A woops wait I would generally advise against hiding certain content on certain devices. It goes against responsive design where the goal is to provide the same content to all users These utility classes themselves aren't evil but you're saying you want to show more images on widescreen and hide some on mobile which I don't really agree with

son argOP•2y ago

ah, i see your point yeah, that's understandable hey @markboots., sorry for the tag but i like your answers too (from other threads i opened). do you have any opinions on this topic?

Jochem•2y ago

if you ever do need to remove a property set earlier, you can use unset, initial, or inherit as a value. They're all subtly different, so look them up on MDN.

Mannix•2y ago

there is also revert

son argOP•2y ago

thanks all! 🙂

Gaming

Programming

quick question