Technical task: Adaptation of the product card page for different screen resolutions for PC
1. General description
It is necessary to adapt the product card page according to the design presented in
the screenshot. The main goal is to ensure the correct placement of elements on different
screen resolutions, improve UX, and make the interface more user-friendly.
2. Responsiveness requirements
● The page must display correctly on screens with a width of 1024px and
above.
● Use flexible grids (e.g., flexbox, grid) for positioning
blocks.
● Ensure proper scaling and spacing between elements.
3. Changes on the page
3.1. Block with price and characteristics
● Ensure a fixed position for this block when scrolling the page
(sticky position).
● Add the text "Guaranteed cashback".
● The cashback amount is automatically calculated as 1% of the discounted price and must
be rounded down to 1 UAH.
3.2. Changes in product cards
Mattresses
● Rename "Additional information" to "Characteristics".
● Add:
● "Allowed load". (the number can be taken from the properties)
● "Video review" (if there is a video in the gallery, open the gallery specifically with the video; if
not, the item does not display).
Beds
● Rename "Sleeping place size" to "Sleeping place size (W x
L)".
● Rename "Size" to "Dimensions (W x L x H)".
● Add:
● "View samples" (scroll to the fabric samples).
● "Video review" (similarly to mattresses).
● "We recommend adding" (scroll to the "Frequently bought together" block).
● Rename "Additional information" to "Characteristics".
● Remove the "Fabric category" item from "Additional information".
● Arrange in the order specified in the screenshots.
4. Layout requirements
● Correct display in browsers Chrome, Firefox, Opera, Edge, Safari.
5. Testing and acceptance of work
● Work to be done on the dev version of the site
● Testing on screens 1024px, 1280px, 1440px, 1920px.
● Check the correct display of all elements.
● Test the functionality of scrolling, zooming, and the responsive price block.
6. Deadline
● Desired deadline – 10 working days.
7. Notes
● Start with the product card – mattresses. After completing the work, provide for
review. After approval, continue working on other categories.
9. Additional materials
● Screenshot of the product card example (mattresses): Product_card-mattress.jpg
● Screenshot of the product card example (beds): Product_card-bed.jpg
● Example of display at 1920px resolution: Screenshot_2.png
