@shake88junt
Submitted
Let me know if any errors/improvements. Still trying to cut down on css lines.
Looking to hire developers?
@shake88junt
@shake88junt
Submitted
Let me know if any errors/improvements. Still trying to cut down on css lines.
@shake88junt
Posted
Very good suggestions for organization and sematics. I appreciate it so much. A lot of the alt tags and such I am quite lazy to fill in. Although, I should treat these products more seriously to form good practices. Great idea to include the links inside <a> tags and use button tag for buttons. I usually just wrap all my content inside <main>, but I guess I could put a header above.
@nees101
Submitted
I am just a beginner and it is the first time I have completed a responsive site. I would like to get advice on the areas that needs improvement. Thank you.
@shake88junt
Posted
Good job man, very well done.
Only improvement would be to set your background to width: 100%
and background-size: 100% 100%
.
@VihagaYohan
Submitted
Hi, I'm Yohan and new to web dev. My question is how to make background SVG image center in tablet mode using media queries. I tried with below code block and didn't work as i expected. body { background: url(../images/pattern-background-mobile.svg); background-position: center; background-repeat: no-repeat; background-size: cover; }
When I applied the above style, the background image was stretched. How to fix this issue. Thanks in advance, Yohan
@shake88junt
Posted
Good job. An improvement would be to set the background color of the music icon to same color of the Annual plan background. (Ex. white to light blue).
A way to create background images that properly scale would be to create a div with the img inside of it ->
<div> <img src = "./example_img.png"/> </div>
then set the img visibility to hidden with 100% width->
<styles> img{ visibility: hidden; width: 100%; } </styles>
then set the background url ->
<styles> div{ width: 100%; background: url('example_img.png') no-repeat; background-size: 100% 100%; } </styles>
CODEPEN EXAMPLE => Codepen Link
Marked as helpful
@shake88junt
Submitted
I was confused if I was supposed to make the borders to the edge of the screen. Also, the designs had "rounded corners". I'm not sure if I was supposed to replicate that.
@shake88junt
Posted
Crap yeah, I totally forgot to make it an actual button. The margin tip is good thanks, and also making the small screen smaller would look nicer. Appreciate someone actually reading it , ty