Stackable icon indicating copy to clipboard operation
Stackable copied to clipboard

Team Member Cover layout issue

Open andeng1106 opened this issue 1 year ago • 0 comments

Describe the bug

  • When adding a Team Member block and selecting Cover layout then adding an image for column background, it overlaps the team member image.
  • Investigation: Image gets cut off because of the overflow:hidden on stk--has-background-overlay
  • Issue happens on both editor and frontend
  • Reference: https://www.notion.so/Nick-Murray-b182b3370a1d4aa78c4679cef16a8a3e

To Reproduce Steps to reproduce the behavior:

  1. Add a new page
  2. Add a Team Member block
  3. Choose Cover layout
  4. Add a team member image
  5. In the first Columns nested inside the Team Member block, select to Inner Column
  6. In Inspector, go to Style > Container Background
  7. Add a background image or video
  8. See that the team member image becomes crop

Expected behavior

  • If I added a container background in the inner column at the back of the team member image, the image should not be cropped.

Workaround

.wp-block-stackable-team-member.is-style-cover .stk--has-background-overlay {
overflow:visable
}

Screenshots

https://github.com/gambitph/Stackable/assets/103395655/0494e38a-5128-4038-bd0f-59365c9e70df

andeng1106 avatar Nov 22 '23 04:11 andeng1106