Jump to content

Scale Logo Image on 7.1

Recommended Posts

Site URL: https://tangerine-quillfish-jtdh.squarespace.com/vaa

Hello, I'm looking to display a brand logo in my template. I have inserted it as a image with some spacer blocks besides it (attached screenshot). However on mobile i don't want it spanning the full width on mobile as it looks to large, how am i:

1) Able to scale the image on mobile/not span the width?
2) Able to do it in a way that gives me my desired look?

I am using a 7.1 template but would love to see if there was a way to target this element.

Screenshot "Desired" is what i am trying to achieve, you can see that compared to the the actual mobile comp its much larger the logo image.

Screen Shot 2020-03-30 at 9.02.42 PM.png

Screen Shot 2020-03-30 at 9.02.49 PM.png

Desired.png

Link to comment
6 minutes ago, SunnyJ said:

@tuanphan Thanks for the rapid support!

I have created two logos below each other on the page now. Hopefully thats what you need to help me 🙂
https://tangerine-quillfish-jtdh.squarespace.com/vaa

Thank you!

Your site is private. Please setup password & share url again

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

Add to Home > Design > Custom CSS

/* by tuan phan ss forum */
/* hide top logo on desktop */
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1585614064913_21869 {
    display: none;
}
}

/* hide bottom logo on mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1585653879770_14928 {
    display: 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
14 minutes ago, SunnyJ said:

Thank you! How do i scale down the mobile logo to be much smaller as in my "desired" screenshot attached? 

 

 

Add spacer block to left/.right of 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

Hi @tuanphan still having some trouble, sorry.

Both logos are displaying on desktop and even if i add spacers to make the logo smaller on desktop it isn't reflecting on mobile.

Also if i want these logos to go on other pages do i need to inject CSS for each one in that same box or will this target all those logos if built the same way?

Thanks for the help!

Link to comment
1 hour ago, tuanphan said:

Create 2 logos, then use CSS to hide 1 on desktop, hide 1 on mobile

You can create first, then share url, I can give the code

My idea is to create a small logo, a big logo, and hide it on desktop / mobile.
You need to add spacer blocks first, because adding spacer may cause the id logo to be changed, and the code above does not work.

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

Thanks, i've added in the spacer blocks to the logo sets. Would you be able to show me/demonstrate which ID you are using in the snippet so i can learn/use in the future. Both are now displaying on the mobile for some reason. (maybe as you say cause the ID changed when i put the spacers in?)

Link to comment
13 minutes ago, SunnyJ said:

Thanks, i've added in the spacer blocks to the logo sets. Would you be able to show me/demonstrate which ID you are using in the snippet so i can learn/use in the future. Both are now displaying on the mobile for some reason. (maybe as you say cause the ID changed when i put the spacers in?)

Use this extension: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

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
12 hours ago, SunnyJ said:

Thanks @tuanphan unfortuently no luck, are you able to look under the hood again for me? 

Even when i add padding blocks on desktop the make the logo smaller it doesn't reflect on mobile and stretches the logo and pixelates it.

Thanks for the support!

Okay. Remove code I sent & remove small logo

and add this code to Home > Design > Custom CSS

You can play with width, padding bottom

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1585688155799_16400 img {
    width: 50% !important;
    height: auto !important;
    transform: translateX(-50%);
    left: 50% !important;
}
div#block-yui_3_17_2_1_1585688155799_16400 .image-block-wrapper {
    padding-bottom: 30% !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

@tuanphanThis is working much better! Thank you. I'm able to target other pages too which is great, thank you!

One last question: Am i able to reduce the padding only on mobile between the logo and body text. Is there a line of code that can help me perform that? I'm marked out the padding area i'd like to reduce in the screenshot.

 

Thanks! 

Unknown-1.png

Link to comment
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1585653879770_14928 {
    padding-bottom: 0 !important;
}
div#block-5e82865a1837f86ef3a5f34f {
    padding-top: 0 !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
32 minutes ago, SunnyJ said:

@tuanphan

Thank you! If i wanted to just center the text, highlighted in pink (not the logo) on mobile but keep the desktop left aligned what would i inject to make that happen in the CSS?

Thank you! 

 

@media screen and (max-width:767px) {
div#block-5e82865a1837f86ef3a5f34f * {
    text-align: center !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

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.