I used plain HTML and Flexbox for this challenge

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 😊