Skip to content
OverviewSolutions
24
Comments
718
Ecem Gokdogan
@ecemgo

All comments

  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    The animation is awesome! 🤩

    3
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    • You can add the recommended color for the screen to the body
    body {
  background: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
    • If you use max-width, the card will be responsive
    • You'd better update padding to give a gap between the content and the border of the card
    .box3 {
  /* padding: auto; */
  padding: 15px;
  /* border: 1px solid hsl(212, 35%, 85%); */
  border-radius: 10px;
  /* width: 300px; */
  max-width: 300px;
  /* height: 500px; */
  background-color: hsl(0, 0%, 100%);
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    img {
  /* width: 300px; */
  width: 100%;
  border-radius: 5%;
  /* padding: 10px; */
}
    • You'd better update the padding of the p
    p {
  /* padding: 20px; */
  padding: 10px;
}
    • You don't need to define .box2 and you can remove it
    /* .box2 {
    border: 1px solid hsl(212, 35%, 85%);
    margin: 150px auto;
    width: 1500px;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(219, 71%, 75%);
} */
    • Finally, the solution will be responsive if you follow the steps above

    Hope I am helpful. :)

    0
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • If you use max-width, the card will be responsive and you can reduce the width a bit
    • You don't need to use margin if you use flexbox in the body
    .qrComponent {
  /* width: 370px; */
  max-width: 300px;
  /* margin-top: 3rem; */
  /* margin-inline: auto; */
}
    • After updating like above, you don't need to use media queries for this solution because the solution will be responsive if you follow the steps above

    Hope I am helpful. :)

    Marked as helpful
    0
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    body {
  background: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
    • If you use max-width, the card will be responsive and you can reduce the width a bit
    • You'd better update padding to give a gap between the content and the border of the card
    .container {
  padding: 16px;
  /* margin: 6% auto 38% auto; */
  max-width: 300px;
  /* width: 348px; */
  /* height: 545px; */
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    img {
  width: 100%;
  /* width: 316px; */
  /* margin: 16px 0px 16px 16px; */
  border-radius: 8px;
}
    • You'd better update the margin of the texts
    h2 {
  /* margin: 10px 36px 10px 36px; */
  margin: 20px 10px;
} 

    p {
  /* margin: 10px 36px 10px 36px; */
  margin: 10px 0 30px;
}
    • Finally, the solution will be responsive if you follow the steps above

    Hope I am helpful. :)

    Marked as helpful
    1
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    When you download the starter, there is a style-guide.md in the folder. You can use that reference for color, font-size, font-family etc.

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    • For the background, you can use the recommended color in the body
    body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: hsl(212, 45%, 89%);
}
    • If you use max-width, the card will be responsive and you can increase the width a bit
    • You'd better update padding to give a gap between the content and the border of the card
    • You can add text-align: center to center texts
    .main .card {
  /* width: 240px; */
  max-width: 300px;
  border-radius: 10px;
  margin: 0 auto;
  background-color: white;
  /* padding: 10px; */
  padding: 15px;
  text-align: center;
}
    • You can add font-size to the .card-title and update it in the card-text
    .main .card .card-title {
  font-size: 20px;
}

    .main .card .card-text {
  font-weight: 300;
  /* font-size: 12px; */
  font-size: 16px;
}
    • You don't need to use .main and .main .block and you can remove them
    /* .main {
  position: relative;
  background-color: #DFDBE5;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  width: 100%;
  height: 100vh;
  padding-top: 5%;
} */

/* .main .block {
  box-shadow: 0 10px 20px #bbbbbb;
  background-color: rgb(148, 188, 214);
  width: 75%;
  margin: 0 auto;
  padding: 5% 0;
  text-align: center;
} */
    • Finally, you can remove media queries because the solution will be responsive if you follow the steps above

    Hope I am helpful. :)

    Marked as helpful
    1
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    HTML

    • The html structure should be like that:
    <body>
  <main class="card">
   <img src="images/image-qr-code.png" alt="image-qr-code">
    <h1>Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </main>
   <footer class="atribuition"Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/RodrigooliveiraBRPR">Rodrigo De Oliveira Silva</a>.
  </div>
</body>
    • If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

    CSS

    • After adding them to the HTML, you can add this font-family to the body
    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    body {
  background-color: hsl(212, 45%, 89%);
  min-height: 100vh;
  align-items: center;
  font-size: 15px;
  /* font-family: "Marck Script", cursiva; */
  /* font-family: "Outfit", sem serifa; */
  /* display: flexbox; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Outfit", sans-serif;
}
    • If you use max-width, the card will be responsive
    .card {
  max-width: 300px;
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    img {
  /* width: 96%; */
  width: 100%;
  border-radius: 20px;
}
    • You'd better update texts in this way:
    h1 {
  color: hsl(218, 44%, 22%);
  margin: 20px 0;
  font-size: 20px;
  line-height: 1.3;
}

    p {
  color: hsl(220, 15%, 55%);
  margin-bottom: 20px;
  line-height: 1.3;
}
    • You don't need to define .container and text and you can remove it
    /* .container {
  max-width: 350px;
  margin: 0 auto;
} */

