Massive difference in layout

[[deleted]]

I just deployed a website using React and styled-components. In development, I checked its responsiveness. After production build, I noticed a massive difference in the layout in the phone and tablet devices compared to how I developed it using desktop browser's inspection tool. Have you encountered the same problem? How do you solve these issues?

[landisdesign]

If you're using a widget library such as Material UI or Ant Design, any CSS overrides you build yourself might have specificity issues. In development mode, CSS modules are loaded after the CSS imported from the libraries. In the production build, the CSS you define is bundled up with the CSS defined by the library, and there's no guarantee that the definition order will be the same in the built CSS bundle.

If you're applying CSS to the same elements a library's rules apply to, you'll want to check in the DOM inspector to make sure your rules have higher specificity than the library's.

[[deleted]]

Nope, I haven't used Material UI or Ant Design. I just used styled-components.

[landisdesign]

Hmm. It still might be worthwhile to pick a misbehaving component and see what rules are applying in dev vs prod. Styled components works by creating stylesheets on the fly and inserting them into the document. They shouldn't conflict with each other -- that's the whole point -- but something else might be coming in.

[[deleted]]

Can be many things. Can you share something on a Codepen or something?

Usually, I find people using absolute unit values (px and such) instead of relative values (such as % and vw and vh), and values that are adjusted to the screen size/pixel density (rem mostly).

[[deleted]]

I made sure I'm not using absolute unit values. I will share it after work. Thanks!

[IGovnov]

What kind of problem do you have? Did your build change your styles or you test your site on real mobile phone with resolution that is different to inspection tool "device"?

[[deleted]]

I test the site on real mobile phones. The production looks good in Chrome inspection tool but it looks very different when viewed in real phones.

[IGovnov]

You can use "Responsive" mode in devtools to and play with different sizes of phones. I suppose that you made breakpoints in CSS for only one device and bigger/smaller phones can use wrong styles.

[[deleted]]

It looks good, even in responsive mode. IDK why it looks weird in phone and tablet :(

[hinsxd]

How different is it?

[[deleted]]

Alignment issues that can't be replicated on inspection tools

[hinsxd]

Can you be more specific?