CODEWITHSUNDEEP
cssfrontendresponsivedeveloper-tools
vytaute
vytaute

Reputation: 1480

How to know browser window size?

I was creating a page and want to have css accordingly to browser window size. Is there a tool (maybe in f12 developer tools?) that could show me exact pixels when I am resizing a window so I could set a particular style for that size of window?

For example, I write:

@media ( max-width: 768px) { .picture-to-hide {display : none; } }

But when testing my page I see that I would like to hide the picture earlier. How do I know exact pixels? Just by try and fail method of trying different numbers? Or maybe I can see pixels in developer tools somewhere?

Thank you in advance!

Upvotes: 0

Views: 3771

Answers (1)

Pooja P
Pooja P

Reputation: 121

When it comes to your display on Windows 10, in your Laptop’s Settings Panel, you should find all the relevant information. To get there, go to the Search panel in your Taskbar, and write “Display”.

Once you enter the “Display” word, Windows will suggest opening the “Display Settings”. Select then “Open Display Settings”. The system will show you all the options for Display. Look for the “Advanced Display Settings”.

Once in “Advanced Display Settings”, Windows will show you information like monitor resolution, Model of the Video Card, Color format and size of the screen.

If you are doing responsive designing i suggest you to try webdeveloper mode in mozilla firefox where you can change the screen size accordingly .Shortcut to switch onto resposive web design mode in mozilla firefox : Ctrl+Shift+M

Upvotes: 2

Related Questions