Answer fields on the image

  • Resolved Sportuojantys

    (@needfeed)


    1 year, 2 months ago

    Hi, I wanted to ask is it possible to get an answer of the calculation directly on top of the image?

    For example, images is here:
    https://ibb.co/8D22wcVq

    Spots for calculation field answers are circles marked as A, B, C, D, E.

    So maybe I can tell the coordinates of the images to CFF and it would make these answers appear on these circles in the image?

    The page I need help with: [log in to see the link]

Viewing 8 replies - 16 through 23 (of 23 total)
1 2
  • Thread Starter Sportuojantys

    (@needfeed)

    11 months, 3 weeks ago

    Hi, thanks, on PC it looks good but on phone number position is bad, why?
    Also is there a way to centre all the output numbers, or should they be centred individually because they are in different positions?

    • This reply was modified 11 months, 3 weeks ago by Sportuojantys.
    • This reply was modified 11 months, 3 weeks ago by Sportuojantys.
    Plugin Author CodePeople2

    (@codepeople2)

    11 months, 3 weeks ago

    Hello @needfeed

    Please note that I sent you only an example with a specific width and height. If you want to use the line-height method for centering vertically, and each box has a different width and height, you must configure them separately.

    Exists other alternatives as using flex-box:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Best regards.

    Thread Starter Sportuojantys

    (@needfeed)

    11 months, 3 weeks ago

    I used Flex-box approach, number is shown in great position of PC, but on mobile it’s on the right, not the center. Maybe there is a bug somewhere? Why number are not in the same position on every device with different screen size?

    Code:
    <span style="position: absolute; top: 44%; left: 7.5%; font-weight: normal; color: white; font-size: clamp(18px, 3vw, 40px); display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; text-align: center;" data-cff-field="fieldname8"></span>

    • This reply was modified 11 months, 3 weeks ago by Sportuojantys.
    Plugin Author CodePeople2

    (@codepeople2)

    11 months, 3 weeks ago

    Hello @needfeed

    If you need these elements to appear in the same spot on every screen size, their placement and dimensions must be driven by the container that holds them. You can’t center them based solely on the position of the number; they’ll always align relative to the parent element’s position and size.

    Please provide the URL to the page containing the form.

    Best regards.

    Thread Starter Sportuojantys

    (@needfeed)

    11 months, 3 weeks ago

    [ Obfuscated link moved to link field ]

    Plugin Author CodePeople2

    (@codepeople2)

    11 months, 3 weeks ago

    Hello @needfeed

    You’re running into a classic CSS scaling issue:

    • Your background image and number-boxes are sized and positioned using percentages, but the font-size remains static.
    • As the image rescales, the boxes follow suit, yet the text inside doesn’t, so everything feels out of proportion.

    The simplest fix is to switch to fixed (or more controlled relative) units and then use media queries to tailor each element for different screen sizes. For example:

    1. Define explicit dimensions for the background container, boxes, and font-sizes (e.g., in rem or px).
    2. Use @media rules to tweak those values at breakpoints, adjusting the background image’s size, box positions, and font-sizes to maintain consistent visual proportions across devices.

    https://developer.mozilla.org/en-US/docs/Web/CSS/@media

    Best regards.

    Thread Starter Sportuojantys

    (@needfeed)

    11 months, 3 weeks ago

    Hi, thanks for your answer.

    I have the code with @media, it works good, the size on both PC and mobile is good (maybe it’s possible to update this code that it would be centered, without using Flex-box?):

    <span style="position: absolute; top: 44%; left: 7.5%; font-weight: normal; color: white; font-size: clamp(18px, 3vw, 40px); @media (max-width: 768px) { top: 44%; left: 8%; font-size: clamp(16px, 4vw, 32px); } @media (max-width: 480px) { top: 44%; left: 7%; font-size: clamp(14px, 5vw, 28px); }" data-cff-field="fieldname8"></span>

    BUT, the position is not centered like it was with Flex-box (but there was a problem with size and position on mobile here, so I didn’t use it):

    <span style="position: absolute; top: 44%; left: 7.5%; font-weight: normal; color: white; font-size: clamp(18px, 3vw, 40px); display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; text-align: center;" data-cff-field="fieldname8"></span>
    • This reply was modified 11 months, 3 weeks ago by Sportuojantys.
    Plugin Author CodePeople2

    (@codepeople2)

    11 months, 3 weeks ago

    Hello @needfeed

    If you require a exact position of your boxes, for each box with a number, you must adjust the width and height as well as the font-size, line height, and boxes positions, based on the screen sizes. You cannot modify the other CSS rules and maintain constant the width and height.

    Best regards.

Viewing 8 replies - 16 through 23 (of 23 total)
1 2

The topic ‘Answer fields on the image’ is closed to new replies.