Jump to content

Footer text block on Mobile

Recommended Posts

Add to Home > Design > Custom CSS

/* footer links side by side */
@media screen and (max-width:767px) {
div#page-section-5f5a8ef3230b5552772b0d6d .span-12>.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f5a8ef3230b5552772b0d6d .span-12>.row>.span-3 {
    clear: left;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
On 9/24/2020 at 7:59 PM, tuanphan said:

Add to Home > Design > Custom CSS


/* footer links side by side */
@media screen and (max-width:767px) {
div#page-section-5f5a8ef3230b5552772b0d6d .span-12>.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f5a8ef3230b5552772b0d6d .span-12>.row>.span-3 {
    clear: left;
}
}

 

Hi Tuan really hoping you can help me with almost the exact same thing! My site is https://www.nuligoods.com/ and I am trying to have columns in my footer as well. On desktop it looks just how I want it to:

image.thumb.png.273425125e64bd616172fbf62a390289.png

 

But on mobile it stacks it like this:

image.png.48740169291bb18e0043b12cb36ad923.png

 

I'm trying to make it like this, with my four sections of text in two columns:

image.png.0344a2323299b418e634898416a640be.png

I so appreciate any help you can give I've tried so many things but I can't get it to work!!

Link to comment
  • 2 weeks later...

I have the same issue as above. On top of my footer I have two links ("prisliste" and "personvernerklæring"). They are correct in desktop view (side-by-side) but in the mobile view they appear stacked upon each other. I tried to get the above code to work on my site, but I wasn't able to do that. Help please 🙂

finn1pt.squarespace.com (password: access)

Link to comment
On 1/2/2021 at 3:05 PM, Leah007 said:

Hi Tuan really hoping you can help me with almost the exact same thing! My site is https://www.nuligoods.com/ and I am trying to have columns in my footer as well. On desktop it looks just how I want it to:

image.thumb.png.273425125e64bd616172fbf62a390289.png

 

But on mobile it stacks it like this:

image.png.48740169291bb18e0043b12cb36ad923.png

 

I'm trying to make it like this, with my four sections of text in two columns:

image.png.0344a2323299b418e634898416a640be.png

I so appreciate any help you can give I've tried so many things but I can't get it to work!!

Sorry, I don't see the notification

You want, on mobile

Logo

Column 1. ..............Column 2

Contact .................Instagram

FAQ...........................Pinterest

Shipping................Text

Returns

Is this right?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/11/2021 at 2:21 PM, m_lundberg said:

I have the same issue as above. On top of my footer I have two links ("prisliste" and "personvernerklæring"). They are correct in desktop view (side-by-side) but in the mobile view they appear stacked upon each other. I tried to get the above code to work on my site, but I wasn't able to do that. Help please 🙂

finn1pt.squarespace.com (password: access)

Add to Home > Design > Custom CSS

/* Footer text */
@media screen and (max-width:767px) {
div#page-section-5f85c8730b2e96045323118d>.row:nth-child(2)>.span-6 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f85c8730b2e96045323118d>.row:nth-child(2)>.span-6 .html-block {
    padding: 0;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


/* Footer text */
@media screen and (max-width:767px) {
div#page-section-5f85c8730b2e96045323118d>.row:nth-child(2)>.span-6 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f85c8730b2e96045323118d>.row:nth-child(2)>.span-6 .html-block {
    padding: 0;
}
}

 

Again, thank you very much tuanphan!

Link to comment
  • 2 weeks later...
On 9/30/2020 at 8:12 AM, tuanphan said:

It seems you solved. Do you still need help on this?

 

On 5/5/2020 at 5:05 AM, tuanphan said:

h1 {
	font-family: monospace;
}
h2 {
	font-family: proxima-nova;
}
p {
	font-family: futura-pt;
}

Do similar for other elements

 

On 1/12/2021 at 5:59 PM, tuanphan said:

Sorry, I don't see the notification

You want, on mobile

Logo

Column 1. ..............Column 2

Contact .................Instagram

FAQ...........................Pinterest

Shipping................Text

Returns

Is this right?

Hi Tuan! Sorry now I didn't see the notification for a while. If you can still help me that would be amazing! My site url is https://www.nuligoods.com/

I currently have each pair of text (contact/FAQ, shipping/returns, etc) setup as seperate columns of texts and I love how it looks on desktop. I just can't figure out how how to set it up for mobile so two of the text blocks will fit side by side.  

I'd like it to look like:

1380388686_Desiredlayout.jpg.bcdf3ee68dc787e8303410f604c7035b.jpg

 

Instead of the current footer layout below:

983358991_currentlayout.jpg.1bb139a8fe5b303af74015fe4a9cc0a9.jpg

 

Thank you so much!!

 

Link to comment
  • 2 weeks later...

Hiya @tuanphan

 

I would like to do something similar to the above, but I’m having trouble reworking the code. 

 

