Skip to content
Submitted over 1 year ago

Four card feature hub using HTML and CSS

Christopher Tonkov•20
@izkurten
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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

  • Christopher Tonkov•20
    @izkurtenPosted over 1 year ago

    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
    Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted over 1 year ago

    @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
    Christopher Tonkov•20
    @izkurtenPosted over 1 year ago

    @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

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