Skip to content
OverviewSolutions
6
Comments
5

Koli

@KoliOyamaAbuja, Nigeria110 points

Aspiring Front-end developer & UI designer📌

I’m currently learning...

JavaScript & Figma

Latest solutions

Latest comments

  • Koli•110
    @KoliOyamaPosted over 1 year ago
    CSS
button{
     /*your button styles*/
        }
button:hover{
     background-color:  /*put the lighter shade*/;
            }

    :hover is a pseudo-class. It's used to apply styles to an element when you hover over it.

    I'd suggest you learn more about this on Youtube. Check out channels like Kevin Powell, Net ninja and so on.

    Marked as helpful
    0
  • Koli•110
    @KoliOyamaPosted over 1 year ago

    In CSS, vh and vw are relative units representing percentages of the viewport's height and width. They enable responsive designs by adjusting sizes based on the user's viewport or screen size. However, extreme values should be avoided as they can cause oversized or too small elements on different devices. On the other hand, using px allows specifying an exact size for an element, providing more layout control but leading to non-responsive design. For a responsive container, you can use a max-width property with a value in rem or %, like this:

    .container {
    display: flex;
    max-width: 20rem;
}

    This will make the container adjust responsively until it reaches the specified width.

    For margin, use it when you want to create space outside an element and use padding when you want to create space inside an element.

    I'd suggest you go learn the CSS Box-model and Responsive web design. I recommend checking out Kevin Powell on Youtube.

    2
  • Koli•110
    @KoliOyamaPosted over 1 year ago

    You did good. Although I feel the positioning of the container could have been better.

    body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
        }

    The code above will perfectly center your container, preventing it from having the vertical scroll bar. You won't need to add a margin top to your container to push it vertically downwards.

    Marked as helpful
    0
  • Koli•110
    @KoliOyamaPosted over 1 year ago

    Yes, you were right to use flexbox. Just to clarify;

    body {
   display: flex;
   justify-content: center; 
   align-items: center;
   min-height: 100vh;
          }

    Using justify-content: center, the container will be set at the horizontal center. While align-items: center will set it at the vertical center.

    With grid:

    body {
       display: grid;
       Place-items: center;
       min-height: 100vh;
             }

    As for managing the widths, try making use of the max-width property for the containers. This will restrict it from stretching with your browser window. I hope this helps ;⁠)

    0
  • Koli•110
    @KoliOyamaPosted over 1 year ago

    Hey Mark. I ran into an issue when loading your site. The summary header only shows up once I highlight that area. Try styling the span in your summary section to make it appear. Also, I like what you did with the button 👌

    0