如何在移动设备中使用我的容器的全宽度 [英] How I can use full width of my container in mobile devices

问题描述

I Have Question about container width How I can use full container width on mobile devices When I Open My Site In Mobile Extra Padding space come there?
here's my code

.th-container {
  margin: 0 auto;
  padding: 0 30px;
  max-width: 1200px;
}
@media (max-width: 768px) {
  .th-container {
    padding: 0 25px;
  }
}

#primary.content-area {
  float: left;
  width: 65.7894736842105%;
  max-width: 900px;
}
@media (max-width: 768px) {
  #primary.content-area {
    width: 100%;
    float: none;
  }
}

我把我的问题截图放在下面



在移动设备上

https://prnt.sc/no0va1 [ ^ ]

在PC设备上
https://prnt.sc/no0w54 [ ^ ]



我尝试过：



我改变了我的填充但不起作用

I Put My Problem Screenshot below

On Mobile Device
https://prnt.sc/no0va1[^]
On PC Device
https://prnt.sc/no0w54[^]

What I have tried:

I Have Changed my Padding but does not work

margin: 0 auto;
    padding: 0 10px;
    max-width: 1200px;

I changed the MaxWidth but there was no effect.

我不知道很多CSS可以解决这个问题吗？



我的网站

Gentlexp.com

I Don't Know Much CSS Can Anyone Solve This?

My Website
Gentlexp.com

推荐答案

容器最大宽度：1200px在桌面上如果窗口屏幕大小大于1200px意味着剩余空间将在左侧和右侧，所以它看起来像左边的大空间并且正确。

在移动设备中，您可以100％使用填充，因此占据全宽，左右填充25px，因此与桌面相比，空间看起来更少。

如果你给max-width：100％左右填充25px在桌面也在移动和桌面看起来像是相同的空间。

The container max-width:1200px in desktop if window screen size is greater then 1200px means the remain space will come in left and right side so it look like large space in left and right.
In mobile your are give 100% with padding so it occupy the full width and it take left and right padding 25px so space look like less compare to desktop.
If you give max-width:100% with padding left and right 25px in desktop also in mobile and desktop look like same space.

这篇关于如何在移动设备中使用我的容器的全宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！