Media query : break points and how to find them

HTML-CSS
1

Hi,
I am trying to get media query to adjust the view of my project at my mobile phone. I have Samsung A6.
I found on the Internet that resolution of this phone is: 1480x720px. Whatever break point I put, no matter how wide/high or how narrow/short it is, media query has no effect on the view from my mobile. At the same time, view from my lap-top window does appear to be affected, as I narow it down. From mobile phone I watch my project via link that I sent to myself through mail (not sure this is relevant).

Is media query break point same as phone’s resolution, or those are two different things?

Furthermore, for mobile view, I am trying to seperate “new quote” and “tweet” buttons apart, to make them equal and have them in the same row. I beleive that code I put within media query is excessive, but not sure what can I leave out.

Mobile phone sreens:
Mobile 1: buttons are too big, unequal in size, next to each other.
Mobile 2: I have to scroll to see the whole page.
Lap top: All is looking good.

Mobile_11
Mobile_11720×1480 90.5 KB

Mobile_21
Mobile_21720×1480 123 KB

Thanks for your help.

Link to my project:

2

Can you tell us exactly what is not happening with your phone?

If you have a very narrow view then perhaps you don’t want them to be in the same row but rather one on top of the other in the same column?

Regardless, I would use a narrow-first approach to style this. Narrow your browser as skinny as it will go and style the page to look good (don’t use any break points here, this is your default CSS). Then after you have it looking good at the narrow view you can slowly widen your browser and add a break point when you think you have enough horizontal space to change the layout of elements. Use min-width for the break point, and I would suggest using em units instead of px, that way the content dictates when the break point occurs, not some arbitrary px widths.

3

Hi Deyan,

In your CSS code you have :

@media (max-width: 180px) {...

This will apply the rule to devices whose maximum width is 180px, i.e. smaller than 180px - as your phone screen is wider than 180px the rules in this media query will not apply.

There are so many devices these days, you cannot expect to add media queries for specific ones! A guide I found gave this:

Mobile:
@media screen and (max-width: 768px){... /* css rules */ ... }

Tablet:
@media screen and (min-width: 768px){... /* css rules */ ... }

Laptop:
@media screen and (min-width: 900px){... /* css rules */ ... }

Large Desktop:
@media screen and (min-width: 1200px){... /* css rules */ ... }

I agree with @bbsmooth though - it is generally more simple to design your page for narrow view (i.e. mobile) first and then add media queries as devices get wider. When you do this, you don’t need the ‘Mobile’ media query breakpoint, just the subsequent wider ones.

Hope this helps!

1 Like
4

Thank you for the answer. I’ve uploaded photos of my mobile sreen. Could I ask you for an advice how to make this look nice (general approach)?

5

Thank you for your answer. I will look up your table from now on, whenever I need to decide on break points.

P.S. Naturally, following the advice on mobile first approach :smiley:

6

I would probably put the New Quote button on top of the Tweet button so they are in one column.

Vertical scroll is completely fine and you don’t need to anything special to avoid it. But you could reduce the amount of padding around the box and make the font slightly smaller (don’t go overboard on this, it should still be readable).

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.