Change size of specific image when viewing on mobile

Hi,

I am using the brine template...

I want to target and control the size of a specific image when changing between desktop, tablet and mobile.

The image is the logo 'tbk' and sits within a banner at the bottom of a page. The size of the logo is perfect when in desktop mode, too small in tablet mode and too large on mobile.

Is there some custom CSS i can add that will allow me to control the sizes for each. See images attached.

website: tbktest.squarespace.com 

Thanks in advance.

Dan.

Hello,

One initial thought - as the logo is just text does it need to be an image?

Might be worth trying to include as normal text and add a style so that it picks up the same font?

Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below:

/* mobile screens */
@media only screen and (max-width: 640px) {
  #block-unique-ID{
  width: 50%;
  }
}

/* tablet screens */
@media only screen and (max-width: 768px) {
  #block-unique-ID{
  width: 100%;
  }
}

Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed.

Hi @lu.diehl thanks for your answer, very useful and should work I think.

It's not for me though, I answered the original question - I was just wondering if @doshea could use text instead of an image for the logo, in particular in the footer.

6 minutes ago, Graemetg said:

Hi @lu.diehl thanks for your answer, very useful and should work I think.

It's not for me though, I answered the original question - I was just wondering if @doshea could use text instead of an image for the logo, in particular in the footer.

Hi! Thanks for pointing it out! 🙂

Hi, thank you both for your support. In the end i took Graemetg's adive and change the logo to text rather than an image.

Hi,

I am using the brine template and also trying to reduce the size of certain images when viewed on mobile, but can't seem to get the syntax correct.  It is also possible that I am not using the right image block ID.  Any help would be very much appreciated.  I have tried many variations on the code, but can't seem to get anything to work:

First Try, didn't work:

/* mobile screens */
@media only screen and (max-width: 640px) {
  5dd1fbc83f951311698a969f{
  width: 20%;
  }
}
Note that I also tried it with # in front of the image ID.

Second Try, also didn't work

/* mobile screens */
@media only screen and (max-width: 640px) {
  [data-image-id="5dd1fbc83f951311698a969f"]{
  width: 20%;
  }
}
 

I have been using inspect to find the image ID, but I can be doing that incorrectly.  I am pulling the id from where it says:  data-image-id="5dd1fbc83f951311698a969f"

Any guidance would be appreciated.  

Thanks.

@New_Designer try looking for the image block ID. The block ID starts with "block-" followed by a set of numbers, for example: id="block-5a6263c01ea450cffcf0" as shown in the image attached. If you need further help, please share a link to your website 😉

If you use the Google Chrome browser there is this really helpful extension called the Squarespace Collection/Block Identifier which saves me time identifying any block ID in Squarespace. It shows the Squarespace page collection ID and permanent block IDs when you enable it. 

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

Hi @lu.diehl,

Thanks so much for your help.  I really appreciate it.  I was able to solve my problem and the Squarespace Collection/Block Identifier was  a real time saver and help.  

Thanks again.

Hello @lu.diehl

I'm having the same problem:

Is this correct?

 

/* mobile screens */
@media only screen and (max-width: 640px) {
  block-yui_3_17_2_1_1589388698979_4393{
  width: 50%;
  }
}

/* tablet screens */
@media only screen and (max-width: 768px) {
  block-yui_3_17_2_1_1589388698979_4393{
  width: 100%;
  }
}

Thank you.

19 hours ago, odyssey said:

Hello @lu.diehl

I'm having the same problem:

Is this correct?

 

/* mobile screens */
@media only screen and (max-width: 640px) {
  block-yui_3_17_2_1_1589388698979_4393{
  width: 50%;
  }
}

/* tablet screens */
@media only screen and (max-width: 768px) {
  block-yui_3_17_2_1_1589388698979_4393{
  width: 100%;
  }
}

Thank you.

If you share link to your site, I can take a look

Hello!

Link is:  https://octahedron-beagle-3pyn.squarespace.com/
Password is:  password