/* text {
  padding: 22px 10px;
} */
    • Finally, if you follow the steps above, the solution will be responsive.

    Hope I am helpful. :)

    0
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: hsl(212, 45%, 89%);
}
    • When you use flexbox in the body, you don't need to use flexbox in the .inner to center the card
    • If you use max-width, the card will be responsive and you can increase the width a bit
    • You'd better add padding to give a gap between the content and the border of the card
    .inner {
  /* height: 380px; */
  /* width: 230px; */
  max-width: 300px;
  background-color: hsl(0, 0%, 100%);
  border-radius: 14px;
  /* display: inline; */
  /* align-items: center; */
  /* justify-content: center; */
  padding: 15px;
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    .inner img {
  /* width: 210px; */
  width: 100%;
  border-radius: 14px;
  /* margin: 10px 10px 10px; */
}
    • You'd better update font-size of texts
    .inner h1 {
  /* font-size: 0.9rem; */
  font-size: 1.4rem;
  text-align: center;
  padding: 10px 0;
}

    .inner p {
  font-size: small;
  text-align: center;
  padding: 10px;
  /* margin: 10px; */
  margin-bottom: 20px;
  color: gray;
}
    • You don't need to use .hero and .outer and you can remove them
    /* .hero {
  height: 100vh;
  max-width: 1440px;
  background-color: hsl(175, 43%, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
} */

/* .outer{
    display: flex;
    position: relative;
    height: 80vh;
    width:90vw;
    background-color: hsl(212, 45%, 89%);
    align-items: center;
    justify-content: space-between;
} */
    • Finally, you can remove media queries because the solution will be responsive if you follow the steps above

    Hope I am helpful. :)

    0
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • If you use max-width, the card will be responsive and you can reduce the width a bit
    .container {
  /* width: 400px; */
  max-width: 300px;
}
    • Then, you'd better reduce the font-size of texts but it's up to you.

    Hope I am helpful. :)

    Marked as helpful
    1
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • You can add body to the CSS. Additionally, if you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: hsl(212, 45%, 89%);
}
    • When you use flexbox in the body, you don't need to use flexbox and margin in the .qr-code to center the card
    • If you use max-width, the card will be responsive and you can reduce the width a bit
    • You'd better update padding to give a gap between the content and the border of the card
    • You add text-align: center here to center the texts
    .qr-code {
  /* width: 450px; */
  /* height: 700px; */
  /* margin-top: 30%; */
  /* margin-bottom: 25%; */
  max-width: 300px;
  padding: 15px;
  text-align: center;
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    img {
  border-radius: 20px;
  /* height: 400px; */
  /* width: 400px; */
  /* margin-top: 25px; */
  width: 100%;
}
    • You'd better update font-size of texts
    .bold-text {
  font-weight: 700;
  /* font-size: 30px; */
  font-size: 20px;
}

.min-text {
  font-weight: 300;
  /* font-size: 20px; */
  font-size: 16px;
}
    • You don't need to use .container and p and you can remove them
    /* .container {
  display: grid;
  justify-content: center;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  background-color: hsl(212, 45%, 89%);
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
} */

/* p {
  text-align: center;
  margin: 40px;
} */
    • Finally, you can remove media queries because the solution will be responsive if you follow the steps above

    Hope I am helpful. :)

    0
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • You don't need to use .container and you can remove it. You'd better add the background color for the screen to the body, thus you don't lose the color.
    /* .container {
  display: flex;
  height: 700px;
  justify-content: center;
  align-items: center;
  background-color: var(--light-gray);
  width: 1440px;
  box-shadow: 5px 10px 50px rgba(0, 0, 0, 0.3);
} */

    body{
   background-color: var(--light-gray);
}
    • You don't need to use justify-items: center for the .card
    • If you use max-width, the card will be responsive
    .card {
  /* width: 300px; */
  max-width: 300px;
  /* justify-items: center; */
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    .card > img {
  /* width: 300px; */
  width: 100%;
}
    • Finally, you don't need to use media queries because the solution will be responsive if you follow the steps above.

    Hope I am helpful. :)

    1
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    body{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}
    • When you use flexbox in the body, you don't need to use flexbox and margin-top in the main to center the card
    • If you use max-width, the card will be responsive
    main {
  /* width: 18%; */
  max-width: 300px;
  /* margin-top: 100px; */
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    img {
  width: 100%;
  /* height: 250px; */
  /* width: 250px; */
  border-radius: 10px;
}
    • Finally, if you follow the steps above, the solution will be responsive.

    Hope I am helpful. :)

    Marked as helpful
    1
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    HTML

    • You'd better update the <main> structure in the html to prevent the deterioration
    <main>
      <img src="./images/image-qr-code.png" alt="QR code image">
      <h1> Improve your front-end skills by building projects </h1>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </main>

    CSS

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    body{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}
    • When you use flexbox in the body, you don't need to use flexbox and margin in the main to center the card
    • If you use max-width, the card will be responsive and you can reduce the width a bit
    main{
   /* width: 350px; */
   max-width: 300px;
   /* margin: 200px auto 20px auto; */
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    img{
  border-radius: 8px;
   width: 100%;
}
    • You'd better update texts in this way
    h1{
   /* font-size: 28px; */
   font-size: 20px;
   font-weight: bold;
   color: var(--dark-blue);
}

    p{
   /* font-size: 20px; */
   font-size: 16px;
   color: var(--grayish-blue);
}
    • Finally, if you follow the steps above, the solution will be responsive.

    Hope I am helpful. :)

    Marked as helpful
    0
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    • You can use the recommended background color for the screen
    body {
  /* background-color: whitesmoke; */
  font-family: 'Outfit', sans-serif;
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
    • If you use max-width, the card will be responsive and you can reduce the width a bit
    .card {
  /* max-width: 350px; */
  max-width: 300px;
}
    • You don't need to use the styles below for the img
    .image {
   /* margin-top: 0px; */
   /* text-align: center; */
   /* display: block; */
 }
    • Also, you don't need to use .container in order to center the card and you can remove it
     /* .container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top:100px;
} */
    • Finally, you don't need to use media queries because the solution will be responsive if you follow the steps above. I recommend you don't use the styles that don't work.

    Hope I am helpful. :)

    Marked as helpful
    0
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    In order to fix the accessibility issues:

    • You need to replace <div class="box"> with the <main class="box"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
    • Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your frontend skills by building projects</h1> element.

    After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

    Hope I am helpful. :)

    Marked as helpful
    0
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    HTML

    In order to fix the accessibility issues:

    • You need to replace <div class="container"> with the <main class="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
    • Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <p class="headline-text">Improve your frontend skills by buiding projects</p> element with the <h1 class="headline-text">Improve your frontend skills by buiding projects</h1> element.
    • The <img> tag should include alt ="" attribute. You can apply like this:
    <img src="./images/image-qr-code.png" class="qr-code-img" alt="qr-code"/>

    After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

    CSS

    • In order to center texts, you'd better add text-align: center to the .container
    .container{
    text-align: center;
}

    Hope I am helpful. :)

    Marked as helpful
    0
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    HTML

    In order to fix the accessibility issues:

    • You need to replace <div class="container"> with the <main class="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
    • Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <p class="heading">Improve your frontend skills by buiding projects</p> element with the <h1 class="heading">Improve your frontend skills by buiding projects</h1> element.

    After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

    CSS

    • If you want, you can use this recommended background color in the body
    body {
   /* background-color: rgb(206, 231, 253);  */
   background-color: hsl(212, 45%, 89%);
}

    Hope I am helpful. :)

    Marked as helpful
    1
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • If you use max-width, the card will be responsive and you can increase the width a bit
    • You'd better update padding to give a gap between the content and the border of the card
    • You don't need to use flexbox here. If the styles don't work, I recommend you don't use them
     .card {
  /* width: 220px; */
  /* height: 350px; */
  max-width: 300px;
  /* padding: .5em; */
  padding: 15px;
  /* display: flex; */
  /* flex-direction: column; */
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    img {
   width: 100%;
   /* width: 200px; */
   /* height: 200px; */
   border-radius: 10px;
   /* margin-top: .25rem; */
}
    • You'd better update and add font-size and margin for the texts
    p.header {
  font-size: 20px;
  margin: 10px 0;
}

    p.content-text {
  /* font-size: 12px; */
  font-size: 16px;
  margin-bottom: 20px;
}
    • You don't need to use .card--title and .card--text and you can remove them
    /* .card--title {
  padding: .5em;
} */

/* .card--text {
  padding: 0 .5em;
} */
    • Finally, if you follow the steps above, the solution will be responsive.

    Hope I am helpful. :)

    1
  • Ecem Gokdogan•9,380
    @ecemgoPosted almost 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    In order to fix the accessibility issues:

    • You need to replace <div class="container"> with the <main class="container"> tag and <div class="attribution"> with the <footer class="attribution"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
    • Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <p class="title">Improve your frontend skills by buiding projects</p> element with the <h1 class="title">Improve your frontend skills by buiding projects</h1> element.

    After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

    Hope I am helpful. :)

    0