Skip to content
OverviewSolutions
7
Comments
1
Sudhanshu Patel
@sudhanshu287

All comments

  • Sudhanshu Patel•160
    @sudhanshu287Posted over 1 year ago

    Problems in Your Solution

    • semantic HTML not included.
    • Image is not set correctly.
    • Layout not looks good.

    Solution to your Problem

    • always add <main></main> tag or a div with role="main" and one h1 tag is mandatory for accessibility.
    • To make an image responsive always add two properties 'max-width:100%;', and 'height: auto;'
    • To properly design your layout change these in your CSS classes
    .container{
background-color: var(--white);
 max-width: 20%;
 margin: auto;
 padding: 22px;
 border-radius: 20px;
 display: flex;
 flex-direction: column;
 gap: 20px;
}
.image > img {
 max-width: 100%;
 height: auto;
 border-radius: 10px;
}

.bold {
 font-weight: 700;
 font-size: 22px;
 line-height: 1.4;
 text-align: center;
 color: var(--dark-blue);
}

.light {
 font-weight: 400;
 text-align: center;
 color: var(--grayish-blue);
 padding-bottom: 10px;
}
.attribution {
 position: absolute;
 bottom: 40px;
 left: 50%;
 transform: translateX(-50%);
 font-size: 11px;
 text-align: center;
 margin-top: 20px;
}
@media (min-width: 1025px) {
 .container {
   max-width: 21%;
   padding: 18px;
   margin-top: 100px;
 }
}
    • All these changes make your solution looks good.
    Marked as helpful
    0