Skip to content
OverviewSolutions
19
Comments
2
Sulaiman Abubakar
@Abu-Sman

All comments

  • Hamza Kharal•50
    @kharalhamza98Submitted about 1 year ago

    I did this in an effort to stay on top of my HTML and CSS while I start learning JavaScript. I want to keep doing these once a week.

    A few issues with this one:

    1. When doing the mobile view, I wasn't able to center the buttons properly, they are ever so slightly misaligned from one another. I tried many fixes but couldn't attempt it.

    2. I could not figure out how to make the "computer" image center itself while the screen size shrinks. I was able to do it for the "devices" photo but not this one.

    3. Class names. I need to start using better class names to make it easier to understand where things are and what element they are for. It became a big hassle when doing the media queries.

    This was my first time using media queries so I hope I did an okay job with them.

    Feel free to offer advice and help me out with the issues I had. This was so fun!

    Basics of CSS and HTML and first time Media Queries.

    1
    Sulaiman Abubakar•270
    @Abu-SmanPosted about 1 year ago

    Hello, @kharalhamza98. You're doing great; keep going. To solve your problem of buttons not being centred on a mobile screen, simply give them a width of 100% rather than a width in px. This way, they will never grow larger than their parent container. Also, make the images of the computer and devices 100% wide so they don't overflow the body.

    Some suggestions for you:

    • There is no need to include the header element within a section element. The header element is a standalone semantic html element. Your index.html file should look something like this:
    <body>
<header></header>
<main>
    <section></section>
    <section></section>
</main>
<footer></footer>
</body>
    • Read about BEM naming to learn how to name your classes.
    • Avoid using "px" and instead use the "rem" and "em" units when building a responsive layout.
    • Specifying the width of your images in % rather than px is gonna make your life way easier.
    Marked as helpful
    1
  • Sulaiman Abubakar•270
    @Abu-SmanPosted about 1 year ago

    Hey @ziyyahh, you did a great job! keep going. I don't think you can make the card component fit the page without scrolling on a mobile device. However, i do notice that the content of the card jumps up a lil bit when you hover the buttons. To fix that, you can use the box shadow with the inset keyword to add the border instead of just using the border property or you can add the border and make it transparent and only display it on hover state. You can check my version of the solution here to see how i solve it https://github.com/Abu-Sman/3-column-preview-card-component-solution. Also, your readme isn't describing your project, use the readme-template instead. Don't forget to edit it. Hope this helps.

    Marked as helpful
    0