React.js CSS window width

Question

I'm developing a responsive website using react. For styling I use CSS stylesheets. The responsive part is achieved in CSS using @media queries.

The problem is that when I use chrome, the elements appear bigger and the layout is as I would access the website from a smaller screen (tablet). What I understand is that chrome 'thinks' that the view port is smaller and responds to the media queries with the according information.

The problem appeared in the middle of the development process, after some time of working correctly.

What did I do wrong and how do I fix this?

Note: When opening the website in Firefox, everything works as it should. Also, when I open dev tools in chrome (Inspect F12) and 'toggle device toolbar' to true (Ctrl + Shift + M) the dimensions are set correctly. The problem appears only using 'regular chrome'.

Please provide enough code so others can better understand or reproduce the problem. — Jay
– Jay, Commented Nov 21, 2022 at 8:19

TanmayKr · Accepted Answer · 2022-11-20 08:57:37Z

2

if the elements are appearing bigger and you want to design according to the width of the device, use vw (viewWidth) to set the sizing of the element. Use vh to set sizes according to the height of the device. You can set font size, height/width of the div element, etc. Use this inside media queries so that the size of the font or width doesn't get too small when using mobile phones.

answered Nov 20, 2022 at 8:57

TanmayKr

337 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TanmayKr Over a year ago

I think you might have used this. But if not than you try to use this approach

XpoizonEximus Over a year ago

Yes, indeed, I have used this. But mostly I have parent divs which have width 100% and children that have width as a percent from the parent div. These percents are set according to the media response. Also is not just that. The whole layout is changed - I have tables which have a different number of columns depending of windows width etc. It appears as my screen would have less pixels

Collectives™ on Stack Overflow

React.js CSS window width

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related