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

Change size of specific image when viewing on mobile


doshea

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

Link to post
  • Answers 50
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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 i

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.  

Posted Images

Recommended Posts

  • 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
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! 🙂

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.

 

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

Link to post
  • 0

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 post
  • 0
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

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 post
  • 0
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
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 post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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

 

Screen Shot 2020-05-31 at 12.49.54 PM.png

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
Posted (edited)

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 post
  • 0
4 hours ago, shykoala4 said:

Hello!

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

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
img.Mobile-bar-branding-logo {
    width: 200px;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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...