Custom Size for one image?

 I am looking to change the size of only a few images in my order form. How do I enter the CSS code to do that without changing all of them?

Within the link, I want the yellow image to go all the way across the form and keep the products the smaller size.

You can reach the yellow image and set its width 100% with this code:

#cid_42 > div > div > span:nth-child(1) > img{
    width:100%;
}

Please inject this code into your CSS.

The yellow image will be seen as you want when preview.


For reaching specific elements on the form, you can try your browser's inspect tool.


You can use this selector on our CSS field.
Please feel free to ask anything.

That worked. Thanks. But how do I do that for the other ones in yellow? Also, Will this auto scale if someone is on a phone vs a desktop?

If you want to stretch all product images along the row, please inject this code into your CSS:

.form-product-image-with-options {
    width : 100%;
}



This code makes all images width's like 100% of the screen. So the image will be responsive according to people's screen. Please look at this:


If you have any questions, please contact us.