Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
MeagenH

Tremont logo and social icons not centered on larger screens

Question

I'm using the Tremont template and have managed to get the logo and social icons centered with some CSS however, if you view the site on a larger monitor (24"+) the logo and social icons are no longer centered. Any ideas how to make it consistent over multiple screen sizes?

View the site demo here - https://rumemockup.squarespace.com/home PASSWORD: RUME

Thank you!

Edited by meagen
Initial Revision

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 0

@meagen try removing these code


.site-branding h1 img {
   position: absolute;
   left: 36%
}

@media screen and (max-width: 640px) {
   .site-branding h1 img {
       position:absolute;
       left: 23%;
       margin-top: 50px
   }
}

.tweak-nav-style-standard.tweak-display-social-icons.tweak-social-icons-on-right:not(.move-social) .header-social-icons-right {
   position: absolute;
   left: 29%;
   margin-top: -80px !important
}

@media screen and (max-width: 640px) {
   .tweak-nav-style-standard.tweak-display-social-icons.tweak-social-icons-on-right:not(.move-social) .header-social-icons-right {
       position:absolute;
       left: 17% !important;
       margin-top: -20px !important
   }
}

@media screen and (max-width: 1920px) {
   .header-social-icons-with-nav .sqs-template-social-icons,.header-social-icons-right .sqs-template-social-icons {
       margin-left:-100px
   }
}

and add this code to Home > Design > Custom CSS


/* Move social icon top, logo bottom */
header#siteHeader {
   display: flex;
   flex-direction: column-reverse;
}
/* Center Social Icons */
.header-social-icons-right {
   margin-left: unset !important;
}



You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

Forum: I usually answer questions at 2pm - 5pm EST

How to Setup Password & Share URL - Squarespace Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

@meagen edit last code to


.header-social-icons-right {
   margin-left: unset !important;
   visibility: visible !important;
   right: unset !important;
}



You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

Forum: I usually answer questions at 2pm - 5pm EST

How to Setup Password & Share URL - Squarespace Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

Hi @tuanphan I seem to be having the exact same problem. Did you ever happen to find a solution for the centered logo being ever so slightly off center? Please see attached image which shows the centre line (blue) and the logo ever slightly off-center. Please help!

Capture.JPG

Share this post


Link to post
  • 0
2 hours ago, JakeMagnus said:

Hi @tuanphan I seem to be having the exact same problem. Did you ever happen to find a solution for the centered logo being ever so slightly off center? Please see attached image which shows the centre line (blue) and the logo ever slightly off-center. Please help!

 

Please share site url to check.


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

Forum: I usually answer questions at 2pm - 5pm EST

How to Setup Password & Share URL - Squarespace Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

Thanks @tuanphan, the site is https://capybera-tangerine-g3d5.squarespace.com/en/projects. (pw: STUCHBURY13) Also wondering if you know anything about adding a language switcher button? I have created all the necessary multilingual pages and they are working properly ie spanish pages have the spanish navigation bar and vice versa with english but just can't seem to create the button to toggle between them.

Share this post


Link to post
  • 0

Hi @tuanphan I actually managed to get the language switcher to appear and ALMOST working. The english button works perfectly but when I click "Spanish" It takes me to the spanish version but the home index page won't load.

Share this post


Link to post
  • 0
2 hours ago, JakeMagnus said:

Hi again, @tuanphan really sorry to keep bothering you! I got the language switcher working great but just wondering if you could check why the logo isn't quite centered

 

Your site is private. Please setup password  & share url again.

See my signature if you dont know how to.


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

Forum: I usually answer questions at 2pm - 5pm EST

How to Setup Password & Share URL - Squarespace Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...