How many media query do I need need to set up?

1

Hi
I am doing this simple website

https://banjer71.github.io/fra1/

but when I test it on my Android phone with different browsers I have different solutions.
Firefox and Android browser work fine, Chrome and Opera don’t work as I want.
The social media query are not visible very well.

I also found this article where there should be all the possible resolution, but I was wondering if I have to use them every time or am I doing some mistakes with the resolutions?

Thank you in advance for all your reply.
Banjer71

2

Don’t know if my answer will help you but as far as I feel about it media queries are for “pure” css builds. I did some projects where I used Bootstrap only and no media queries were needed. (Though I think I also saw somewhere builds which used media queries for passing Bootstrap values).

Concerning queries, most users develop their sites/apps for a desktop resolution and then they produce media queries for smaller devices. While not wrong this approach is considered not a good practice, instead you develop mobile first: you set up media query for device with min-width: 768px (desktop).

Here is a short article and tutorial on RWD and media queries:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

I don’t know what results you expect from your site but I ran it through my Chromium’s dev tools and all design layouts are clean and well scaled.

2 Likes
3

Thank you very much for your reply.
Yes I knew that probably the best practice is to develop for mobile first, but I started working on this page only to make practice with html/css without using bootstrap (except for the fontwasome icon)
I would like to understand are the things work behind before starting to use bootstrap or other frameworks.
Thanks for your link it is very helpful

4

This sounds more like a cross-browser issue than a media query issue.

Off the top of my head, one thing Firefox does differently (and correctly) is that it defaults the CSS property box-sizing to border-box instead of content-box. This basically stops an element’s padding and border from taking up more space than its width and height, except in extreme cases where the padding and border values are just way too high. A lot of people set this property globally to avoid issues.

*{
   box-sizing: border-box;
}
5

Thanks I don t know that, i ll give it a try and I let you know :wink:

6

Nothing has changed!!

7

Ah, right. It turns out bootstrap automatically sets it to border-box. Still, it’s nice to know about this property. It gets asked in job interviews.

But just to be clear, are you talking about how the buttons for social media get cut off in Chrome? I believe it has to do with different browsers handle the vh value/whether the browser’s navigation bar is part of the equation. Apparently it’s meant to be intentional.

Maybe you’ll just have to position their container a little bit higher

8

To generalize further on medias: it is stated on W3 that if you use (for e. g.) @media only screen and (max-width: 500px) the code between { } will affect all devices which are smaller than 500 px. So setting up other medias is, perhaps, pointless. I also tested this recently when I tweaked my Wiki viewer: got a separate media query for each device but when I changed width to tablet landscape it basically did this to other, smaller resolutions too.

There is a worth noting practice, some may deem it pointless or time consuming, of developing separate css sheets for each or specific display resolutions (e.g. main sheet is for desktops, the other sheets are loaded when display changes).

1 Like
9

I do use @media-queries quite a bit. I also start my design at 1920 X 1080. Once I am happy with my design at this viewport resolution I slowly resize the browser viewport smaller until something breaks or does not look right, for example a font size. At this point I add the @media-query and then continue on down until I reach about 320 px width.

I don’t start with mobile because I like to design on a bigger canvas to better see what I am doing. Many disagree with this, and I don’t disagree with their point of view, but my way works well for me.

1 Like
10

Yes I was talking about the social media icon, in some browser app installed on the same phone (mine) two app work other two partially hidin the social media icons.
So I also asked my sister to check on his iphone 6 and she said it is fine.
I need to verify what Folrunge say in his answer below.
Thanks again for this useful link :wink:

11

Actually I was thinking to a different css sheets too.
But you gave me a good idea how to proceed.

1 Like