【问题标题】:Responsive design on California Responsive BigCommerce template加州响应式 BigCommerce 模板上的响应式设计
【发布时间】:2017-04-07 19:30:09
【问题描述】:

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

Dektop 网站正在按照我们的意愿运行(总是有改进的余地,但是嘿)。这是我正在努力解决的一个领域中反应灵敏的一面。当您将屏幕尺寸缩小到平板电脑或移动设备时,模板会响应该网站的徽标。问题是我想将徽标浮动到屏幕左侧(对于移动设备),这样我们就有空间使用屏幕右侧创建类似的内容块,以实现重要的免费送货并保证信息显示在完整的桌面网站上。

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

任何关于如何实现此目标或解决方法的线索都将非常有帮助,因为我或我的同事都无法解决这个令人头疼的问题。

抱歉,如果我遗漏了您需要的任何有用信息,请尽管询问。

【问题讨论】:

  • 你应该提供一些代码来说明它现在是如何完成的以及你已经尝试过什么

标签: css responsive-design themes bigcommerce


【解决方案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;}  

然后,您通过一个简单的 text-align 属性来定位徽标,如果您将其浮动并使其脱离流动,则可能会减少您的悲伤。

祝你好运!

【讨论】:

  • 亚斯大卫。简单得令人尴尬(在此处插入脸红表情符号)。证明一些正规的 CSS 教育会对我有很大帮助。
  • 如果这解决了你眼前的问题,那就太好了,谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-03-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多