Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
doshea

Change size of specific image when viewing on mobile

Question

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

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0

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?

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
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! 🙂

Share this post


Link to post
  • 0

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.

 

Share this post


Link to post
  • 0

@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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...