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

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

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
1 hour ago, odyssey said:

Hello!

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

Which image?


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

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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!

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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.

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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