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
On 12/18/2020 at 9:26 PM, tuesdayroo said:

I'm having the same issue here with the logo being huge on mobile - @tuanphan can you help me please? 🙂

Site was made live this morning - doh!

http://www.assembletalent.com/

Thanks!

Add to Home > Design > Custom CSS

/* Resize footer logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1608237464377_37519 {
    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

Link to comment
  • 0
On 12/22/2020 at 4:59 PM, tuesdayroo said:

Thank you so much @tuanphan - that worked perfectly!

I see some pages on mobile have long content. You can consider adding a back to top button.

On Tablet, Email/Linkedin icons in Footer in 2 rows. Do you want to make them same row?

 

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

Link to comment
  • 0
On 1/13/2021 at 10:49 PM, MochP said:

Hi,

I'm having the same issue with a to big footer logo on mobile version.

URL: www.urbanea.se
Password: vinter2021

Thanks a lot!

Add to Design > Custom CSS

/* resize footer logo mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1610015162371_34532 {
    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

Link to comment
  • 0
On 1/16/2021 at 10:21 AM, tuanphan said:

Add to Design > Custom CSS


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

 

Thank you very much!

Link to comment
  • 0
17 hours ago, srobinsondesign said:

@tuanphanhello! I followed the coding you mentioned above, but I'm still hitting an issue with the spacing under the decreased image size. Does anyone know how to help?

Screen Shot 2021-02-06 at 2.19.45 PM.png

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

Link to comment
  • 0
19 hours ago, Oliver_H said:

Hi!

I'm also after a piece of code that will work for my site to make the logo smaller on mobile

Site:
http://dram.app

Password:
iloveBeer22!

Add to Design > Custom CSS

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

 

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

Link to comment
  • 0
On 5/30/2020 at 8:18 AM, tuanphan said:

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

 

@tuanphan

I have the same problem... the logo in my footer looks fine on desktop but it takes up the entire mobile screen. could you please help me?

website URL: www.dresscoding.org

Edited by smesi
Link to comment
  • 0
7 hours ago, smesi said:

@tuanphan

I have the same problem... the logo in my footer looks fine on desktop but it takes up the entire mobile screen. could you please help me?

website URL: www.dresscoding.org

Your site is private. Can you setup password & share url again?

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

Link to comment
  • 0
18 hours ago, tuanphan said:

Your site is private. Can you setup password & share url again?

Yes, sorry, it's available now with the password DressCoding1. Url: www.dresscoding.org

Thanks!

Link to comment
  • 0
22 hours ago, smesi said:

Yes, sorry, it's available now with the password DressCoding1. Url: www.dresscoding.org

Thanks!

Hi. Resize images, or resize + make 3 images side by side?

 

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

Link to comment
  • 0
7 hours ago, tuanphan said:

Hi. Resize images, or resize + make 3 images side by side?

 

Unfortunately resizing haven't changed the displaying problem on mobile.  These are the logos of our partners so we need these 2, but there's a blank text block on their right.

Link to comment
  • 0
On 5/1/2021 at 10:25 PM, smesi said:

Unfortunately resizing haven't changed the displaying problem on mobile.  These are the logos of our partners so we need these 2, but there's a blank text block on their right.

Add to Design > Custom CSS

/* mobile footer logos */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1607957441027_92637+.row>.span-1 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1607957441027_92637+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

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

Link to comment
  • 0
48 minutes ago, tuanphan said:

Add to Design > Custom CSS


/* mobile footer logos */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1607957441027_92637+.row>.span-1 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1607957441027_92637+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

This worked, thank you so much!

Link to comment
  • 0
On 5/3/2021 at 9:40 PM, smesi said:

This worked, thank you so much!

Do you want to fix these?

Site URL – https://www.dresscoding.org/

1. (Mobile-Homepage) Move section image to center?

dresscoding.org-01-min.png

2. (Tablet-Rolunk) Increase text width?

dresscoding.org-02-min.png

3. (Blog) You haven’t changed SEO Title so the browser tab name still shows “Blog 3”

dresscoding.org-03-min.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

Link to comment
  • 0

Hey @tuanphan, Thank you for all your help to folks so far! I've gone through all the posts so far, and I was not able to reverse-engineer the solution to my Footer Logo. I've tried a ton of different options, but I feel like this yui # is the closest to the area I'm having the issue.

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

Link: two44.squarespace.com ; Pass: 244i

I'd love to know how you go about finding this code. As the expression goes, "teach a man to fish, and he'll be satisfied for the rest of his life" 🙂

Any help you can give would be greatly appreciated! Thanks!

Link to comment
  • 0
4 hours ago, zachmcnair said:

Hey @tuanphan, Thank you for all your help to folks so far! I've gone through all the posts so far, and I was not able to reverse-engineer the solution to my Footer Logo. I've tried a ton of different options, but I feel like this yui # is the closest to the area I'm having the issue.


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

Link: two44.squarespace.com ; Pass: 244i

I'd love to know how you go about finding this code. As the expression goes, "teach a man to fish, and he'll be satisfied for the rest of his life" 🙂

Any help you can give would be greatly appreciated! Thanks!

Use this tool to find div#block...104 id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

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

Link to comment
  • 0
23 hours ago, BradSB92 said:

Hi @tuanphan you must be tired of this 😅, but I'm having the same issue on my site. I have three accreditation logos in the footer that look fine on desktop but appear stacked and large on mobile. Any help with custom CSS to rectify this issue would be greatly appreciated.

Site: https://tomato-flatworm-tztz.squarespace.com

Password: inglis

Best Regards

Add to Design > Custom CSS

/* Mobile-Footer-Logos */
@media screen and (max-width:767px) {
div#page-section-6072fb7209cda5305a709b9d .span-2:nth-child(3) {
    width: 66.666% !important;
    float: left !important;
}
div#page-section-6072fb7209cda5305a709b9d .span-2:nth-child(3) .span-1 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6072fb7209cda5305a709b9d .span-2:nth-child(4) {
    width: 33.333% !important;
    float: left !important;
}
div#page-section-6072fb7209cda5305a709b9d .span-3:nth-child(5) {
    clear: left;
}
}

 

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

Link to comment
  • 0
13 hours ago, tuanphan said:

Add to Design > Custom CSS


/* Mobile-Footer-Logos */
@media screen and (max-width:767px) {
div#page-section-6072fb7209cda5305a709b9d .span-2:nth-child(3) {
    width: 66.666% !important;
    float: left !important;
}
div#page-section-6072fb7209cda5305a709b9d .span-2:nth-child(3) .span-1 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6072fb7209cda5305a709b9d .span-2:nth-child(4) {
    width: 33.333% !important;
    float: left !important;
}
div#page-section-6072fb7209cda5305a709b9d .span-3:nth-child(5) {
    clear: left;
}
}

 

Thank you so much! works perfectly! really appreciate your help

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