Prevent image from showing on top of text - html

Question

I've recently started learning web dev. I'm making a site that fetches data from the mealdb api and displays the data. I've mostly gotten everything working, but the issue is when I inspect the web page and view it on mobile, the image is rendered on top of the text, i.e. the title and the ingredients. How do I prevent this from happening?
Ideally, on a mobile device, I'd like to show the title, followed by the image, ingredients and the instructions in a single column.
This is how it looks on desktop:
On mobile:
.Recipe {
padding-top: 30px;
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow: auto;
vertical-align: text-top;
}
.left-content {
width: 40%;
float: left;
}
.list {
list-style: none;
padding-left: 0px;
padding-bottom: 15px;
font-size: 1.2rem;
}
.right-content {
width: 40%;
float: right;
}
.title {
font-size: 3rem;
justify-content: center;
padding-bottom: 0px;
}
.instructions {
font-size: 1.2rem;
}
.Recipe h1 {
text-align: center;
padding-left: 250px;
}
.image {
float: right;
height: 480px;
width: 480px;
margin: 20px
}
<div className="Recipe">
<div className="left-content">
<h2 className="title">{prop.food.meals[0].strMeal}</h2>
<ul className="list">
{prop.materials.map(function(ingredients){ return
<li key={ingredients.strIngredient}>{ingredients.name + " - " + ingredients.amount}</li>
})}
</ul>
<p className="instructions">{prop.food.meals[0].strInstructions}</p>
</div>
<div className="right-content">
<img src={prop.food.meals[0].strMealThumb} alt="" className="image" />
</div>
</div>

Answer 1

This is a CSS situation, and for this specific situation I highly suggest learning about grid: https://css-tricks.com/snippets/css/complete-guide-grid/
Now, I know you probably don't want to read that much or learn something entirely new just to solve this. So for now I will give you a quick solution, which it isn't so bad in terms of performance.
You can use react-device-detect
It has some components that print specifically on Desktop or Mobile. So in your case you can have something like this:
import {BrowserView, MobileView} from 'react-device-detect';
And in your render:
<div className="Recipe">
<div className="left-content">
<h2 className="title">{prop.food.meals[0].strMeal}</h2>
<MobileView>
<img src={prop.food.meals[0].strMealThumb} alt="" className="image"/>
</MobileView>
<ul className="list">
{prop.materials.map(function(ingredients){
return <li key={ingredients.strIngredient}>{ingredients.name + " - " + ingredients.amount}</li>
})}
</ul>
<p className="instructions">{prop.food.meals[0].strInstructions}</p>
</div>
<BrowserView>
<div className="right-content">
<img src={prop.food.meals[0].strMealThumb} alt="" className="image"/>
</div>
</BrowserView>
</div>
The idea is printing the image "twice", one for mobile and one for desktop. However, they will not be printed at the same time, obviously. And the images on web get requested only once, so you can print the same image dozens of time but it will only be loaded once on the browser, which is why this alternate solution works well.
If you don't want to use react-device-detect, you can print the image twice (on the same location as the example), and on CSS just use Media Query to set a display: none for mobile and desktop when they're not required. Let me know if you prefer CSS and I can elaborate further on how to do this on CSS. But I don't suggest this one because it is less efficient since the HTML will have two tags of the same image even if you're hiding them on CSS.
Let me know if you have any questions. And I hope this was helpful.