Logo in Footer Too Large on Mobile

28 minutes ago, Iryne said:

@tuanphan
I have the same problem...
The logo on mobile is too large
Please check
https://dogfish-primrose-zxw9.squarespace.com/config/

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5eba7c3d0c8cd57a536f9ae7 .span-9 .span-2 {
    width: 30% !important;
    margin: 0 auto;
}
}

8 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5eba7c3d0c8cd57a536f9ae7 .span-9 .span-2 {
    width: 30% !important;
    margin: 0 auto;
}
}

 

Nice! 
Thanks a lot! 😀

On 5/20/2020 at 2:48 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5ebf1213dfce295700786cb8>.row>.span-3 {
    width: 30% !important;
}
}

 

Hi, Tuanphan,

I have done something to mess up what you gave me.  It worked initially.  What I am trying to do is to have the logo (image block) proportionally scale smaller as the screen size goes from desktop to iPad horizontal to iPad vertical to iPhone horizontal to iPhone vertical.  Can you let me know what I did to break what you gave me and what needs to be changed to make the proportional scaling work?  Thank you so much.

Mike

https://maroon-orchid-fx6s.squarespace.com/

Site is now live: tbo.studio

14 hours ago, imikej said:

Hi, Tuanphan,

I have done something to mess up what you gave me.  It worked initially.  What I am trying to do is to have the logo (image block) proportionally scale smaller as the screen size goes from desktop to iPad horizontal to iPad vertical to iPhone horizontal to iPhone vertical.  Can you let me know what I did to break what you gave me and what needs to be changed to make the proportional scaling work?  Thank you so much.

Mike

https://maroon-orchid-fx6s.squarespace.com/

Site is now live: tbo.studio

/* tablet */
@media screen and (max-width:991px) and (min-width: 768px)  {
div#page-section-5ebf1213dfce295700786cb8>.row>.span-3 {
    width: 70% !important;
}
}
/* tablet landscape */
@media screen and (max-width:991px) and (min-width: 768px) and (orientation:landscape) {
div#page-section-5ebf1213dfce295700786cb8>.row>.span-3 {
    width: 50% !important;
}
}
/* mobile */
@media screen and (max-width:767px) {
div#page-section-5ebf1213dfce295700786cb8>.row>.span-3 {
    width: 40% !important;
}
}
@media screen and (max-width:767px) and (orientation: landscape) {
div#page-section-5ebf1213dfce295700786cb8>.row>.span-3 {
    width: 50% !important;
}
}

Hi, @tuanphan

Thank you for the code.  But, it doesn't seem to be working.

Mike

@tuanphan

Same problem here 😕 Can't get the code to work for me. Have a row of logos in the footer that become full-width stacked on mobile, and would like to keep them small, about 30% of their current size on mobile. Stacked in fine.

familypathways.nyc
pw:forthepeople

35 minutes ago, PPL said:

@tuanphan

Same problem here 😕 Can't get the code to work for me. Have a row of logos in the footer that become full-width stacked on mobile, and would like to keep them small, about 30% of their current size on mobile. Stacked in fine.

familypathways.nyc
pw:forthepeople

NYC children or policy lab logo?

@tuanphan all of them actually! thank you very much.

13 hours ago, PPL said:

@tuanphan all of them actually! thank you very much.

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* public */
div#block-yui_3_17_2_1_1590699596051_56631+.row>.span-2 {
    width: 50% !important;
    margin: 0 auto;
}
/* nyc */
div#block-yui_3_17_2_1_1590699596051_21899+.row>div:not(:first-child) {
    width: 50% !important;
    margin: 0 auto;
}
}

On 5/28/2020 at 6:42 AM, imikej said:

Hi, @tuanphan

Thank you for the code.  But, it doesn't seem to be working.

Mike

 

Hi, @tuanphan

The code you gave me for www.thomasburke.com footer logo is not working to keep sizing proportional on tablet and iPhone.  The block is: #block-yui_3_17_2_1_1590700508893_9464

Mike

On 6/2/2020 at 3:17 AM, imikej said:

Hi, @tuanphan

The code you gave me for www.thomasburke.com footer logo is not working to keep sizing proportional on tablet and iPhone.  The block is: #block-yui_3_17_2_1_1590700508893_9464

Mike

 

You edited some blocks so the order code was invalid. Use this new code. You can adjust 50%, 70%,...

