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

Footer text block on Mobile


arielestulin

Question

Recommended Posts

  • 0

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.

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
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
  • 0

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

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

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
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
  • 0
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
  • 0

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

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

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

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

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

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

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

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
14 hours ago, SimonJensen said:

Amazing! THANK YOU!

How does it work with multiple rows? And small logo too? 

See this: 

https://plum-chinchilla-yp7r.squarespace.com/

pass: 12345

Thanks

Simon

Hi. Which rows/logo?

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
On 6/25/2021 at 8:08 PM, SimonJensen said:

Hi @tuanphan, in footer.. The logo is massive and footer is really long.

Can the logo be smaller?

And can the 'sections' be set in row when there's mulitple and would need to stack? 

Screenshot 2021-06-25 at 15.05.35.png

Add to Design > Custom CSS. You want text links side by side?

/* Footer */
@media screen and (max-width:767px) {
/* logo size */
div#block-yui_3_17_2_1_1602349899535_30758 {
    width: 30%;
}
}

 

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