CSS根据屏幕分辨率设置不同的对齐方式

Question

这是我正在开发的网站......

http://camerabeanbags.co.uk/test/

这是响应式的，所以如果您使用Web浏览器窗口并更改宽度，您可以看到网站更改。如果你看看你的购物车＆＃39;绿色条右上角的按钮，您可以看到它在右侧对齐。如果更改Web浏览器窗口的宽度，它将与左侧对齐。

如果我希望它只在没有空间让它们彼此相邻时，我怎样才能更改Web浏览器在将其与左对齐之前的宽度。在iPad上，它与左侧对齐但我希望它与右侧对齐。我已尝试使用CSS @media但无法弄清楚这个元素。

请你帮我解决我需要的CSS，所以它只能在一定的屏幕宽度左对齐。

谢谢，

哈维

Answer 1

.kad-topbar-left{
    float: right !important;
}

这样，它在较小的窗口宽度上不会占据全宽。

Answer 2

在您网站的CSS中，已经存在媒体查询，这是导致购物车向左移动的原因。它看起来像这样：

@media (max-width: 767px) {
  #topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu {
    float: none;
  }
}

高于767px，这两个元素的样式为float: left。

如果我们删除该规则，以便元素继续向左浮动，我们可以看到购物车仍然适合一行，搜索范围为417px宽。所以我建议只修改媒体规则中的值（使用更圆的数字）：

@media (max-width: 420px) {
  #topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu {
    float: none;
  }
}