Hello!

Link is:  https://octahedron-beagle-3pyn.squarespace.com/
Password is:  password

1 hour ago, odyssey said:

Hello!

Link is:  https://octahedron-beagle-3pyn.squarespace.com/
Password is:  password

Which image?

Sorry!!
The logo in the top banner.

I fixed it.  Thank you.

I am also having this issue. Tried using the below code, is this right?

/* mobile screens */

@media only screen and (max-width: 640px) {

  #block-yui_3_17_2_1_1587744734128_191413{

  width: 50%;

  }

}

/* tablet screens */

@media only screen and (max-width: 768px) {

  #block-yui_3_17_2_1_1587744734128_191413{

  width: 100%;

  }

}

Website link is https://jonkasbe.com/when-lambs-become-lions/. Trying to get the Apple TV, Google Play, Amazon, etc. logos to not show up full screen on mobile and to stay small and in a line like it does on the computer.

Thanks in advance for any advice!

14 hours ago, JonathanFussell said:

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5e9bd997f493453494ba09be .span-12 .row:nth-child(8)>.col {
    width: 25% !important;
    float: left !important;
}
}

Hi! I'm having a similar issue. I've tried various CSS codes but they don't work. The page is https://www.clinicaarriaga.com/servicios-2 

If anyone could help I would be very grateful. Thank you so much.

15 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5e9bd997f493453494ba09be .span-12 .row:nth-child(8)>.col {
    width: 25% !important;
    float: left !important;
}
}

Thank you! This worked! Really appreciate the support.

Is it possible to apply similar code to the homepage roll over titles so they fit within the images? On jonkasbe.com homepage, you’ll notice that when you role over the images on mobile and see the titles come up for “When Lambs Become Lions”, “A Beautiful Waste”, or “Mipso In Japan” they do not fit within the image (on mobile - image attached to show the issue). Any advice in this area is much appreciated! Thank you. 

17 hours ago, Daguerrotipo said:

Hi! I'm having a similar issue. I've tried various CSS codes but they don't work. The page is https://www.clinicaarriaga.com/servicios-2 

If anyone could help I would be very grateful. Thank you so much.

What is your problem?

10 hours ago, JonathanFussell said:

Thank you! This worked! Really appreciate the support.

Is it possible to apply similar code to the homepage roll over titles so they fit within the images? On jonkasbe.com homepage, you’ll notice that when you role over the images on mobile and see the titles come up for “When Lambs Become Lions”, “A Beautiful Waste”, or “Mipso In Japan” they do not fit within the image (on mobile - image attached to show the issue). Any advice in this area is much appreciated! Thank you. 

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage .project-title {
    font-size: 16px !important;
}
}

8 hours ago, tuanphan said:

@media screen and (max-width:640px) { .homepage .project-title { font-size: 16px !important; } }

thanks! It worked for some of them, but for "When Lambs Become Lions" the issue is still there, image attached. Any thoughts? Thanks again.

Hi sorry for the delay. I want the icons you see here to keep that same layout when you visit the page on mobile or a small screen. I have tried different options but nothing works. Could you give me a hand? Thank you so much.

8 hours ago, Daguerrotipo said:

 

Hi sorry for the delay. I want the icons you see here to keep that same layout when you visit the page on mobile or a small screen. I have tried different options but nothing works. Could you give me a hand? Thank you so much.

I answered in another post

Hello!

Issue: I want to target and control the logo size when changing between desktop and mobile.

Template: Brine (Sonny)

Image: The logo "Befriended Heart" at the top left of my page.  The logo size is perfect when in desktop and tablet modes, but too small on mobile. See images attached.

Question: Can you help me make the logo bigger for mobile? Ideally the same proportion as it appears for desktop below. *Note that I've already tried multiple media rules codes in my CSS and they haven't made a difference 😞 * 

Website: joyindementia.com 

Thank you for your help!

Laura

DESKTOP IMAGE

MOBILE IMAGE