英文:
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
答案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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论