I used plain HTML and Flexbox for this challenge

Community feedback

• 

  Acme Gamers•295

  @AcmeGamersPosted over 2 years ago

  Hey there 👋,

  You actually did pretty good to make this with semantic HTML, to be honest, 😊. I would recommend using <main> ... </main> tag instead of <div class='main'> ... <div> since div is a non-semantic HTML tag. The rest is pretty cool!

  As far for the image element problem that you are having, here are a few fixes that you can use:

  Example Egg div:

  HTML Part:

  • Convert the div having egg image into an img element
  • Yea, that's all! :D

  CSS Part:

  Select your image element and give it the following values:

  .bgimg { 
      order: 1;   // This will help in arranging your elements
      width: 100% // This will give full display in mobile
  }
  

  Now, select your text

  #section-1 > div > div {
      order: 2;    // Now the text will be below the image
      width: 100%  // This again will give full screen width
  }
  

  Lastly, wrap your elements so they become responsive

  #about .card {
       flex-wrap: wrap;  // It won't work without this guy so do remember to add it.
  }
  

  When you do this, it will automatically resolve the issue and will give a proper display. You can check it out in the forked area here:

  https://github.com/AcmeGamers/sunnyside-shihab

  Hope this helps you figure out how to solve it 😊

  0

  ---

  

  Shihab Munshi•140

  @shihabmunshi06Posted over 2 years ago

  @AcmeGamers thanks for the feedback I did this project 2 months ago, never posted it 😅.(I solved the image issue) I don't think i can use img tag on the egg image as i am using 100vh Image height wont stretch to the full view height, leaving white spaces(as far as i remember) . I am updating the code now, I don't know how this site quite works but if you can your feedback would help me on my updated code

  1

  

  Acme Gamers•295

  @AcmeGamersPosted over 2 years ago

  @shihabmunshi06, yeah I remember seeing the initial commit 2 months ago from your GitHub repo lol. Although, always try adding comments since it will turn out convenient for you later, you can check the web structure in code like this:

  https://github.com/AcmeGamers/sunnyside-shihab/blob/main/Screenshot_2778.png

  As far as the Mobile Device height image is concerned, since you are using 100vh, try changing the size of the font of h1 from 4.6rem to 2.6rem, that will fix the spacing issue you are having ^^

  As far for the rest, you did pretty amazing to complete the remaining project, hats off on that 🥳!

  Marked as helpful

  0