首页 > 解决方案 > 我在我的投资组合中的平板电脑和移动视图中的布局有问题,并且元素显示不正确

问题描述

我希望有人可以帮助指导我对我的投资组合页面进行故障排除。我目前遇到了一些问题,我不确定为什么或如何处理它们。每当我尝试在已部署链接上的平板电脑/移动视图中查看它们时,布局与使用 npm start 运行实时服务器时完全不同。

第一个问题是关于手机和平板电脑视图中的部分,按列显示每个段落,黑色背景并没有覆盖所有的文本或图像。

第二个问题是即使文本颜色设置为黑色并且联系人标题未显示在页面上,联系人页面也不会在移动设备上显示链接。

它是用 React 制作的。下面将是已部署的链接和指向 github 的链接。

https://refactored-potato.netlify.app/ https://github.com/GSometimes/refactored-potato

我真的很感激任何关于解决这个问题的帮助或指导。

谢谢你。

标签: reactjsdebugging

解决方案


第一条建议是你使用了太多的 CSS,请只使用你真正需要的。您不需要在每个元素上使用每个 css 属性。

您的文本/段落显示在列中,因为它们的父显示样式首先设置为内联,然后是 flex。要么不使用,要么写display: block


推荐阅读