Riyana Gueco• 495
@rngueco
Submitted
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-ops
All comments
- Hachi• 155
@hachi-ops
Posted
This comment was deleted
0 - Vjekoslav• 485
@Vj3ko
Submitted
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• 155@hachi-ops
Posted
Responsiveness 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 - Alex• 310
@AlexGanderton
Submitted
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• 155@hachi-ops
Posted
It'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 - Mark Sainsbury• 45
@Sa1ners
Submitted
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• 155@hachi-ops
Posted
This comment was deleted
0 - Mark Sainsbury• 45
@Sa1ners
Submitted
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• 155@hachi-ops
Posted
Just 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 - Mark Sainsbury• 45
@Sa1ners
Submitted
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• 155@hachi-ops
Posted
Yes you can have two images separated by commas:
background-image: url('...') , url('..');
1 - Mark Sainsbury• 45
@Sa1ners
Submitted
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• 155@hachi-ops
Posted
Hello 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• 155
@hachi-ops
Submitted
It was tricky to decide what it should look like at different breaking points. I would appreciate your feedback.
Hachi• 155@hachi-ops
Posted
Thank 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
