Resize one image with CSS

Site URL: https://sprout-dragonfly-f48x.squarespace.com/

Hi there,

I'm implementing an image in my website that I need only at 25 % of its size. On the desktop version I just implemented some empty space next to it to resize the whole thing.

However, on mobile the image appears full screen. I resized it via CSS to max-width of 25 % but it's either possible for all images (than it works fine but all other images are just as small) or I target only the specific image with data-image-id but that's not working. It resizes the image but the whole container stays the size of the full size image and therefore creates too much space underneath the now smaller image.

I've used this CSS code:

@media screen and (max-width: 640px) { [data-image-id="60e8168657d2352c927ec54d"] {
   max-width: 25%;
   max-height: 25%;
  }
}

In the attachment I show you a screenshot of what it looks like now on the website. I also attach an image of what I want it to look like (if I address all images it works perfectly but not when I try to address only the one).

Thank you for your help!

Sarah

16 hours ago, SarahHalbeisen said:

Site URL: https://sprout-dragonfly-f48x.squarespace.com/

Hi there,

I'm implementing an image in my website that I need only at 25 % of its size. On the desktop version I just implemented some empty space next to it to resize the whole thing.

However, on mobile the image appears full screen. I resized it via CSS to max-width of 25 % but it's either possible for all images (than it works fine but all other images are just as small) or I target only the specific image with data-image-id but that's not working. It resizes the image but the whole container stays the size of the full size image and therefore creates too much space underneath the now smaller image.

I've used this CSS code:

@media screen and (max-width: 640px) { [data-image-id="60e8168657d2352c927ec54d"] {
   max-width: 25%;
   max-height: 25%;
  }
}

In the attachment I show you a screenshot of what it looks like now on the website. I also attach an image of what I want it to look like (if I address all images it works perfectly but not when I try to address only the one).

Thank you for your help!

Sarah

Hi. What is access password?

Ah, sorry, the password is Hypnose2021

On 7/14/2021 at 3:26 PM, SarahHalbeisen said:

Ah, sorry, the password is Hypnose2021

It looks like you solved with this CSS?

@media screen and (max-width: 640px) {
    .summary-thumbnail img {
        border-radius:50%;
        padding: 22px;
        max-width: 50%;
        margin: auto
    }
}

1 hour ago, tuanphan said:

It looks like you solved with this CSS?

@media screen and (max-width: 640px) {
    .summary-thumbnail img {
        border-radius:50%;
        padding: 22px;
        max-width: 50%;
        margin: auto
    }
}

 

No, it's the image above – the one of the butterfly. I disabled the CSS that I used to adjust it, so you can see it. Now the image takes up the whole width of the screen and I would like to adjust it to 25% of its size.

If I do so, all images are smaller. However, I'd only need this one (here and on another site) to be smaller.

Thank you!

18 hours ago, SarahHalbeisen said:

No, it's the image above – the one of the butterfly. I disabled the CSS that I used to adjust it, so you can see it. Now the image takes up the whole width of the screen and I would like to adjust it to 25% of its size.

If I do so, all images are smaller. However, I'd only need this one (here and on another site) to be smaller.

Thank you!

Add to Design > Custom CSS

/* Butter fly size */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1625822684091_21731 {
    width: 25%;
    margin: 0 auto;
}
}

22 minutes ago, tuanphan said:

Add to Design > Custom CSS

/* Butter fly size */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1625822684091_21731 {
    width: 25%;
    margin: 0 auto;
}
}

 

Thank you so much! This did the trick.

Hi, I have the same problem with a flag image that I am trying to have on my home page. I can reduce the size with the spacer and it's fine on the desktop but the mobile version displays the image bigger. See screenshots attached. 

I tried to use the custom CSS you gave with the butterfly size, while changing the name for the name I chose for my image and also changing the "block yui..." but that does not work. No changes at all. What am I doing wrong here? 

Thank you!

20 hours ago, NicoTHE said:

Hi, I have the same problem with a flag image that I am trying to have on my home page. I can reduce the size with the spacer and it's fine on the desktop but the mobile version displays the image bigger. See screenshots attached. 

I tried to use the custom CSS you gave with the butterfly size, while changing the name for the name I chose for my image and also changing the "block yui..." but that does not work. No changes at all. What am I doing wrong here? 

Thank you!

Can you share link to page in screenshot?

Here it is, thanks! 

On 6/27/2022 at 7:35 PM, NicoTHE said:

Here it is, thanks! 

the link doesn't work.

myadandnicolas.squarespace.com/home

sorry sent the wrong screenshot, the link to the website page is: https://www.treehouseexperts.com/

On 6/22/2022 at 8:28 AM, NicoTHE said:

I have the same problem with a flag image that I am trying to have on my home page.

I don't see a flag icon. It is hard to provide a solution when we can't see the issue.

Quote

I can reduce the size with the spacer and it's fine on the desktop but the mobile version displays the image bigger.

In general spacer blocks are "removed" from the mobile view. As in most cases it doesn't make sense for them to be there because of limited space.

There is no flag because I had to remove it since I don't have a solution for the flag size on mobile. Most of people now check a website from the cellphone, so I could not leave for them to see a huge flag when they arrive on the home page. That's why I added a screenshot of the flag on dashboard and then on mobile view so you can see how it looked like.

I know now that the spacer blocks are the problem for the mobile view, that's why I'm trying to see here if someone can help me find a solution with custom CSS instead that would fix the problem. 

17 minutes ago, NicoTHE said:

There is no flag because I had to remove it since I don't have a solution for the flag size on mobile.

Can you duplicate the page, add the flag, and point us to the duplicate? That would allow us to come up with the general code. It would need a last minute tweak (ids) once you added the flag to the real page.

https://myadaandnicolas.squarespace.com/home-copy

https://treehouseexperts.com/home-copy

I hope this works, I'm trying to figure out how to share it with you 😆

2 hours ago, NicoTHE said:

https://myadaandnicolas.squarespace.com/home-copy

https://treehouseexperts.com/home-copy

I hope this works, I'm trying to figure out how to share it with you 😆

The url doesn't work. Did you enable page yet?

that should work now page is enabled https://myadaandnicolas.squarespace.com/home-copy

1 hour ago, NicoTHE said:

that should work now page is enabled https://myadaandnicolas.squarespace.com/home-copy

 

Add to Design > Custom CSS

/* Flag on mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1656710175672_8894 {
    width: 20%;
    float: right;
}
}

It works! Thanks so much for your help!