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

 

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

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

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

 

Edited by tuanphan

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

@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

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

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

 

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

 

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

 

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

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

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

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

 

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

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! 

Screen Shot 2020-07-02 at 2.12.48 PM.png

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

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

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.

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

 

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
20 hours ago, HannahJaneEalu said:

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

I see you used carousel. Do you still need help on this?

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

Create an account or sign in to comment

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

×
×
  • Create New...