Jump to content

Change size of specific image when viewing on mobile

Recommended Posts

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.

Screenshot 2019-11-15 at 09.53.08.png

Screenshot 2019-11-15 at 09.52.53.png

Screenshot 2019-11-15 at 09.52.40.png

Link to comment

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.

Edited by lu.diehl
tweaked answer
Link to comment

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.

 

Link to comment

@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

Screen Shot 2019-11-20 at 7.26.20 AM.png

Link to comment
  • 5 months later...

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.

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

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

image.thumb.png.6a50893451a027a2f7aa9fe3c8660642.pngimage.thumb.png.6a50893451a027a2f7aa9fe3c8660642.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

image.thumb.png.6a50893451a027a2f7aa9fe3c8660642.pngimage.thumb.png.6a50893451a027a2f7aa9fe3c8660642.png

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. 

 

Screen Shot 2020-05-30 at 6.22.49 PM.png

Screen Shot 2020-05-30 at 6.22.59 PM.png

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/31/2020 at 4:46 AM, tuanphan said:

What is your problem?

 

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.

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 weeks later...

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

Ideal Size Header Logo - Desktop.png

 

MOBILE IMAGE

Too Small Header Size Logo - Mobile.png

Edited by shykoala4
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.