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

Question

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!

 

Share this post


Link to post

Recommended Posts

  • 0

Can you share link to your site?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0

Replace that code with this:

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

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
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 

Screenshot 2020-07-13 at 13.47.06.png

Share this post


Link to post
  • 0

I need a link to your webpage to check


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0

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

@tuanphan do you know?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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.

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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%;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0
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 

Share this post


Link to post
  • 0

Did you put it in design -> custom css?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@jennypetit Can you please post a screen shot of the custom css area with the code. When I apply the code on my end it works like this:

image.thumb.png.c48cdd7e8a90cdc1ba02e5b948c47ca1.png


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

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...