MadaRekcorc Posted May 7, 2022 Share Posted May 7, 2022 Hello, I'm trying to make my site logo bigger (or wider more to the point!) than Squarespace 7.1 allows in the header customisation settings. So I have tried using this custom CSS code: .header-title-logo img { max-width: 700px; } When I try using this custom CSS to get the logo to the correct size - the logo is made the correct size but goes off to the right instead of staying centred!? How can I keep it centred all the time on desktop? Attached are screen grabs before and after I apply this custom CSS Can anyone help? Will be eternally grateful Thanks a million Link to comment
humxahafeex Posted May 7, 2022 Share Posted May 7, 2022 3 hours ago, MadaRekcorc said: Hello, I'm trying to make my site logo bigger (or wider more to the point!) than Squarespace 7.1 allows in the header customisation settings. So I have tried using this custom CSS code: .header-title-logo img { max-width: 700px; } When I try using this custom CSS to get the logo to the correct size - the logo is made the correct size but goes off to the right instead of staying centred!? How can I keep it centred all the time on desktop? Attached are screen grabs before and after I apply this custom CSS Can anyone help? Will be eternally grateful Thanks a million Hi , Will you please share website link so we can guide you in a better way. Link to comment
MadaRekcorc Posted May 7, 2022 Author Share Posted May 7, 2022 Hi there, https://koala-flugelhorn-fz2d.squarespace.com Many thanks! Link to comment
tuanphan Posted May 9, 2022 Share Posted May 9, 2022 On 5/8/2022 at 5:37 AM, MadaRekcorc said: Hi there, https://koala-flugelhorn-fz2d.squarespace.com Many thanks! Add to Design > Custom CSS /* Logo size */ .header-title-logo img, .header-title-logo a { max-height: 400px !important; } .header-display-desktop { flex-direction: column; justify-content: center !important; } .header-title-nav-wrapper { flex-direction: column; } .header-title { width: 70% !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MadaRekcorc Posted May 9, 2022 Author Share Posted May 9, 2022 Thank you! This seems to work perfectly for the desktop site, however when I preview in mobile - the logo goes really small and I'm unable to adjust its size with the slider within logo options? Would I need further CSS to adjust the mobile logo size independently? On the mobile version: I would also ideally have the burger sit underneath the site title (centred) and the site title be centred across the top... is there a way of doing this with CSS? Thank you so much! Link to comment
MadaRekcorc Posted May 9, 2022 Author Share Posted May 9, 2022 Ahh - Sorry, just noticed this CSS code you have kindly supplied throws the position social Icons and menu out on the DESKTOP version! See attached It would be great if I could scale the logo whilst maintaining the integrity of the social icons and menu positions as seen in the 'before' still... Thanks so much! Link to comment
tuanphan Posted May 13, 2022 Share Posted May 13, 2022 With mobile layout, use this @media screen and (max-width:767px) { /* Logo size */ .header-title-logo img, .header-title-logo a { max-height: 400px !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment