Connect with us

Hi, what are you looking for?


How to remove and add elements depending on the resolution of the device?

In response to requests, in this article I will cover Media Queries, which is the use of Media Types with one or more expressions involving characteristics of a medium to define formats for different devices. Browsers or applications read the expressions defined in the Query, if the device in question fits these requests the CSS will be applied.

Media Queries CSS Resolution
Image/Reproduction: Lynda

The Media Types define what type of media a certain CSS code is directed to. HTML was generated to be portable, that is, read and interpreted by any type of device. But each device displays HTML in a different way, due to factors such as the dimensions of the screen (“resolution“). Assuming that I have just accessed a website through a desktop, it will not have the same reaction as if we accessed it via a mobile device. This is because they are different devices and different forms of navigation.

The problems of Media Queries are that more and more devices appear with different sizes and also with hardware very similar to those of desktops, making these devices have a navigation almost equal to those of desktops. In this case, I can cite as an example the iPhone X, your screen has excellent quality and your browser reproduces the pages like a regular desktop browser.

CSS Resolution Elements
Image/Reproduction: Cambridge Community Television

So there is no need to prepare a layout and a CSS with Media Type Handheld for the iPhone, because even though it is a Handheld, it does not work as one, however, it is important to note that it also does not work exactly as a desktop. Even though the rendering of Safari is identical to that of a desktop, there is a question of user behavior and the form of navigation that are different. So we are in a middle ground, not even being able to provide a specific CSS for Handheld and not a full Screen CSS.

Let's see below how you should define the parameter to be loaded:

@media screen and (max-width:1024px){.resolucaomenor{display:none}}.resolucaomenor{display:show}

If you prefer (optional), you can create a file in .CSS and save it in your instance or in my startup solution: the Blenner SmartCDN. In sequence, you must insert in your HTML file created at the beginning (metadata):

After entering the commands in .CSS, you must “call” the global command where you want to apply the new variable functions, as desired. See the example applicable to an image and the division named “C”:

<c class=”resolucaomenor”><img src=”ENDEREÇO da imagem” alt=&quot;DESCRIPTION&quot; id=”COMANDO adicional (opcional)”></c>

Hope this helps! 😀
Leave your comments and share with friends!

Written By

My name is Juan de Souza, I'm 22 years old, I'm a businessman, investor, blogger, streamer and podcaster. I started my first business at the age of 10, using a dial-up connection in Brazil. I founded businesses such as TFX, Juan de Souza Media, Coliseu Geek, EcoVision, among others.


See what we recommend from Juan's Blog for you:


Recently, I was facing severe problems at peak times, for example: 9-10 am and 7-9 pm every day with...


One of the most common questions is about how the process of creating platform games is done, and thinking about that, I decided to create one...


Undoubtedly, in current times frameworks have become essential for the development of applications and solutions on the internet, specifically for the “web” interface...


Recently, announced new domain extensions that can be registered in Brazil for various categories of professionals. Thinking about it, I decided to create...