Scale Logo Image on 7.1

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.

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

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

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

Sorry! Please try this:
https://tangerine-quillfish-jtdh.squarespace.com/vaa

password: password

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

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

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

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!

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.

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?)

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

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!

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

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

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

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

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