在移动视图中有太多重要标签的宽边距

Question

我的网站上的css有问题。它在桌面视图中看起来很好，但在移动视图中有一个很大的右边距会扭曲侧边栏。这是指向该页面的链接。 https://www.bearcountrybees.com/store/

如果您对我应该采取的措施有任何意见，那将是非常棒的。谢谢！

Answer 1

可能是因为您使用important为包装器宽度设置了一个值，对于移动设备屏幕，它应该是100％，并尽量避免使用important原因来覆盖它们我们会这样做必须使用更多important＆＃39; s.Like，

@media only screen and (max-width: 767px) {
 .bSe right,
 .sAsCont .sAs {
   width: 100%;
 }
}

如果真的有必要使用important即

@media only screen and (max-width: 767px) {
 .bSe right,
 .sAsCont .sAs {
   width: 100% !important;
 }
}

Answer 2

从我看到你没有使用像BootStrap这样的任何框架为你的网站。从下次开始，请使用一个框架，它将为您解决很多问题。

你可以在这样的移动屏幕上将侧边栏加宽到全宽。

@media only screen and (max-width: 767px) {
.sAs {
   width: 100% !important;
 }
}

Answer 3

你在 .bSeCont .bSe 上应用了太多的宽度，最适合做CSS的方法是，最后一个是导致你的页面有很大余量的规则右边是.bSeCont .bSe {宽度：67％！重要;在第409行。解决这个问题的一种方法是让你对你的css非常具体，以便能够覆盖...尝试这个......

.cnt .bSeCont .bSe.right { width: 100%!important; }