/* tablet */
@media screen and (max-width:991px) and (min-width:768px)  {
div#page-section-5ed01bb4d97d7907c68d3db8 .span-12 {
    width: 70% !important;
    margin: 0 auto !important;
    float: none;
}
}
/* tablet landscape */
@media screen and (max-width:991px) and (min-width: 768px) and (orientation:landscape) {
div#page-section-5ed01bb4d97d7907c68d3db8 .span-12 {
    width: 50% !important;
        margin: 0 auto !important;
    float: none;
}
}
/* mobile */
@media screen and (max-width:767px) {
div#page-section-5ed01bb4d97d7907c68d3db8 .span-12 {
    width: 40% !important;
        margin: 0 auto !important;
    float: none;
}
}
@media screen and (max-width:767px) and (orientation: landscape) {
div#page-section-5ed01bb4d97d7907c68d3db8 .span-12 {
    width: 50% !important;
        margin: 0 auto !important;
    float: none;
}
}

Hi  @tuanphan,

I'm having an issue with the logo being too large in the footer on mobile as well and would like it to be at the bottom instead of between the text. I'd love your help on this - thank you!

website: www.energcoach.com

password: energ

5 hours ago, ener-g said:

Hi  @tuanphan,

I'm having an issue with the logo being too large in the footer on mobile as well and would like it to be at the bottom instead of between the text. I'd love your help on this - thank you!

website: www.energcoach.com

password: energ

 

Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5ec5f72504a4600681d6f9ff>.row>.span-2 {
    width: 30% !important;
    margin: 0 auto;
}
}

Hi,

I'm having this same issue even after finding the image id

https://sawfish-reed-w87p.squarespace.com

code i used was 

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1592145115756_295 img {
    width: 30% !important;
    height: auto !important;
    transform: translateX(-50%);
    left: 50% !important;
}
div#block-yui_3_17_2_1_1592145115756_295 .image-block-wrapper {
    padding-bottom: 50% !important;
}
}

1 minute ago, toblyfy said:

Hi,

 

I'm having this same issue even after finding the image id

https://sawfish-reed-w87p.squarespace.com

code i used was 

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1592145115756_295 img {
    width: 30% !important;
    height: auto !important;
    transform: translateX(-50%);
    left: 50% !important;
}
div#block-yui_3_17_2_1_1592145115756_295 .image-block-wrapper {
    padding-bottom: 50% !important;
}
}

Remove above code & use this

What is access password?

Hi @tuanphan. I am having the same issue with my website. I have (at the moment) two logos in my footer and they are showing up really big on a mobile device. The website address is: www.nationalband.co.nz. Can you please help with this?

3 hours ago, BremnerMusic said:

Hi @tuanphan. I am having the same issue with my website. I have (at the moment) two logos in my footer and they are showing up really big on a mobile device. The website address is: www.nationalband.co.nz. Can you please help with this?

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5e2794d497a3c6592d0309ba>.row:nth-child(1)>.col {
    float: left !important;
    width: 50% !important;
}
}

Hi @tuanphan

I am also having issues with getting the footer smaller on mobile - have tried some of the codes above, but none are working. See attached. I'd like the logo to be smaller, and the newsletter fields to be smaller. Ideally, everything would be left justified (logo and social links) as well, if possible. Can the social links be on the same line as the Follow Us text or does it have to be below? Thank you! 

On 7/3/2020 at 1:14 AM, Rachele said:

Hi @tuanphan

I am also having issues with getting the footer smaller on mobile - have tried some of the codes above, but none are working. See attached. I'd like the logo to be smaller, and the newsletter fields to be smaller. Ideally, everything would be left justified (logo and social links) as well, if possible. Can the social links be on the same line as the Follow Us text or does it have to be below? Thank you! 

Can you share site url? I can check easier.

Access Password: forthebluedot

@tuanphan can you help me too? site is wildeventstudio.com

thanks!

Hi @tuanphan I'm trying to do the same...

https://emu-leopard-zg7s.squarespace.com/home
PW: JM2020!

Scale logo in footer on mobile only.

I'm trying to use the code mentioned above:

@media screen and (max-width:640px) {
div#footerBlocks .span-2 {
    width: 50% !important;
    margin: 0 auto;
}
}

But having trouble trying to identify what the column is to target on this code...

Thanks for your help in advance! Much appreciated.

RAD.

7 hours ago, RADDesign said:

Hi @tuanphan I'm trying to do the same...

https://emu-leopard-zg7s.squarespace.com/home
PW: JM2020!

Scale logo in footer on mobile only.

I'm trying to use the code mentioned above:

@media screen and (max-width:640px) {
div#footerBlocks .span-2 {
    width: 50% !important;
    margin: 0 auto;
}
}

But having trouble trying to identify what the column is to target on this code...

Thanks for your help in advance! Much appreciated.

RAD.

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

Thank you @tuanphan worked perfectly!

Much appreciated, as always!

RAD.

hi guys i am having the same issue with my site could someone assist? logos on mobile are massive - is there a way to reduce them or introduce a sliding carousel of multiple images?

www.ealuexperiences.com