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

Resize one image with CSS


Question

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

Bildschirmfoto 2021-07-13 um 17.03.34.png

Bildschirmfoto 2021-07-13 um 17.00.07.png

Link to comment
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

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

Bildschirmfoto 2021-07-13 um 17.03.34.png

Bildschirmfoto 2021-07-13 um 17.00.07.png

Hi. What is access password?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Link to comment
  • 0
On 7/16/2021 at 2:41 PM, SarahHalbeisen said:

Thank you so much! This did the trick.

Hi. Do you need help with these?

Site URL – https://sprout-dragonfly-f48x.squarespace.com/?password=Hypnose2021

1. (Desktop – Homepage) Align buttons?

https://sprout-dragonfly-f48x.squarespace.com/?password=Hypnose2021

sprout-dragonfly-f48x.squarespace.com-01

2. (Mobile – Homepage) On desktop, the entire image can be seen. On mobile, the image is partially cropped.

https://sprout-dragonfly-f48x.squarespace.com/?password=Hypnose2021

sprout-dragonfly-f48x.squarespace.com-02

3. (Tablet – Homepage) Remove white space on the right of page?

https://sprout-dragonfly-f48x.squarespace.com/?password=Hypnose2021

sprout-dragonfly-f48x.squarespace.com-03

4. (Tablet – hypnosetherapie) Increase text width?

https://sprout-dragonfly-f48x.squarespace.com/hypnosetherapie/?password=Hypnose2021

sprout-dragonfly-f48x.squarespace.com-04

5. (Tablet – hypnosetherapie) Increase text width?

https://sprout-dragonfly-f48x.squarespace.com/hypnosetherapie/?password=Hypnose2021

sprout-dragonfly-f48x.squarespace.com-05

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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