From 2f37b1de28399a361dc272b51ad624ac8902a562 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sat, 5 Apr 2025 16:51:58 -0400 Subject: Make need-page image work on all screen sizes --- .../src/app/components/need-page/need-page.component.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'ufund-ui/src/app/components/need-page/need-page.component.css') diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css index 79d3fb3..6ca1350 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.css +++ b/ufund-ui/src/app/components/need-page/need-page.component.css @@ -4,12 +4,13 @@ } #box { - padding-top: 7.5%; + /*padding-top: 7.5%;*/ display: flex; flex-direction: column; width: 800px; justify-content: start; gap: 10px; + padding: 0 10px; } .needName { @@ -25,14 +26,17 @@ .need-image { - width: 55%; + width: calc(100% + 40px); height: 40%; - position: absolute; + /*position: absolute;*/ left: 22.5%; aspect-ratio: 16/9; object-fit: cover; - mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%, transparent 100%); + mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 80%, rgba(255,255,255,.1) 90%, transparent 100%); border-radius: 10px; + margin-left: -20px; + margin-right: -20px; + margin-bottom: -80px; } .urgent { -- cgit v1.2.3