All solutions

Hello guys,

I've just done this project ! It was a great one since I thought I would be in trouble building this one (especialy with the JS part) but I never really got stuck on a problem which was a real surprise. So I only have two quick questions:

1. How may I improve my code ? (I am almost 100% sure how I handle it wasn't at all optimal).
2. How can I keep the style of my ":active" state when the user click to give a note ? I tried to use ":focus" state but I lost the style's change...

Have a good one :D !

Hello guys,

Hope you're doing great ! Just finished this project. I must say I am really proud of myself. When I started this one I had absolutely no idea how to display those fours containers but thanks to Google I managed :D

I only have one issue though: I used media query to make my project responsive. It works BUT only on desktop, it doesn't work when I open the website on my phone. I had the same issue for all my projects (realising just now) and I have no idea why. The media query looks fine.

Could you please have a quick look at my CSS file, right at bottom, to see what's wrong ?

Cheers !

Hello guys,

First project of the day, it went pretty smoothly ! I just have two issues that I can't figure out:

1. My background images scale weirdly on mobile setup.. They are all over the place. Any chance I can set their positions to be fixed but their size to scale with the screen size ?

2. When I open the app on my phone the whole thing is too small and I would like it to keep a min-size. I tried to set up a min-height and min-width in my main container but it doesn't seem to do the trick.. Any solution ?

Thanks for reading ! Have a good one :)

I applied other users (precious) advices and used rem units to size my items instead of fixed sized and flex display everywhere. I must say it is much easier and faster this way.

Even though, the site seems to be responsive I would like my main container to fill 80% of the screen wdith wise when on a mobile. I checked on my phone and it's working properly (well, proportion are fine but too small). I have another issue as well with the image. When I sized down the page on my laptop, at a certain point, my main container fills 80% of the screen but the image is slightly shorter (width).

Thanks for reading !

Hey guys,

I've only done the desktop version of the mokup. I didn't really think about the responsivity when I set up the project. So, since all my heights and widths are fixed values it's screws everything up. I'll comeback later to fix it.

I had a tiny issue concerning the image. Oddly, the main container a tiny bit too large on the image' side and I don't know why. I had to shrink the whole container as I wasn't able to make the image fit. Moreover, I used the filter property to turn the image purple (the original is black&white) but I'm not sure if it was the right solution since the color doesn't match the reference.

Thanks for stopping by !

Hey guys,

I was wondering is there anyway to place all the different elements (image, title, paragraph) inside my main container without using flexbox>flex-direction:column ? My issue is that I always end up with spaces between the elements that I can't remove or even manipulate. I guess we could make the main container position relative and the childs position absolute but it seems tedious.. Is there any better solution ?

Thanks for having a look !