reactjs - 我在我的投资组合中的平板电脑和移动视图中的布局有问题,并且元素显示不正确
问题描述
我希望有人可以帮助指导我对我的投资组合页面进行故障排除。我目前遇到了一些问题,我不确定为什么或如何处理它们。每当我尝试在已部署链接上的平板电脑/移动视图中查看它们时,布局与使用 npm start 运行实时服务器时完全不同。
第一个问题是关于手机和平板电脑视图中的部分,按列显示每个段落,黑色背景并没有覆盖所有的文本或图像。
第二个问题是即使文本颜色设置为黑色并且联系人标题未显示在页面上,联系人页面也不会在移动设备上显示链接。
它是用 React 制作的。下面将是已部署的链接和指向 github 的链接。
https://refactored-potato.netlify.app/ https://github.com/GSometimes/refactored-potato
我真的很感激任何关于解决这个问题的帮助或指导。
谢谢你。
解决方案
第一条建议是你使用了太多的 CSS,请只使用你真正需要的。您不需要在每个元素上使用每个 css 属性。
您的文本/段落显示在列中,因为它们的父显示样式首先设置为内联,然后是 flex。要么不使用,要么写display: block
推荐阅读
- c# - 如何在 c# 中将 2d 字符数组拆分为更小的数组?
- html - 如何预加载 svg 精灵?
- arrays - SwiftUI - 列出嵌套数组中的元素
- javascript - 由于无法将字符串转换为数字,日期选择器在 Internet Explorer 中不起作用
- sql - 左连接为整列返回一个值
- github-actions - 如何根据上次提交时修改的文件或目录触发 github 操作作业或工作流
- c++ - 如何禁用指针作为模板类型名
- java - Spring Boot 输出是 No message available , error (status=500)
- javascript - 如何从后端为 wordpress 自定义联系表单 7 插件
- azure - Azure AD Connect 将电子邮件字段解析为新的 UPN