Skip to content
OverviewSolutions
10
Comments
83
Kelvin
@Kl3va

All comments

  • Kelvin•965
    @Kl3va

    Using semantic(main,section) html to avoid something popularly called div soup where you ve divs littered in your code. Also, for styling you would want to adopt relative units(rems,%,vw) and dump absolutes(px), cause they aid in building responsive sites cause they adapt to width/height changes of a screen. Absolutes are generally fixed so they play well when styling something like border-radius.

    Marked as helpful
  • Kelvin•965
    @Kl3va

    Hey, your solution looks great. I was meaning to ask you a question, but your dms locked on twitter.

  • Kelvin•965
    @Kl3va

    Hi Juan, You should remove the overflow: hidden... On certain viewport heights, I can't view the button and footer.

  • Kelvin•965
    @Kl3va

    Hi Nwobodo. ON larger screens, your footer overlaps on the main content. You might want to fix that

  • Kelvin•965
    @Kl3va

    Hi Aisha your solution looks great. You might want to remove the height property from the body and the flex value on display. If you need to align the container in that direction, you can simply set the margin to “margin: 0 auto; “ …that should align it in the center(vertically and horizontally)

  • Kelvin•965
    @Kl3va

    Hi Irvine. Your solution looks good on desktop view. Here are few things that need improvement; As I scale down, Your request invite button, becomes invisible as well as your copyright info which is caused due to overflow-x set to hidden... You might want to give that a responsive width. There's a visible white spacing caused by your article card. It's not well aligned in the middle when the view is in a column. It's inconsistent due to the px width you set on it. Also, your social icons breakaway too. One more thing, you've a lot of accessibility issues to fix

    Marked as helpful
  • Kelvin•965
    @Kl3va

    It's always difficult that way when you specify the svg within an img tag. So, what i d most times is simply download the svg icon from popular libraries and you said you usually do. Another way is to specify it within the object tag... But I'm yet to try that approach

    Marked as helpful
  • Kelvin•965
    @Kl3va

    Yes. You can use the fill property to do that.

  • Kelvin•965
    @Kl3va

    Hi Khadija. A little observation; As my bill increases, it breaks the user interface. Seeing this is a small application, you can try to limit the character length of the bill or make value of the bill total to scroll horizontally within it’s width.

    Marked as helpful
  • Kelvin•965
    @Kl3va

    Hi Justin, your footer breaks out of it’s position on widths above 700px… it’s positioned on top of the image. You might want to fix that

    Marked as helpful
  • Kelvin•965
    @Kl3va

    Hi Lincol, the link to your solution is broken.

  • Kelvin•965
    @Kl3va

    There’s a lot of spacing between your footer and the bottom of your page

  • Kelvin•965
    @Kl3va

    You would want to place the footer at the bottom of the page. So far, it’s too close to the component.

  • Kelvin•965
    @Kl3va

    Hi Raj, I would recommend Kevin Powell on YouTube. Check him out

  • Kelvin•965
    @Kl3va

    Hi Bhremada, your footer appears on the submit button when on a device of smaller width. You might want to fix that. Your solution looks great.

    Marked as helpful
  • Kelvin•965
    @Kl3va

    Z-index only work on positioned elements. To achieve what you’re asking; give the div a position absolute and it’s parent container a position relative, then use the top/right properties to move it towards the direction of your choice.

  • Kelvin•965
    @Kl3va

    When I worked on a similar solution, I struggled with making the image responsive then.

  • Kelvin•965
    @Kl3va

    Hi Raj, your solution looks great. A little observation; Try to adopt semantic html moving on. Like, giving your page a level one heading like h1 and wrapping the main contents within a main tag.