Photos don't line up with products when I add

in products listings with a photo- they don't line up because i added an "empty" free one to act as a header.  Can you fix the code so that its possible to make each photo line up.

ie:  the last three don't have photo - cuz i added three sublistings.

my form: 
https://www.jotform.com//?formID=63154847172156#design

LOVE THIS capability

can you let me know what you do to fix it - i will be making a form for each of my customers!!

So will be repeating...

thanks, deb

oops, i think i meant to say headers - therefore making the products the subcategories.

I may have answered myself- if you take a product and turn it into a "heading" by making it free and applying that code - you have to add a photo to it - in order for the all the photos to line up with their perspective products.  anyway..  is there a work around--  i quess i could add a logo or line as a photo.. mmm sounds good to me

Thank you for updating us on the status. I checked your form https://www.jotform.us/form/63154847172156 and I see it looks great already. 

Feel free to contact us anytime should you need assistance.

Cheers

thanks,  
but i have to make a photo for the "headers" like JOSEPH's PHOTO PKGS-because when u try to open the photos connected with products at the bottom set- it opens blank..
so i'll work around with finding/making a small thumbnail for the "header" products 

your page:

https://www.jotform.com/help/178-How-to-Have-Sub-Category-or-Sub-Labels-on-an-Order-Form

didn't mention the part about photos not lining up.

I am so psyched with this capability though!  So cool. Thanks!

We're glad to hear that you like this, and there is a way to move the labels themselves even when there is no product image. We can do this by using a bit of custom CSS, such as this one:

label.form-product-container:nth-child(2) { margin-left: 62px; }

This code would move all the product that do not have an image, so they would line up with those that do have a product image:

You can add the above provided line of CSS by following this guide:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Please let us know should you need any further assistance.

here's what i meant by lining up...in perfect world... hah lol

photo a - product a

photo b - product b

photo c - product c

if you make 1st one a header with no photo then

header  - product a (no photo)

photo c - product b

photo d - product c

blank    - product d

(mind you, the thumbnails will be there, hah, laughing at you {looking perfect}- till u click it! And, sure, how would you guys know- which product goes with which photo.)

i prefer no photo for the "headers"  but will come up with something like graphic letters of the first names to make the page look not so full. and more elegant, lol.

ps i was wondering what part of code could even make all the photos shift up one product- that was cool. Not!  funny, though.   I didn't think that could happen.

If I'm understanding your concern correctly, then, I believe,below is what you would like to happen to your form.

I have added the CSS codes below to the form shown in the image above to make it look like that.

span.form-product-item.hover-product-item:nth-child(6), span.form-product-item.hover-product-item:nth-child(8), span.form-product-item.hover-product-item:nth-child(10), span.form-product-item.hover-product-item:nth-child(16), span.form-product-item.hover-product-item:nth-child(18), span.form-product-item.hover-product-item:nth-child(22),span.form-product-item.hover-product-item:nth-child(24), span.form-product-item.hover-product-item:nth-child(26) {

    padding-top: 28px !important;

}

span.form-product-item.hover-product-item:nth-child(6) img.form-product-image, span.form-product-item.hover-product-item:nth-child(8) img.form-product-image, span.form-product-item.hover-product-item:nth-child(10) img.form-product-image, span.form-product-item.hover-product-item:nth-child(18) img.form-product-image, span.form-product-item.hover-product-item:nth-child(22) img.form-product-image, span.form-product-item.hover-product-item:nth-child(24) img.form-product-image {

    position: relative !important;

    top: -22px !important;

}

span.form-product-item.hover-product-item:nth-child(12) {

    padding-top: 68px !important;

}

span.form-product-item.hover-product-item:nth-child(12) img.form-product-image {

    position: relative;

    top: -62px;

}

span.form-product-item.hover-product-item:nth-child(16) img.form-product-image, span.form-product-item.hover-product-item:nth-child(26) img.form-product-image {

    position: relative;

    top: -20px;

}

label[for*="1010"], label[for*="1011"], label[for*="1012"]{

    top: 31px !important;

    position: relative;

}

I hope this helps. If, in any case, I have misunderstood your concern, please feel free to contact us anytime.

Thank you.

https://www.jotform.com//?formID=63173760584158

now look at thumbnails of last three products- and OPEN them.

All photos have moved up to the product above if:

if you make 1st one a header with no photo then

header  - product a (no photo)

photo c - product b

photo d - product c

blank    - product d

(mind you, the thumbnails will be there, hah, laughing at you {looking perfect}- till u click it! And, sure, how would you guys know- which product goes with which photo.)

i prefer no photo for the "headers"  but will come up with something like graphic letters of the first names to make the page look not so full. and more elegant, lol.

ps i was wondering what part of code could even make all the photos shift up one product- that was cool. Not!  funny, though.   I didn't think that could happen.

what i mean by "lined up"

should be

Photo 1 with Product 1

Photo 2 with Product 2

Photo 3 with Product 3

    but if you make Product 1 a header row then: (with NO PHOTO)

Product 1

Photo 3 with Product 2

Blank with Product 3

and in the case above i have 3 headers so the last three photo THUMBNAILS don't open- and the photos that DO OPEN are NOT the right photo with the right product.

the clone example in above post at 9:29 november 13 (today)

A workaround this would be uploading an image for the items you are using as headers:

And then hiding these images by injecting the following custom CSS: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

span.form-product-item:nth-of-type(1) img{

display: none !important;

}

span.form-product-item:nth-of-type(6) img{

display: none !important;

}

span.form-product-item:nth-of-type(9) img{

display: none !important;

}

Result: https://www.jotformpro.com/form/63175100020941? 

Let us know if you need more help, we will be glad to assist you.

yes!! thank you!  Right on.  
Can I use this form and can you apply CSS to make the thumbnails appear taller, please.

And will i be able to make this form customized for each of my customers with the same code- as long as i keep track of which product numbers are header rows.

thanks!

Can I use this form and can you apply CSS to make the thumbnails appear taller, 

You can clone BDAVID's form https://www.jotformpro.com/form/63175100020941? if you like.

User guide: How-to-Clone-an-Existing-Form-from-a-URL

And will i be able to make this form customized for each of my customers with the same code- as long as i keep track of which product numbers are header rows.

If your other forms were a cloned version of the original for, the CSS codes maybe applicable. But if its not, you need to check the field ID# so that it can be applied.

If you have other question please create a separate thread for it. You can use this link https://www.jotform.com/contact/

Thanks.

Awesome, thanks!!

I am a new customer!

You're quite welcome. We're glad to be of help. :-)

Contact us anytime for any assistance you need on JotForm.

Cheers