gbt64 Posted June 20 Posted June 20 For the life of me, I can't figure out how to get my logo image centered on mobile. Looks just slightly off in edit mode, but when I view the live site on my Iphone 12 Pro Max, (1) it's off to the right in portrait mode and (2) WAY off to the right in landscape mode. I have a bunch of css that I used to - for mobile only (1) force a subscribe button to appear in the header, and above the header image (2) make the hamburger menu appear under the nav menu, plus some other mobile styling things. Not sure if one or more of the current code snippets is creating the problem, but I've tried to remove them one by one, and - while it sometimes screws other things up - it doesn't center the logo. See below for the site's css plus attached (1) screenshots of all other mobile header-related settings and (2) what I see on my Iphone. Thanks in advance for your help. /* MOBILE nav menu font size */ .header-menu-nav-item a { font-size: 15px; } /* MOBILE nav menu appearance */ @media screen and (max-width:767px) { .header--menu-open .header-menu .header-menu-bg { background-color: rgba(247,239,238,0.8 ); } } /* nav menu - stop stacking */ /* MOBILE chg spacing - mobile menu links */ .header-menu { padding:0px 30px; } .header-menu-nav-item { margin: 20px 0; } /* MOBILE nav menu vertical align top */ [data-folder="root"]>.header-menu-nav-folder-content { justify-content: flex-start; } /* MOBILE - make header button show */ @media screen and (max-width:767px) { .header-actions.header-actions--right { display: block !important; } } .header-actions-action.header-actions-action--cta { display: block; position: relative; left: -40px; } /* MOBILE make header button smaller on mobile*/ @media screen and (max-width:767px) { a.sqs-block-button-element--large.sqs-block-button-element { font-size: 8px; } } /* MOBILE - fix mobile header height?*/ @media screen and (max-width:767px) { .tweak-fixed-header .header .header-announcement-bar-wrapper { padding-top: 1vw !important; padding-bottom: 1vw !important; } } /* MOBILE - move burger menu under mobile logo */ div.header-display-mobile { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /*MOVING THE MOBILE MENU BUTTON IN SQUARESPACE 7.1 CLOSER TO THE LINKS*/ //mobile nav menu vertical align top// [data-folder="root"]>.header-menu-nav-folder-content { justify-content: flex-start; } @media only screen and (max-width: 767px) { p, h1, h2, h3, h4 { text-align: center !important } } // Center Site Title // @media only screen and (max-width: 640px) { .header-title-text { width: 120% !important; text-align: center !important; } } /* Header Nav Width Adjustment */ .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 2 0 100%; } .header-layout-branding-center-nav-center .header-actions--right { position: relative; right: 4vw; } /* NEWSLETTER block formatting */ .newsletter-form-field-element { background: #ffffff !important; border: solid 1px #000000 !important; } /* more more */ /* Remove newsletter header padding globally */ .newsletter-block .newsletter-form-header-description p { display: none } /* newsletter padding - input field height and button padding */ .newsletter-block {padding-top: 0; padding-bottom: 0} .sqs-block-newsletter .newsletter-form-field-element { padding-top: 4px !important; padding-bottom: 4px !important; } button.newsletter-form-button.sqs-system-button { padding-top: 6px !important; padding-bottom: 6px !important;
Solution Lesum Posted June 20 Solution Posted June 20 @gbt64 Hi! There are some errors in the code that are causing the issues. Both the header logo and buttons aren't centered. Try adding the following code under Custom CSS, below all the code you've added so far. @media only screen and (max-width: 767px) { #header .header-title-nav-wrapper { flex: 1 0 100% !important; margin-left: unset !important; } #header .header-mobile-logo { padding-left: 0px !important; } #header .header-actions-action.header-actions-action--cta { left: unset !important; } #header .header-layout-branding-center-nav-center .header-actions--right { display: flex !important; justify-content: center !important; right: unset !important; } } Let me know how it goes. Thanks! gbt64 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee?
Lesum Posted June 20 Posted June 20 @gbt64 Thank you! If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee?
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment