容器问题 - React 和样式化组件

Question

我做了一个部分，html 标签和正文标签就是这样

HTML Tag

Body Tag [节标记] (http://prntscr.com/oekku9)

该部分也没有尺寸

现场版：https://codesandbox.io/s/thirsty-thunder-mu1ss

我想让产品在中心的中心

Answer 1

这是我的解决方案CodeSandbox

基本上问题出在您的 header 组件中，

在小型设备上，导航按钮没有堆叠，这使得 header 比屏幕宽度更宽。

通过添加

修复了导航按钮的堆叠

@media (max-width: 400px) {
    flex-direction: column;
}

包括其他小修复，移除 header 上的大内边距 padding: 6.9rem 31.9rem; 并在小型设备上用 15px 内边距替换它

还删除了小屏幕上 margin-left 个单独的导航按钮

要使产品居中对齐，请评论

@media screen and (max-width: 400px) {
    /* align-items: flex-start; */  comment this line 
    justify-content: center;
    flex-direction: column;
}

来自 product/styles > 容器

此特定行将您的产品在小型设备上向左对齐

容器问题 - React 和样式化组件

Problem with Containers - React and Styled Components

css

reactjs

styled-components