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

Logo in Footer Too Large on Mobile

Question

Site URL: https://www.jimisaband.com/

Hello! I have placed a logo in my footer and it looks fine on desktop but is HUGE on mobile. It takes up the entire mobile screen. Any ideas on how I can fix this?

website is

jimisaband.com

The template I used it Kitui, a 7.1 template

Edited by jimjimmy

Share this post


Link to post

Recommended Posts

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0

Add to Home > Design > Custom CSS. Adjust logo size with width: 30%

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

}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
On 3/18/2020 at 2:50 AM, coindisplays said:

Hi @tuanphan,

I added the code you suggested for my site, coindisplays.com however it did not adjust the logo size on the mobile version.  Please assist.

Each block has different ID. Above code won't work on your site.

This code for your site

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
5 hours ago, coolj said:

Hi @tuanphan 

I am having the same issue.

I'm also having trouble finding the correct block ID for the image in my footer - when I use the code you have provided with what I think is the correct block ID it won't work 😞 

Site details are: https://papaya-sawfish-mjb5.squarespace.com/   Password: Sloweddys1

Thank you, I appreciate it!

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
11 hours ago, mandabuck said:

Hi 

@tuanphan  — This worked for me on desktop, when viewing through the mobile viewer. But when I view on my iPhone, the logo completely disappears. Any ideas?

 

https://prospect-studio.squarespace.com/

 

 

 

Seems fine here?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
Posted (edited)
On 4/8/2020 at 3:11 AM, tuanphan said:

Seems fine here?

Hmm, it's weird because I still don't see it on my phone. It looks fine on desktop though. Screenshots for reference attached.   [Password for site is "wilson" ]

small screen .PNG

desktop-test.png

Edited by mandabuck

Share this post


Link to post
  • 0
On 4/8/2020 at 3:11 AM, tuanphan said:

Seems fine here?

Hi Tuan, I tried your code and edited the block ID, but still can't seem to make the logo smaller on mobile. See logo attached. I'd like it about 30% the size.

Could you help me? 
image.thumb.png.6bb8adf163dbda40750fbddf708eba3a.png
 

Share this post


Link to post
  • 0

Hi @tuanphan I'm having the same issue. I've used code to make the logo smaller in the footer at the size I want, but it only works when refreshing the browser the first time... If I navigate to another page or switch to desktop view and back to mobile it totally crops the logo. It also looks fine on the SS browser, but checking it on an actual mobile it's cropped with the same issue.

site: https://gopher-mackerel-pen5.squarespace.com/
pw: HIP2020!

code I've used is:

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

Screenshot attached for reference.

Thanks in advance! Much appreciated.

Screen Shot 2020-04-22 at 10.59.48 am.png

Share this post


Link to post
  • 0

Remove 

11 hours ago, RAD_Design said:

Hi @tuanphan I'm having the same issue. I've used code to make the logo smaller in the footer at the size I want, but it only works when refreshing the browser the first time... If I navigate to another page or switch to desktop view and back to mobile it totally crops the logo. It also looks fine on the SS browser, but checking it on an actual mobile it's cropped with the same issue.

site: https://gopher-mackerel-pen5.squarespace.com/
pw: HIP2020!

code I've used is:


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

Screenshot attached for reference.

Thanks in advance! Much appreciated.

 

Remove above code & add this to Home > Design > Custom CSS

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
11 hours ago, tuanphan said:

Remove 

Remove above code & add this to Home > Design > Custom CSS


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

Perfect! Thank you @tuanphan ! So you targeted all elements within the div tag instead of just the logo image block, is that right?

Thanks again.

RAD.

 

Share this post


Link to post
  • 0
21 hours ago, mmccoy said:

Hi @tuanphan! I'm also having the same problem. How do I find the site code for my website? Could you help as well? Thank you! 

https://dory-sprout-cl3b.squarespace.com/

Pw: jemjem 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5e8bf20aa5424467c495ee1b>.row>.span-1 {
    width: 50% !important;
    margin-left: auto;
    margin-right: auto;
}
}

If you want to align left logo, remove margin-left: auto & margin-right: auto


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
Posted (edited)

Hi, @tuanphan--

I have tried the various code in this thread and they are not working for me.  What I want is our logo to not scale down to really small and then appear way too big in the mobile break.  I also want to have the contact us button in the footer and for it to always display contact us on one line.  Can you help?  Pictures attached.

Mike

Screen Shot 2020-05-19 at 1.42.40 PM.png

Screen Shot 2020-05-19 at 1.43.04 PM.png

Edited by imikej

Share this post


Link to post
  • 0
12 hours ago, imikej said:

Hi, @tuanphan--

I have tried the various code in this thread and they are not working for me.  What I want is our logo to not scale down to really small and then appear way too big in the mobile break.  I also want to have the contact us button in the footer and for it to always display contact us on one line.  Can you help?  Pictures attached.

Mike

Can you share link to your site?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
22 hours ago, imikej said:

Hi, @tuanphan--

I have tried the various code in this thread and they are not working for me.  What I want is our logo to not scale down to really small and then appear way too big in the mobile break.  I also want to have the contact us button in the footer and for it to always display contact us on one line.  Can you help?  Pictures attached.

Mike

Screen Shot 2020-05-19 at 1.42.40 PM.png

Screen Shot 2020-05-19 at 1.43.04 PM.png

@tuanphan Here is the site and pw

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

PW: helpisontheway3$

 

Share this post


Link to post
  • 0

Add to Home > Design > Custom CSS

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...