Jump to content

Logo in Footer Too Large on Mobile

Recommended Posts

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. 
Or send to forum message

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
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
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
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. 
Or send to forum message

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

@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
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. 
Or send to forum message

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
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
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. 
Or send to forum message

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
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. 
Or send to forum message

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

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
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. 
Or send to forum message

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
  • 2 weeks later...
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. 
Or send to forum message

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

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
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. 
Or send to forum message

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
  • 4 weeks later...
  • 1 month later...

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
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. 
Or send to forum message

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
  • 1 month later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.