Mobile Footer No Stack

Site URL: https://www.213.design

Can you please help me make it so the footer text blocks don't stack on mobile. 

Thank you!

(site password: 213)

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;
}
}

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!

213 is incorrect password

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

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;
}
}

Thank you @tuanphan !

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 

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?

Hi @tuanphan I've tried using all the codes but none of them are working?

On 11/19/2020 at 5:11 PM, WORKOUTWOLF said:

Hi @tuanphan I've tried using all the codes but none of them are working?

Which code did you use? What problem?

@tuanphanThe codes used in this thread I've put into the Custom CSS but it doesn't change anything on my website?

Which one should I use? 

On 11/25/2020 at 5:12 PM, WORKOUTWOLF said:

@tuanphanThe codes used in this thread I've put into the Custom CSS but it doesn't change anything on my website?

Which one should I use? 

Hi. Have you solved it yet?

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

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;
}
}

Amazing thank you very much @tuanphan

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

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

@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!
 

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;
}
}

@tuanphanCan you help me with my footer issue?
Site URL: https://www.michalsieradzan.com/podroze/madera

The footer looks great on desktop version. When switching to mobile suddenly it appears in the middle of the page, among the content, not at the bottom of the page. How can I solve it? 

@kasiakalasia It looks fine to me. Which phone/browser do you use?