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

Tremont logo and social icons not centered on larger screens


MeagenH

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
Link to comment
  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

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;
}


Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@meagen edit last code to


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


Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 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.

Link to comment
  • 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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...