Bug: [V2 truck features] blocks overlap others on certain viewports

ZoeBeykirch commented 3 months ago

Issue Type

Bug

Summary

On laptop devices in certain viewports the [V2 truck features] block wraps outside of it's container causing it to bleed into other blocks.

Priority

Blocker

Description

When viewing a page with the [V2 truck features] block on certain monitors the block overlaps others. The minimum browser height where there is no longer an overlap is 1.89:12 (1536x812px) and anything larger than this will cause the issue.

Have tried to address this issue by putting the heading it a separate section and adding a transparent spacer image at the end of each feature block and have also tried transparent images, but it appears there is a white background applied to the image placeholder.
It seems that in the code, removing the top: 50%; transform: translateY(-50) may solve this issue as seen in the below examples:

Turned on -

Turned off -

current state -

Affected Device Classes

Desktop

Affected Browsers/Devices and Versions

Noticed on laptop monitor, resolution 3840x1758 with Chrome browser Noticed on laptop computer size 2.18:1 (1536x703px)

The minimum browser height where there is no longer an overlap is 1.89:12 (1536x812px) and anything larger than this will cause the issue.

Steps to Reproduce

Navigate to https://main--vg-macktrucks-com--hlxsites.hlx.page/trucks/granite-series/granite
Adjust screen size to 2.18:1 (1536x703px) for laptop
scroll down to the v2 truck features block and notice how the corner of an image bleeds into another

Expected Results

https://www.figma.com/design/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?m=dev&node-id=13592-42738&t=TJv3tgAehtvN1Ojw-1

Actual Results

Attachment

No response

mollyaljenkins commented 3 months ago

@girishdigrajkar Please take a look for indicating size of bug. Thanks !

BeckyMedlin commented 3 months ago

Removed from sprint and moved to backlog as an additional change to remove the white background has been requested. @ZoeBeykirch to work with marketing to gather all specifics before refinement.

girishdigrajkar commented 2 months ago

Validated and able to get the correct results now hence, closing this issue:

hlxsites / vg-macktrucks-com