问题
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
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.
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.
回答1:
One option would be in your stylesheet @https://cdn5.bigcommerce.com/r-cd74cb12e5d8e952a812b68d3d60382a14b97a1e/themes/California/Styles/responsive.css
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;}
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.
Good luck!
来源：https://stackoverflow.com/questions/43273590/responsive-design-on-california-responsive-bigcommerce-template