Jump to content

Mobile Footer No Stack

Recommended Posts

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* footer stack */
div#page-section-5e9616bb5601b92fae84e75e {
.span-12>div {
    width: 45% !important;
    float: left !important;
    margin: 0 !important;
}
}
div#block-yui_3_17_2_1_1595924101565_4278 * {
    text-align: left !important;
}
div#block-yui_3_17_2_1_1586896725339_9227 * {
    text-align: 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

Hello,

Thank you for the quick response. 

I tried the code but it flipped the content so the text on the bottom left went to the right and visa versa.

I then went and made sure that the text boxes were adjacent and they stacked again.

Sorry, but can you please send new code injection that doesn't flip the content.

thank you very much!

Link to comment
  • 1 month later...
On 9/18/2020 at 2:34 AM, laurasharp said:

Hey @tuanphan. I tried to insert your custom CSS for a site I am working on, and it didn't work. I am wanting the 2 columns of links to be side by side rather than one on top of the other. Can you please assist? Website is FlyGeorge.com

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f468d625ecd870953366944 .span-8 {
    width: 66.6667% !important;
    float: left !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
  • 1 month later...
57 minutes ago, WORKOUTWOLF said:

Hi @tuanphan 

I'm having a problem with my footer on my website for mobile version. Desktop version is fine, works perfect but as soon as you click on the products page and even on a product the following happens. Any ideas on how to fix this?

Website: www.workout-wolf.co.uk 

Which code did you insert?

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...
  • 7 months later...

Hi,

I'd like to do the opposite and force my site's footer to stack in tablet view (like it does in the mobile view).

@media screen and (max-width:900px) and (min-width:641px) {
div#page-5e271c8e6a01722e9108a62e .col, div#page-5d6b8b4114ca9400018b4d1d .col {
    float: none !important;
    width: auto !important;
}

}

I've had sucess with the code above that @tuanphan posted on another thread on several pages on my site, but my footer doesn't seem to have a page or section id. I've tried various solutions using blocks and divs but nothing has worked yet.

This is my site : https://ayane.uk/

Any help would be very much appriciated.

thanks,

Samantha

Link to comment
On 8/1/2021 at 8:08 PM, Samantha_Rose said:

Hi,

I'd like to do the opposite and force my site's footer to stack in tablet view (like it does in the mobile view).

@media screen and (max-width:900px) and (min-width:641px) {
div#page-5e271c8e6a01722e9108a62e .col, div#page-5d6b8b4114ca9400018b4d1d .col {
    float: none !important;
    width: auto !important;
}

}

I've had sucess with the code above that @tuanphan posted on another thread on several pages on my site, but my footer doesn't seem to have a page or section id. I've tried various solutions using blocks and divs but nothing has worked yet.

This is my site : https://ayane.uk/

Any help would be very much appriciated.

thanks,

Samantha

Add to Design > Custom CSS

/* Tablet stacked footer */
@media screen and (max-width:900px) and (min-width:641px) {
div#footerBlocksTop .col {
    width: 100%;
}
div#footerBlocksTop .image-block {
    width: 30%;
    margin: 0 auto;
}
}

 

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
  • 1 month later...
On 8/3/2021 at 12:58 AM, tuanphan said:
/* Tablet stacked footer */
@media screen and (max-width:900px) and (min-width:641px) {
div#footerBlocksTop .col {
    width: 100%;
}
div#footerBlocksTop .image-block {
    width: 30%;
    margin: 0 auto;
}
}

Hello! @tuanphan I have the same problem as Samatha, and I can't figure out how to stack my footer elements on tablet view. 

My site is part of the brine family of SQUARESPACE 7.0. and it doesn't have a site page ID for the footer. When I use the ID identifier, all I see are blocks.

I am looking at the code you sent, but I have difficulty adapting it to my site. It looks like the top part tells the blocks to go 100% and the bottom to resize the image. I used the code like it is and changed it as well, but it doesn't work. :{

My site is www.osseumjewelry.com

Any help is significantly appreciated. :)

Link to comment
On 9/29/2021 at 8:42 PM, osseum said:

 

Hello! @tuanphan I have the same problem as Samatha, and I can't figure out how to stack my footer elements on tablet view. 

My site is part of the brine family of SQUARESPACE 7.0. and it doesn't have a site page ID for the footer. When I use the ID identifier, all I see are blocks.

I am looking at the code you sent, but I have difficulty adapting it to my site. It looks like the top part tells the blocks to go 100% and the bottom to resize the image. I used the code like it is and changed it as well, but it doesn't work. :{

My site is www.osseumjewelry.com

Any help is significantly appreciated. :)

Hi,

Sorry for the delay. Recently overloaded.

Can you desribe the desired footer layout on mobile? I can check & give code 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

@tuanphanThanks for getting back to me.
The website is live if you want to see it. www.osseumjewelry.com On mobile, the footer looks good, and all elements appear over each other in a column. However, on tablet view, the elements compress into two thin columns that don't look so good. I am trying to apply a media query that will tell the site to align them in a column on a tablet view. My problem is that I don't have a page ID to make it easy. 
Thanks!
 

Link to comment
On 10/4/2021 at 1:34 AM, osseum said:

@tuanphanThanks for getting back to me.
The website is live if you want to see it. www.osseumjewelry.com On mobile, the footer looks good, and all elements appear over each other in a column. However, on tablet view, the elements compress into two thin columns that don't look so good. I am trying to apply a media query that will tell the site to align them in a column on a tablet view. My problem is that I don't have a page ID to make it easy. 
Thanks!
 

Add to Design > Custom CSS

/* Tablet-Footer */
@media screen and (max-width:900px) and (min-width:641px) {
div#block-yui_3_17_2_1_1632178876057_24132+.row>.col {
    width: 100%;
}
div#block-yui_3_17_2_1_1632178876057_24132+.row>.span-3:nth-child(2) {
    display: none;
}
div#block-yui_3_17_2_1_1632872740995_12598 {
    display: none;
}
div#block-yui_3_17_2_1_1632872740995_34737 {
    display: none;
}
}

image.thumb.png.eae3a74685dba8d8920e74f52e087e24.png

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
  • 5 months 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.