css - California Responsive BigCommerce 模板的响应式设计

Question

我正在为能够处理大多数设计基础知识的人寻找一些简单的指导，但我被困在网站设计的一个区域 findmethatwine.com

Dektop 站点正在按照我们的要求运行(总是有改进的空间，但是嘿)。这是我正在努力解决的一个领域的响应方面。当您将屏幕尺寸缩小到平板电脑或移动设备时，网站的 Logo 会响应。问题是我想将 Logo float 到屏幕左侧(对于移动设备)，这样我们就可以使用屏幕右侧为重要的免费送货和保证信息创建类似的内容 block 出现在完整的桌面版网站上。

我已经在网站的 css 中尝试了所有基本的 float 方式，当它移动 Logo 时，它会导致右上角的链接出现样式问题，尤其是登录链接，它完全搞砸了。

任何关于如何实现这一目标或变通办法的线索都会非常有帮助，因为我或我的同事都无法解决这个令人头疼的问题。

很抱歉，如果我遗漏了您需要的任何有用信息，请直接询问。

Answer 1

一个选项将在您的样式表中@
https://cdn5.bigcommerce.com/r-cd74cb12e5d8e952a812b68d3d60382a14b97a1e/themes/California/Styles/responsive.css

转到第 128 行并将规则更改为

.header-logo-mobile{ display:block; margin:0 auto; display:table; width:96%; text-align:left; padding:20px 0 16px;}  

然后您将通过一个简单的文本对齐属性定位 Logo ，如果您将其 float 并使其脱离流程，则可能会减少您的痛苦。

祝你好运!