Padding and alignment of the image container on cellphone

Ask the Community Customization
1

As I test my little calculator widget in cellphone mode, there is extra padding around the image. How can I centre it on-screen and reduce the waisted space? It’s set at 1:1 ratio.

I should also mention I added this code to make the image smaller in CSS code.

img {
border: 0px solid #ccc;
border-radius: 10px;
padding: 0px;
width: 120px;
height:200px;
filter:brightness(120%);
}

Screenshot 2025-05-28 at 2.11.47 PM
Screenshot 2025-05-28 at 2.11.47 PM1920×1182 98.7 KB

Thanks,
William

1 Like
3

Would you like to reduce the spacing in the Image Choice Container or completely remove this container, but keep the choice button?

4

Thanks Max,

I’d like to keep the container with image but have it tighter to the image and centred, if that makes sense.

Thanks, :grinning_face_with_smiling_eyes:

William

1 Like
5

Got you!

I’ve forwarded your request to the devs and will get back to you tomorrow :slightly_smiling_face:

1 Like
6

Awesome thank you. I try to figure things out as much as I can, but there are little things I need a helping hand.

Awesome support. :joy:

William

1 Like
7

Hi there, @William62 :waving_hand:

Here is the code to remove spacing from the container:

[class*='image-option__Item-sc'] {
  width: 100%;
  height: 100%;
}

[class*='MediaContainer__Inner-sc'] {
  position: relative;
}

[class*='image-option__Image-sc'] {
  padding: 0 !important;
  height: 100% !important;
}

And here is the code to align the image choice element to the center:

 [class*='image-choice__OptionsContainer-sc'] {
    grid-template-columns: unset !important;
    justify-content: center;
  }

  [class*='FormFieldLayout__Container-sc']:has([class*='image-choice__OptionsContainer-sc']):nth-child(3) [class*='FormFieldLayout__Label-sc'] {
    margin-left: 80px;
  }

Please try it out and let me know if it helped :slightly_smiling_face:

2 Likes
8

Thanks Max,

I was just working on some cold logic to reveal an image based on dropdown choice. Looking good. Thank you so much.

William

1 Like
9

Great, you’re always welcome :slightly_smiling_face:

1 Like