Rotated pictures

  • PresKCC
    Asked on September 4, 2019 at 12:53 PM

    Hi there! I am working on our spirit wear order for. For some reason, a few of our pictures are rotated. Help!


    Thanks,
    Tamie

    Page URL: https://www.jotform.com/build/92197236831159?iak=53e2dffa3d479350ce19bdf85eb94c00-24a21c5df03391c1
  • Nik_C
    Replied on September 4, 2019 at 1:53 PM

    Could you please advise you which of the image is not right:


    1567619598Screen Shot 2019 09 04 at 7 Screenshot 10

    Please advise.

    Thank you!

  • PresKCC
    Replied on September 5, 2019 at 2:43 AM
    Long sleeve t-shirt, Trucker cap, cinch bag, and car decal.
    Thanks,
    Tamie
    *Tamie Kuhn, President*
    *Kelso Community Club (KCC)*
    *34651 SE Kelso Rd.*
    *Boring, OR 97009*
    *(503) 668-8020*
    ...
  • Nik_C
    Replied on September 5, 2019 at 3:37 AM

    Thank you.

    I was able to rotate them so when you preview the form they will show rotated, with this CSS:

    #cid_7 > div > div > span:nth-child(3) > img {

        transform: rotate(90deg);

    }

    #cid_7 > div > div > span:nth-child(9) > img {

    transform: rotate(90deg);

    }

    #cid_7 > div > div > span:nth-child(11) > img {

    transform: rotate(90deg);

    }

    #cid_7 > div > div > span:nth-child(13) > img {

    transform: rotate(90deg);

    }

    But when you click on image it will still show as original, and that's because those images are in landscape resolution.

    For example, your short sleeve t-shirt is 768x1024px and your long sleeve t-shirt is 4032x3024

    So, to have the image in portrait view, the width should be smaller than height.

    If you want to fix it completely, you will have to resize your images and make them portrait. Then upload them again. (in that case, you should remove the code I added above from Custom CSS).

    Hope it helps.

    Thank you.