Mobile view for Netlify devices not working properly

Question

The CSS for this site works fine on my computer, as it does in the desktop version and the mobile version made with media queries, but when I view it on a mobile device, the CSS stops working. Website link: https://lightheart-basbousa-3c2db6.netlify.app/, repo link https://github.com/hetyug04/portfolioV7. It's hosted on netlify but I haven't had issues with it before. This is the mobile view on my phone

Answer 1

Your CSS is running on a smaller screen size.

Using the browser's dev tools, I can see that you have a media query with display: none on the intro class. This affects screens smaller than or equal to 1015 pixels. If you change or delete a media query, your output will change.

Not sure why it exists and if removing it will completely solve your problem, but checking this should be your first step.

There are some other issues like overflow and incorrect width, maybe you want to check out the Mobile-first design approach.

Answer 2

I solved the problem, apparently it was because I nested the CSS styles in the stylesheet and once I unnested the styles, the CSS started working on mobile browsers