Feature whatweoffer component - #320

✅ Deploy Preview for services-dev-webdevpath ready!

Name	Link
🔨 Latest commit	74e37d4
🔍 Latest deploy log	https://app.netlify.com/projects/services-dev-webdevpath/deploys/6aa09645a3f2100007ed7608
😎 Deploy Preview	https://deploy-preview-320--services-dev-webdevpath.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

This looks really good already. I can see a few small differences from the design.

1. The scrolls should be a bit slower
2. The colors are opposite in alternate rows
3. The scrolling doesn't stop in the design, yours does, but I do like your implemenation more

On some screen sizes, the brackets look a bit weird, like this

2. The colors are opposite in alternate rows

Thanks for the feedback! Can you further explain what you mean by this ^?

2. The colors are opposite in alternate rows

Thanks for the feedback! Can you further explain what you mean by this ^?

For example, Product and project management is blue in the first row then yellow in the second row, and blue again in the last row

But I had another look, it seems not consistent and I see a jump every few seconds in the prototype

Maybe we can just ignore it unless you can see a clear pattern?

Hey @cherylli! Looked into both things.

The pill colors are all good, they match up across all three rows, nothing off there.

For the decoration sizing I checked Chrome and Edge side by side at the same zoom (50%, 67%, 100%) and the brackets scale the exact same way in both, so it's not a browser thing, it's just doing what it's supposed to (same as our other decorations). One catch though, we can't have the brackets stay full size at every screen width and keep the pill box centered/full width. There's just not enough room outside the box for that at most normal screen sizes but I could shrink the pill box to make some more room.

Hey @cherylli! Looked into both things.

The pill colors are all good, they match up across all three rows, nothing off there.

For the decoration sizing I checked Chrome and Edge side by side at the same zoom (50%, 67%, 100%) and the brackets scale the exact same way in both, so it's not a browser thing, it's just doing what it's supposed to (same as our other decorations). One catch though, we can't have the brackets stay full size at every screen width and keep the pill box centered/full width. There's just not enough room outside the box for that at most normal screen sizes but I could shrink the pill box to make some more room.

thanks. Not sure if we are looking at different sources?
For example, "Startup & Nonprofit Tech Support", it's blue on first line but yellow on second
and they also don't line up perfectly like your screenshot

@Web-Dev-Path/development-team can someone else have a look at this?

Is the deployment preview working for anyone else, it's not scrolling for me
https://deploy-preview-320--services-dev-webdevpath.netlify.app/services

Hey @cherylli! Looked into both things.
The pill colors are all good, they match up across all three rows, nothing off there.
For the decoration sizing I checked Chrome and Edge side by side at the same zoom (50%, 67%, 100%) and the brackets scale the exact same way in both, so it's not a browser thing, it's just doing what it's supposed to (same as our other decorations). One catch though, we can't have the brackets stay full size at every screen width and keep the pill box centered/full width. There's just not enough room outside the box for that at most normal screen sizes but I could shrink the pill box to make some more room.

thanks. Not sure if we are looking at different sources? For example, "Startup & Nonprofit Tech Support", it's blue on first line but yellow on second and they also don't line up perfectly like your screenshot

@Web-Dev-Path/development-team can someone else have a look at this?

Is the deployment preview working for anyone else, it's not scrolling for me https://deploy-preview-320--services-dev-webdevpath.netlify.app/services

Yea some extra eyes would be helpful. The deployment preview is working fine for me, no issues there.

I found out the deployment preview (What we Offer scrolling) doesn't work for me on chrome and edge but works on firefox. I'm on Linux (fedora), not sure if anyone can verify if this is the case.
I think we can possibly ignore this since it's an edge case and it doesn't really affect the website functionality

Scrolling works fine on Chrome/Brave on Ubuntu

Pill colors seems consistent

Hi, sorry been sick lately. I think there might be some confusion about "alternate color". I mean alternate in rows, not column. In fact they both alternate.

This is the original design

For example, you can see in the second image, "Startup & Nonprofit Tech Support" are blue in the first line, and third line/row, while it's yellow in the middle line/row

I'm also aware that a couple are some color in all rows but I feel that it might be a figma animation issue.

I think the best approach would be asking the desginer @briangesteban @liamgingell for clarification and look at the implementation