加利福尼亚自适应BigCommerce模板上的自适应设计 [英] Responsive design on California Responsive BigCommerce template

问题描述

我正在为一些可以应付大多数设计基础知识的人寻找一些简单的指导，但是我在 findmethatwine.com

I am looking for some simple guidance for someone that can cope with most design basics but I am stuck in one area of my website design for findmethatwine.com

Dettop网站正在按我们的要求工作(总是有改进的空间，但是嘿).这是我正在努力解决的一个领域中的响应方.当您将屏幕尺寸缩小到平板电脑或移动设备时，模板的网站徽标.问题是我想将徽标浮动到屏幕左侧(适用于移动设备)，因此这为我们提供了使用屏幕右侧来创建类似内容块的空间，以便进行重要的免费送货，并保证提供以下信息:显示在完整的桌面网站上.

Dektop site is working as we want it (always room to improve but hey). It is the responsive side in one area I am grappling with. The logo for the site when you reduce screen size to tablet or mobile the template responds. The issue is I want to float the logo over to the left of the screen (for mobile devices) so this gives us room to use the right hand side of the screen to create similar blocks of content for the important free shipping and guarantee info that shows up on the full desktop site.

我已经尝试过在网站的CSS中保留所有基本浮动，并且在移动徽标时，它会导致右上角的链接出现样式问题，尤其是标志链接完全被弄乱了.

I have tried all manner basic float left in the css for the site and whilst it moves the logo it causes styling issues for the links in the very top right especially the sign in link which just messes up entirely.

任何有关如何实现这一目标或解决方法的线索都将大有帮助，因为我或我的同事都无法解决这一头痛问题.

Any clues as to how to go about achieving this or a work around would be massively helpful as neither me or my colleague can figure this headache out.

对不起，如果我缺少您需要的任何有用信息，请问.

Sorry if I am missing any useful info you need, just ask.

推荐答案

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

One option would be in your stylesheet @
https://cdn5.bigcommerce.com/r-cd74cb12e5d8e952a812b68d3d60382a14b97a1e/themes/California/Styles/responsive.css

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

goto line 128 and change the rule to

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

然后，您将通过简单的text-align属性来定位徽标，如果将其浮动并从流程中移开，则可能会减少痛苦.

Then you are positioning the logo by a simple text-align property and if may cause you less grief that if you float it and take it out of flow.

祝你好运！

这篇关于加利福尼亚自适应BigCommerce模板上的自适应设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！