Mobile view for netlify device not working 移动视图对于Netlify设备不起作用

huangapple go评论77阅读模式
英文:

Mobile view for netlify device not working

问题

这个网站的CSS在我的电脑上完全正常,包括桌面版本和通过媒体查询创建的移动版本,但当我在移动设备上查看时,CSS停止工作。网站链接:https://lighthearted-basbousa-3c2db6.netlify.app/,仓库链接https://github.com/hetyug04/portfolioV7。它托管在Netlify上,但以前没有问题。这是我手机上的移动视图。

英文:

The CSS for this website works perfectly fine on my computer, as in the desktop version and the mobile version made by media queries, but when I view it on my mobile device, the CSS just stops working. The website link: https://lighthearted-basbousa-3c2db6.netlify.app/, the repo link https://github.com/hetyug04/portfolioV7. It’s hosted on netlify but I havent had problems with it before. Here is the mobile view from my phone Mobile view for netlify device not working
移动视图对于Netlify设备不起作用

答案1

得分: 1

我修复了这个问题,显然是因为我在样式表中嵌套了CSS样式,一旦我取消嵌套样式,CSS开始在移动浏览器上正常工作。

英文:

I fixed the issue, and apparantely it was because I was nesting my css styling in the stylesheet, once I denested the styles, the CSS started working for mobile browsers

答案2

得分: 0

Your CSS is working on smaller screen sizes.

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

Not sure why it is there and if the removal will completely resolve your issue, but checking this should be your first step.

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

英文:

Your CSS is working on smaller screen sizes.

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

Not sure why it is there and if the removal will completely resolve your issue, but checking this should be your first step.

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

huangapple
  • 本文由 发表于 2023年6月1日 07:14:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/76377813.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定