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

Logo in Footer Too Large on Mobile


jimjimmy

Question

Recommended Posts

  • 0

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

}

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

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

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!

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

 

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

image.thumb.png.65d115338a4915efc8bc2a4ce5db6e1e.png

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

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

 

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

image.thumb.png.994deef215d539de2878bd8a03765b26.png

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

@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

Screen Shot 2020-11-12 at 12.37.23 PM.png

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

 

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

 

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

 

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

 

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

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