@rnguecoSubmitted over 3 years ago
My solution to the "Article preview component" challenge, implemented using HTML, CSS, and JavaScript. Feedback on any part of my code is appreciated!
Hachi
@hachi-opsAll comments
- @Vj3koSubmitted almost 4 years ago
Finished this single price grid layout, i would be really happy if someone can check it out and comment what i can do better, or to shorten code, or anything really. Until next time, keep on coding !
@hachi-opsPosted almost 4 years agoResponsiveness works perfect, well done. I would suggest to make paragraphs font size on your mobile design same size for all of your divs. Also, you forgot to add hover state to the button (see README.md file for this project).
1 - @AlexGandertonSubmitted almost 4 years ago
I think this is the best I have done so far. Any feedback on any ways it could be done better/differently are greatly appreciated.
@hachi-opsPosted almost 4 years agoIt's very good and the only thing I would point out is the layout just at above 900px. You get two rows of stars instead of one so it may be a good idea to add another media query at different breaking point and fine tune the alignment. I too completed this challenge today and was getting the same layout with stars not aligned in one line at roughly same 900px resolution so I added min-width and had to tweak margins and paddings to align everything. Try adding min-width to the divs with stars and see if it helps the layout when changing screen size. You may want to look up my solution although I added some extra breaking point with completely different layout between 600 and 992px which wasn't actually part of the design.
1 - @Sa1nersSubmitted almost 4 years ago
This is my first challenge so all feedback welcome. the one think i struggled with was making the background smaller as my live version looks to large.
- @Sa1nersSubmitted almost 4 years ago
This is my first challenge so all feedback welcome. the one think i struggled with was making the background smaller as my live version looks to large.
@hachi-opsPosted almost 4 years agoJust checked: quotes between brackets aren't necessary: url('...') or url(...) doesn't matter. I didn't have them in my solution and it loaded pictures anyway but it is considered a good practice to include them.
1 - @Sa1nersSubmitted almost 4 years ago
This is my first challenge so all feedback welcome. the one think i struggled with was making the background smaller as my live version looks to large.
@hachi-opsPosted almost 4 years agoYes you can have two images separated by commas:
background-image: url('...') , url('..');
1 - @Sa1nersSubmitted almost 4 years ago
This is my first challenge so all feedback welcome. the one think i struggled with was making the background smaller as my live version looks to large.
@hachi-opsPosted almost 4 years agoHello Mark, You are missing double quotes in your index.html in line 36 (but I don't think this is the reason why it displays incorrectly :)
Actually the design is there if you scroll down. It shows the card exactly in the middle of the page:) Vercel should update git hub changes automatically but maybe if you try to login to Vercel again and see what happens.
1 - @hachi-opsSubmitted almost 4 years ago
It was tricky to decide what it should look like at different breaking points. I would appreciate your feedback.
@hachi-opsPosted almost 4 years agoThank you for a prompt feedback!
I have just cleared HTML issue.
As for the sizes: I really have difficulty assessing sizes of the elements as I am viewing designs in Microsoft Paint and switching to grid view (it shows me 1440px). Then I am just counting the lines (1 line=10px). I might be doing it the hard way though, but I don't know any other way.
0
