Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card feature hub using HTML and CSS

@izkurten

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I think I managed to deploy it on GitHub this time, without complications. The thing I got confused with was positioning of the divs, because I did the math in my head where I had to position the ones on the left and right, and it didn't make sense when I typed it. I think, since I moved them around in the beginning, and then gave them a relative positioning, that made them have totally different placements, because I tried with absolute and it actually made sense. You can see in the CSS file that some of the positioning is weird, like instead of left: 200px, I wrote right:1000px or something, which I'd want to stay away from in the future. Other than that, it looks pretty similar. Could make the font of the <h2> lighter.

Community feedback

@izkurten

Posted

When I open the file, the divs are not on top of each other, but placed correctly. I don't know why it happens like that in the solution. I was made aware that I need JS to make a page scalable to smaller browser size, but it might be possible with CSS as well and that might be my problem. Pls let me know if you have any tips :)

0

@MelvinAguilar

Posted

@izkurten Hi! JS is for adding behavior to websites, it should not be used to make your page scalable to other devices, that should simply be solved with CSS.

The problem is that you have used relative positioning and many properties such as top and left. On my computer, the divs overlap as shown in the screenshot. This challenge is perfect for using Grid layout instead of relative positioning. You should also use media queries to adapt your solution for mobile devices.

0

@izkurten

Posted

@MelvinAguilar Hi, thank you for the feedback. I will surely go back and review the code and try to fix it.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord