Logo in Footer Too Large on Mobile

Hi @tuanphan hoping you can help me once again. I'm using the code below to adjust the height of my logo in footer in the mobile view but there's a space between the logo and the last section. Any chance you can help me rework this?

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

}

1 minute ago, Praneetha said:

Hi @tuanphan hoping you can help me once again. I'm using the code below to adjust the height of my logo in footer in the mobile view but there's a space between the logo and the last section. Any chance you can help me rework this?

 

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

}

Can you share site url? We can check easier

Yes - here's the website @tuanphan https://www.calligrapran.com/ thank you!

The logo in the mobile view is smaller, but there's all this extra space I'm not able to remove - pic attached

Hi. I'm quite new to all this but I had a similar problem on my site where I wanted the logo on the footer to be smaller than the header logo on mobile. I found a way of cheating it by adding some extra transparent space to the sides of the logo .png file that appears on the footer. That way when the logo image is displayed full screen on mobile it looks smaller as it includes the blank pixels to the sides. It takes a bit of tinkering back and forth to get right tho. If you want you can then adjust the content width of the footer block and/or add spacers so the footer and header logo appears the same size on desktop but smaller on mobile. May not be the best method but works for me so far!

On 10/28/2020 at 8:42 AM, Praneetha said:

Yes - here's the website @tuanphan https://www.calligrapran.com/ thank you!

 

The logo in the mobile view is smaller, but there's all this extra space I'm not able to remove - pic attached

Remove your code

I mean this code

@media screen and (max-width: 640px) {
    div#block-yui_3_17_2_1_1604423224567_14991 img {
        width:30% !important;
        height: auto !important;
        transform: translatex(-50%);
        left: 50% !important
    }

    div#block-yui_3_17_2_1_1603837109718_13061.image-block-wrapper {
        padding-bottom: 50% !important
    }
}

and add new code

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1604423224567_14991 {
    width: 30%;
    margin: 0 auto;
}
}

Thank you @tuanphan you are truly the best!!

On 11/5/2020 at 4:54 AM, Praneetha said:

Thank you @tuanphan you are truly the best!!

I see the boxes is not equal height. Do you want fix?

Hi @tuanphan 

i need help with making my footer logo smaller too. 

https://playbookpo.squarespace.com 
pw: playbook2020

8 minutes ago, RM-WB said:

Hi @tuanphan 

i need help with making my footer logo smaller too. 

https://playbookpo.squarespace.com 
pw: playbook2020

Incorrect password

5 minutes ago, tuanphan said:

Incorrect password

it should work now

4 hours ago, RM-WB said:

@tuanphan sorry it should work now

 

Add to Home > Design > Custom CSS

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

6 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

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

 

that worked thanks @tuanphan

17 hours ago, RM-WB said:

that worked thanks @tuanphan

On mobile, the image is not fullsize, you can add this to Design > Custom CSS to solve

/* resize mobile banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 25vh !important;
}
}

@tuanphan I hate to ask, but I'm having trouble getting this to work on my site as well. I've gone into inspector to get the Block # for the logo in my top footer and tried to swap the ID number, but it's still not working. Perhaps I have the wrong Block #?
I'd really appreciate your help with this!
http://medicinepathpodcast.com

On 11/13/2020 at 3:37 AM, brianjames said:

@tuanphan I hate to ask, but I'm having trouble getting this to work on my site as well. I've gone into inspector to get the Block # for the logo in my top footer and tried to swap the ID number, but it's still not working. Perhaps I have the wrong Block #?
I'd really appreciate your help with this!
http://medicinepathpodcast.com

Add to Home > Design > Custom CSS

/* resize footer */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1605211543446_3847 {
    width: 50%;
    margin: 0 auto;
}
}

@tuanphan I'm having the same issue with the logo appearing way too big in the footer, can you help me? www.carissablossomartistry.com

3 minutes ago, CarissaBlossom said:

@tuanphan I'm having the same issue with the logo appearing way too big in the footer, can you help me? www.carissablossomartistry.com

Add to Home > Design > Custom CSS

/* resize footer logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1603244151885_6814 {
    width: 50%;
    margin: 0 auto;
}
}

4 minutes ago, CarissaBlossom said:

@tuanphan I'm having the same issue with the logo appearing way too big in the footer, can you help me? www.carissablossomartistry.com

Also, I just had a quickly check. I see

1. (Mobile) Site title is too long, users can't see burger menu.

Do you want to resize site sittle on mobile only?

@tuanphan yes please!!

8 minutes ago, tuanphan said:

Also, I just had a quickly check. I see

1. (Mobile) Site title is too long, users can't see burger menu.

Do you want to resize site sittle on mobile only?

 

Yes please!!

6 hours ago, CarissaBlossom said:

Yes please!!

Add to Home > Design > Custom CSS

/* site title mobile */
@media screen and (max-width:640px) {
span.site-title {
    font-size: 14px;
}
}

7 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

/* site title mobile */
@media screen and (max-width:640px) {
span.site-title {
    font-size: 14px;
}
}

 

Thank you SO MUCH

Hello, sorry I'm another one asking for the big-Logo-in-footer-on-mobile support!

I have a couple of logos in there.

My site is www.holtbyjonpeake.co.uk

Thank you!

Hi @tuanphan yes I'd like some help with making the padding even across those boxes. If you could help with css that would be amazing!

On 11/30/2020 at 10:24 PM, bexarmy said:

Hello, sorry I'm another one asking for the big-Logo-in-footer-on-mobile support!

I have a couple of logos in there.

My site is www.holtbyjonpeake.co.uk

Thank you!

You mean flag image? Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1606479706971_10192 {
    width: 50%;
}
}

On 12/1/2020 at 5:05 AM, Praneetha said:

Hi @tuanphan yes I'd like some help with making the padding even across those boxes. If you could help with css that would be amazing!

Can you share site url?