Skip to content
OverviewSolutions
6
Comments
5

Peace-Divine

@Peace-Divine60 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Peace-Divine•60
    @Peace-Divine

    It is accesible and looks good on all screens

  • Peace-Divine•60
    @Peace-Divine

    it is accessible, the layout looks good on mobile screen size. the code is well-structured, readable and reusable

  • Peace-Divine•60
    @Peace-Divine

    The layout was okay on desktop was was quite sizeable on mobile view. the code was well structured and reusable

  • arcueid-x•50
    @arcueid-x
    What challenges did you encounter, and how did you overcome them?

    I can't align images and text.

    I reviewed vertical-align and successfully aligned the profile picture with the text.

    I forgot how to align each item in a grid layout.

    I reviewed the knowledge related to grid layout and learned that grid layout only aligns the entire items as a whole, and it cannot align individual items in a custom way.

    What specific areas of your project would you like help with?

    I tried to create a responsive layout using percentages, but I didn't succeed.

    Grid，vertical--align

    #foundation
    1
    Peace-Divine•60
    @Peace-Divine

    yes it included semantic html , it was accessible and the layout looked good on a range of screen sizes

  • M.A.Askat•40
    @AskatAsh
    What are you most proud of, and what would you do differently next time?

    I have done my best to make sure that images with different resolutions can easily fit the image container.

    I also made sure to add media query so that even on the smallest device the content as well as the image can easily fit the viewport.

    I tried to make the design as accurate as possible which I can proudly say looks almost the same as the design provided.

    What challenges did you encounter, and how did you overcome them?

    The only challenge I encountered was making sure the image properly fits its parent container or element. Here is the code :

    #image-container{
    max-width: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#image-container img{
    max-width: 100%;
    object-fit: cover;
}
    What specific areas of your project would you like help with?

    Is there any other easier and more efficient method to fit any image in a container?

    Responsive QR-Code Design using Html and CSS

    #styled-components#web-components#accessibility
    1
    Peace-Divine•60
    @Peace-Divine

    Yes, the layout look good on a range of screen sizes, the code is well-structured, readable and reusable.