Responsive solution using flexbox

Community feedback

• 

  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 justify-content: center to the body
  • For the color of the screen, you can use the recommended color in the body

  body {
    /* background-image: url(/images/pexels-pixabay-509922.jpg); */
    background-color: hsl(212, 45%, 89%);
    justify-content: center;
  }
  

  • When you use flexbox in the body, you don't need to use flexbox, top in the .container to center the card
  • If you use max-width, the card will be responsive
  • You'd better add padding to give a gap between the content and the border of the card

  .container {
    /* display: flex; */
    /* justify-content: center; */
    /* text-align: center; */
    /* position: relative; */
    /* top: 15%; */
    text-align: center;
    padding: 15px;
    max-width: 300px;
    background-color: var(--White);
    border-radius: 1rem;
  }
  

  • 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: 240px; */
    width: 100%;
    border-radius: 1rem;
  }
  

  • Finally, if you follow the steps above, the solution will be responsive. Additionally, you can remove these styles below to write less code.

  /* section{
    display: inherit;
    flex-direction: inherit;
    align-items: inherit;
    height: 650px;
    width: 90vw;
    top: 15%;
    position: relative;
    background-color:#d8ecf2;
  } */
  
  /* .wrapper {
    width: 300px;
    padding: 1rem;
  } */
  
  /* .image {
    width: 100%;
    border-radius: 12px;
  } */
  
  /* p {
    padding-left: 3px;
    padding-right: 3px;
  } */
  

  Hope I am helpful. :)

  Marked as helpful

  1

  ---

  

  ilvis14•20

  @ilvis14Posted almost 2 years ago

  @ecemgo

  Thanks for the quick reply, Really insightful.

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted almost 2 years ago

  Happy to help @ilvis14 :)

  1
• 

  Abdul Khaliq 🚀•72,400

  @0xabdulkhaliqPosted almost 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  BODY MEASUREMENTS 📐:

  • Use min-height: 100vh for body instead of height: 100vh. Setting the height: 100vh may result in the component being cut off on smaller screens.

  ---

  • For example; if we set height: 100vh then the body will have 100vh height no matter what. Even if the content spans more than 100vh of viewport.

  ---

  • But if we set min-height: 100vh then the body will start at 100vh, if the content pushes the body beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  ilvis14•20

  @ilvis14Posted almost 2 years ago

  @0xAbdulKhalid

  Thanks for replying and answering my question. Quite helpful.

  0
• 

  Boluwatife Bonaventure•550

  @BoyutifePosted almost 2 years ago

  Hi Ilvis 👋. Congratulations on successfully completing the challenge! 🎉

  Job well done.

  The wv and hv units are relative to the viewport width and height, respectively. This means that they adjust automatically to the size of the user's screen, making your page more responsive and adaptable to different devices. For example, you could use "width: 50vw" to make an element take up 50% of the viewport width.

  I recommend reading the documentation on these units to get a better understanding of how they work and when they should be used. This will help you improve your skills in creating landing pages and static sites that are optimized for different devices.

  I have some additional suggestions for your code that I believe will be of great interest to you.

  CSS:🎨

  Use relative units like rem or em as the unit for the padding, margin, and width values, and preferably rem for the font-size values, instead of px, which is an absolute unit. This is a good practise when building a responsive page.

  HTML: 🔖

  I noticed that there is no h1 tag present on your web page. It's recommended to include an h1 tag for accessibility and search engine optimization purposes. Therefore, I suggest wrapping the main text in an h1 tag.

  Also, you might want to consider using the main tag instead of the section tag, since there is only one main content on the page. This will help improve the semantic structure of your HTML code.

  I hope this feedback is helpful to you. If you have any questions or need further clarification, please let me know.

  HAPPY CODING

  Marked as helpful

  1

  ---

  

  ilvis14•20

  @ilvis14Posted almost 2 years ago

  @Boyutife

  Thanks for the reply, I'll keep your suggestions in mind.

  1