@vipzas1234
Submitted
Looking to hire developers?
@satzzzzz07
@vipzas1234
Submitted
@satzzzzz07
Posted
Hey there, Great work on your first solution! Design looks good. There are few suggestions:
Centering the Element - For Centering the element in the page you can wrap the element in a div and use flexbox more about flexbox.
On the mobile screen size, the buttons or not rendering properly. I can see you mentioning a width
of 95%
try to center the button by using margin-left
and margin-right
to auto
The image rendered on mobile screen is very long and you need to use a different image for mobile screen. Check the images folder for mobile-product.png
. Also the height of the image needs to be small according to design. You can give a height in the media query for the image to change it for mobile screens.
Aside these, excellent work again and happy coding :) 👍
Marked as helpful
@vanessie2424
Submitted
I'm still having problem with getting it to fit the mobile view. Someone should please help out. Than you.
@satzzzzz07
Posted
Hey there, Great work on your first solution! Design looks good. There are few suggestions:
media-queries
checkout : css media queriesFew design suggestions (for current project)
Try to not use the border-radius
property on the overall container (code div), so it matches the style.
for the credits (Challenge by Frontend Mentor Coded by Anazodo Vanessa) you can add both of your p tags outside of the .code
div, so that they are outside of your code div container.
Aside these, excellent work again and happy coding :) 👍
@sunieltmg
Submitted
@satzzzzz07
Posted
Hey there, Great work on your first solution! Design looks good. There are few suggestions:
Try to add your background color on the body
instead of the section, so your background color is applied on all elements of your page.
for width of the section instead of hardcoding values you can use percentages like width:100%
which will make the background color flow through entire width of the screen.
You may try font-weight
for increasing the weight on headers.
Aside these, excellent work again and happy coding :) 👍
Marked as helpful
@Andrusik1
Submitted
Can someone correct my mistakes and tell some about best practices?
@satzzzzz07
Posted
Hey there, Great work on your first solution! Design looks good. There are few suggestions:
Try to use the fonts mentioned in the style-guide file. You can import the fonts from google fonts. Its a simple process, choose the font and then import them into your css or html files. You can use the font style using font-family
css property.
On mobile-screen, the border-radius
of the image is inconsistent. You can add border-radius
on top left and right sides instead of existing top-left and bottom-left sides. check out for border-radius
Try to match the font sizes in the design. You can always refer to the design files.
Also the image on the mobile-screen looks a bit messy. You can check out properties like object-fit
check here
Aside these, excellent work again and happy coding :) 👍
Marked as helpful
@NoobCoder57
Submitted
@satzzzzz07
Posted
Hey there, Great work on your solution! Design looks good. There are few suggestions:
Aside these, excellent work again and happy coding :) 👍
@Zzzackk
Submitted
Well, this is my first project and I had some difficulties during it but I think it is because I tought too much about simple things and made them way harder or complex than they should be, overall I think it looks decent. If you have any tips or feedback about the project I would love to hear them so that I can continue practicing and doing other projects. 👍
@satzzzzz07
Posted
Hey there, Great work on your first solution! Design looks good. There are few suggestions:
Try to use the fonts mentioned in the style-guide file. You can import the fonts from google fonts(https://fonts.google.com/). Its a simple process, choose the font, size and then import them into your css or html files. You can use the font style using font-family
css property.
Centering the Element - For Centering the element in the page you can wrap the element in a div. and use flexbox more about flexbox.
Aside these, excellent work again and happy coding :) 👍
Marked as helpful
@sagekim6
Submitted
@satzzzzz07
Posted
Congrats on your first project. Image and the white background not getting rendered while in the desktop. You can change the media query px value. (like min-value: 600px) to render big screens. You can initially work on mobile screens and then add media queries to match the big screens. Also Try implementing the mobile version of the design.
All the best 👍