Almost there!

[divineaverage]

Hey Conor,

Getting there! I'm still having a few issues and thought I'd ask now instead of banging my head against the wall.

1. On the restaurant pages, I cannot get that green box to slide in correctly for the life of me. I can transform opacity, but width doesn't seem to want to transform at all, and it's doing some weird stuff - like if I remove the opacity of the dish checkbox to try anything else, it removes the rotate transformation on the hover lower down for some reason. It's driving me insane, I can't figure out what I'm not seeing!

2. The footer. Should be easy, but I can't figure out how to space out those columns better to use the entire space (and keep it responsive). I've tried all the column-width and associated options in a ton of combinations, but none of it does the trick.

3. When I validate, I'm getting this error for some of the sections that don't have headers. Should I change those to divs? Wanted to confirm before I did it.

   

Thank you for any and all thoughts!

[AccessiT3ch]

On the restaurant pages, I cannot get that green box to slide in correctly for the life of me. I can transform opacity, but width doesn't seem to want to transform at all, and it's doing some weird stuff - like if I remove the opacity of the dish checkbox to try anything else, it removes the rotate transformation on the hover lower down for some reason. It's driving me insane, I can't figure out what I'm not seeing!

@divineaverage Hey so for this one, it looks like the transition and width:40% are being set on the .dish-cont__col-2 element, but it doesn't have a starting width property. It also looks like the transition property is only applied on hover, but should be applied to the elements normal state (not-hovered). I think if you apply the transition and width properties to .dish-cont__col-2 it should animate correctly!

[AccessiT3ch]

The footer. Should be easy, but I can't figure out how to space out those columns better to use the entire space (and keep it responsive). I've tried all the column-width and associated options in a ton of combinations, but none of it does the trick.

Oh interesting approach here, I don't typically use the column-* styling, but it looks like a good approach here! It looks like, for whatever reason, the footer flex styling is shrinking the ul, so I would just manually set the width for the ul to 75% (b/c the logo is 25%), and then you can set the column-gap to a percentage value and it should be nice and fluid!

[AccessiT3ch]

When I validate, I'm getting this error for some of the sections that don't have headers. Should I change those to divs? Wanted to confirm before I did it.

As I think you're touching upon, sections should semantically have header tags! For the most part it does look like your sections make sense, I do see a few spots where a div may be more appropriate.

• [ ] Home: move restaurant__title into the section
• [ ] Home: .searchbox may make more sense as a div
• [ ] Bastille: .restaurantpage__imgbox should probably be a div
• [ ] Bastille: . menu__name should be an h1 (since there isn't already one!)

[divineaverage]

AMAZING! Thank you soooo much. It makes sense now, the transition has to be on the non-hover state. DUH. I think everything is good now! Let me know if I missed anything. Thank you again!!

[divineaverage]

Ok, there's one weirdo thing I can't figure out - on the restaurant page, check out the hover on the price of "Grandmother's Vegetable Soup" -- I think because it's long, it's doing some weirdo thing but I have no idea why lol. Any thoughts?

[AccessiT3ch]

Oh my yes I see it, talk about a seizure warning! I think adding an explicit width to the .dish__container element should probably be enough to prevent that behavior.

adding an explicit width

By this I mean fixed pixel widths at higher breakpoints, and percentages for fluidity at lower breakpoints.

[AccessiT3ch]

@divineaverage the menu item animation looks good to me, it's a little different from the animation in the provided video, but I don't know how strictly the assessors will adhere to the mockup.

I played around with it a bit to try and animate the widths, but couldn't quite figure out how to make it work smoothly, it might need a bit of refactoring to achieve the sliding out effect.

I think it could make sense to go ahead with the presentation anyways, and if they catch it / request changes, then we can triage further if needed. Or, if you want to be a perfectionist, this is your chance ;)

[divineaverage]

That is so funny, I was in there messing with it for the last hour because I also noticed it's fading in still and not coming in from the right. I read something in my journeys about width not working right on transition but I don't know. I think we can try to push it past and see how it goes. That totally solved the problem of the seizure-inducing issue though :D thank you!!

On Fri, Oct 14, 2022 at 1:42 PM AccessiT3ch @.***> wrote:

@divineaverage https://github.com/divineaverage the menu item animation looks good to me, it's a little different from the animation in the provided video, but I don't know how strictly the assessors will adhere to the mockup.

I played around with it a bit to try and animate the widths, but couldn't quite figure out how to make it work smoothly, it might need a bit of refactoring to achieve the sliding out effect.

I think it could make sense to go ahead with the presentation anyways, and if they catch it / request changes, then we can triage further if needed. Or, if you want to be a perfectionist, this is your chance ;)

— Reply to this email directly, view it on GitHub https://github.com/divineaverage/P3_OhMyFood/issues/2#issuecomment-1279290413, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZVIXX4CADKKRIOW2PGLA23WDGLOXANCNFSM6AAAAAARERTFTQ . You are receiving this because you were mentioned.Message ID: @.***>

[divineaverage]

I think I fixed everything! Validator says yay as well. Going to create the other menu pages and push everything. I scheduled my presentation for the 25th, so we have another meeting before then. Going to also start project 3. Thanks as always!!