Logo Alignment in 7.1

I am trying to fix the alignment of the logo on my site so that it stays centered on mobile. I have built so many Squarespace sites previously but this is my first using 7.1. I find it not user-friendly whatsoever. I think I have chosen it so that it's a centered header; yet any time I view it on not a large desktop window, it aligns to the left (on the larger desktop windows it does indeed center).

Any help would be appreciated!

Can you share link to your site?

@tuanphan Here is the link: https://www.rosenberg-russell.com/  .... thanks in advance!

19 hours ago, IEHR said:

@tuanphan Here is the link: https://www.rosenberg-russell.com/  .... thanks in advance!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-title-logo {
    text-align: center;
}
}

@tuanphan that worked, thank you! 

On 3/3/2020 at 12:59 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-title-logo {
    text-align: center;
}
}

 

I have increased the logo size on my site using this code;

.header-title-logo img{
max-height: 850px !important;
max-width: 850px !important;
  
}

On desktop my logo shows centrally but on laptop it isn't central

https://coral-pufferfish-7fhr.squarespace.com/ Password: romshed

All of this worked for me! Thanks so much @tuanphan  !

Hi @tuanphan Thanks for this snippet! I used it on a client site as well, but it's only center aligned within the header-title-logo div and not centered on the Width of the full header? So it looks a little wonky. Any ideas for how to fix this? https://celery-jaguar-rhrc.squarespace.com/  pw = aqp

Replace that code with this:

@media screen and (max-width:799px) {
.header-title-logo {
    text-align: center;
    margin-left: 50px;
}
}

1 hour ago, rwp said:

Replace that code with this:

@media screen and (max-width:799px) {
.header-title-logo {
    text-align: center;
    margin-left: 50px;
}
}

 

what can i add to make this work for aligning logo in the middle of the header like this 

I need a link to your webpage to check

On 7/13/2020 at 4:38 PM, rwp said:

I need a link to your webpage to check

is https://jennypetit.com

The logo is centered now. Are you trying to split the menu in half on each side of the logo?

5 minutes ago, rwp said:

The logo is centered now. Are you trying to split the menu in half on each side of the logo?

yes thats what i want split the menu 

thnaks in advance if you help me with this

I'm not sure you can without a bunch of javascript.

@tuanphan do you know?

aww ok i thought so sense you are here @rwp is it a way to align the sign up form horizontal instead of vertical like side by side name and email 

rather than one on top of the other.

1 hour ago, rwp said:

I'm not sure you can without a bunch of javascript.

@tuanphan do you know?

You can use JavaScript to clone left menu, then append it to right.

Then use CSS to hide half of items in both menus.

1 hour ago, jennypetit said:

aww ok i thought so sense you are here @rwp is it a way to align the sign up form horizontal instead of vertical like side by side name and email 

rather than one on top of the other.

[data-form-id="5ef104cf248f58611c7849aa"] .field-list.clear {
    display: flex;
}

[data-form-id="5ef104cf248f58611c7849aa"] .form-item.field.email {
    margin-left: auto;
}

[data-form-id="5ef104cf248f58611c7849aa"] .form-item {
    width: 48%;
}

15 hours ago, tuanphan said:

You can use JavaScript to clone left menu, then append it to right.

Then use CSS to hide half of items in both menus.

wow seams well complicated is for a client so i might have to pass I´m not sure how to do java script 

but if you think is no that complicated ill apretiate your help tho I think many others might find this helpfull

Thanks

15 hours ago, rwp said:

[data-form-id="5ef104cf248f58611c7849aa"] .field-list.clear {
    display: flex;
}

[data-form-id="5ef104cf248f58611c7849aa"] .form-item.field.email {
    margin-left: auto;
}

[data-form-id="5ef104cf248f58611c7849aa"] .form-item {
    width: 48%;
}

 

 The code is no doing anything i try  in the css and adddign a code box under the form and nothing happens 

Did you put it in design -> custom css?

Thats perfect @rwp Thank you so much!

29 minutes ago, rwp said:

Did you put it in design -> custom css?

Yes! but still nothing happened

3 minutes ago, emworkshop said:

Thats perfect @rwp Thank you so much!

did it work for you the code?

13 minutes ago, jennypetit said:

did it work for you the code?

 

That was something different we were working on. I will look into your page now.