1. I would like the “About” & “Support” sections to be side by side, not to stack.

 

2. For the -> button to be next to the email address field, not to stack.

 

3. For the three rows of content in the footer: (a) about/support, (b) newsletter, (c) logo to have less and equal spacing between them.

 

Thanks so much!

Site: https://greyhound-alpaca-f863.squarespace.com

Password: alpaca

Screen Shot 2021-02-03 at 17.26.42.png

Link to comment
On 1/22/2021 at 1:40 AM, Leah007 said:

 

 

Hi Tuan! Sorry now I didn't see the notification for a while. If you can still help me that would be amazing! My site url is https://www.nuligoods.com/

I currently have each pair of text (contact/FAQ, shipping/returns, etc) setup as seperate columns of texts and I love how it looks on desktop. I just can't figure out how how to set it up for mobile so two of the text blocks will fit side by side.  

I'd like it to look like:

1380388686_Desiredlayout.jpg.bcdf3ee68dc787e8303410f604c7035b.jpg

 

Instead of the current footer layout below:

983358991_currentlayout.jpg.1bb139a8fe5b303af74015fe4a9cc0a9.jpg

 

Thank you so much!!

 

Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
23 hours ago, donforello said:

Hiya @tuanphan

 

I would like to do something similar to the above, but I’m having trouble reworking the code. 

 

1. I would like the “About” & “Support” sections to be side by side, not to stack.

 

2. For the -> button to be next to the email address field, not to stack.

 

3. For the three rows of content in the footer: (a) about/support, (b) newsletter, (c) logo to have less and equal spacing between them.

 

Thanks so much!

Site: https://greyhound-alpaca-f863.squarespace.com

Password: alpaca

Screen Shot 2021-02-03 at 17.26.42.png

Add to Design > Custom CSS

/* footer mobile */
@media screen and (max-width:767px) {
div#page-section-601974e7bc397811526a08e0 .span-12>.row .col:nth-child(n+2) {
    width: 50% !important;
    float: left !important;
}
.newsletter-form-body {
    display: flex;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
14 hours ago, donforello said:

Hiya @tuanphan,

Thanks for getting back to me. 

The code you provided partially works (I've uploaded an image for your viewing), the top section is perfect, but the newsletter section is now reduced to 50%, I would like it to span the entirety of the row.

Thanks again, your help is very much appreciated. 

Screen Shot 2021-02-05 at 17.31.11.png

I think this will require both CSS/JavaScript code. Do you use Personal or Business Plan?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/21/2021 at 10:40 AM, Leah007 said:

 

 

Hi Tuan! Sorry now I didn't see the notification for a while. If you can still help me that would be amazing! My site url is https://www.nuligoods.com/

I currently have each pair of text (contact/FAQ, shipping/returns, etc) setup as seperate columns of texts and I love how it looks on desktop. I just can't figure out how how to set it up for mobile so two of the text blocks will fit side by side.  

I'd like it to look like:

1380388686_Desiredlayout.jpg.bcdf3ee68dc787e8303410f604c7035b.jpg

 

Instead of the current footer layout below:

983358991_currentlayout.jpg.1bb139a8fe5b303af74015fe4a9cc0a9.jpg

 

Thank you so much!!

 

@tuanphan this is what I'm desperate for help on. Thanks so much in advance!

Link to comment
  • 3 months later...

Hi @tuanphan!

 

I've tried the code as well, and changed  the "div#page-section" but didn't have any affect. I which to have the 'menu' & 'Følg os', side by side 

https://mayflower-quillfish-4hkh.squarespace.com/

Do you have any idea? 

Many thanks!

Simon

 

PS: If you now how to make the logo smaller in footer too, that would be highly appreciated.

Thanks

 

Screenshot 2021-06-04 at 10.46.37.png

Edited by SimonJensen
Link to comment
6 hours ago, SimonJensen said:

Hi @tuanphan!

 

I've tried the code as well, and changed  the "div#page-section" but didn't have any affect. I which to have the 'menu' & 'Følg os', side by side 

https://mayflower-quillfish-4hkh.squarespace.com/

Do you have any idea? 

Many thanks!

Simon

 

PS: If you now how to make the logo smaller in footer too, that would be highly appreciated.

Thanks

 

Screenshot 2021-06-04 at 10.46.37.png

Your site is private. Can you setup password & share url again? WE can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
21 hours ago, SimonJensen said:

Hi @tuanphan ,

 

Sorry, try this:

https://mayflower-quillfish-4hkh.squarespace.com/

Pass: 12345

Add to Design > Custom CSS

/* Mobile footer */
@media screen and (max-width:767px) {
div#page-section-60af817904e0b95f6204c39f .span-6 .span-3 {
    width: 40% !important;
    float: left !important;
}
div#page-section-60af817904e0b95f6204c39f .image-block {
    width: 50% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.