Style help with Random Food Generator

HTML-CSS
1

Hello, Friends!

Ive included a screenshot of the issue at hand , and will explain shortly the black lines on the left and right of the screen are added by me post-screenshot

Essentially, the brains of my random food generator - the Javascript - is all set. However, I am attempting to shrink the margins on the left and right of the content that falls between it; basically “cropping” the area of the screen resolution. How would I go about doing this ? Screenshot will be included below for visuals, and all code will be provided as well. All help is appreciated.

Screen Shot 2023-05-31 at 6.41.22 PM
Screen Shot 2023-05-31 at 6.41.22 PM1428×835 203 KB

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Meal Generator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container">

<h1 class="question">Feeling Hungry?</h1>
<h2 class="question">
Struggling to come up with healthy meals?
</h2>

<button class="generate" id="generate" onclick=randomChoice()>
Click Me To Generate a Random Meal!
</button>

<p class="info">
    A balanced macronutrition dietary profile is of utmost importance for overall health and well-being. It refers to the consumption of an appropriate ratio of macronutrients, including carbohydrates, proteins, and fats, in the right proportions. Such a diet provides the body with essential nutrients, energy, and the building blocks necessary for various bodily functions.


</p>

    <div id = "randomMeal" class="randomMeal">
<p id = "randpick">

</p>
    </div>
   

</div>
    
    
    
<script src="logic.js"></script>
</body>
</html>

Javascript:

// Food(s) array w/nested Objects. //

const root = document.getElementById("randpick");


const foods = [
    {  "name": 'Chicken and Rice',
        "protein": 'Protein: 45g',
       "fat": 'Fat: 12g',
       "carbohydrates" : 'Carbs: 35g',
       "total calories": 'Total Calories:  428 ',
       "image": 'Images/please-be-my-last-try.jpeg',
       "ingredient1":"Chicken (Your Choice of Cut)"
    },
    {  "name":'Guac Omelette',
    "protein":'Protein: 30g',
    "fat":'Fat: 20g',
    "carbohydrates":"Carbs: 17g",
    "total calories": 'Total Calories: 368 kCal',
    "ingredient1":'Eggs'
   },
   {
    "name":"Beef Rice",
    "protein":'Protein: 48g',
    "fat":'Fat: 22g',
    "carbohydrates":'Carbs: 52g',
    "total calories":'Total Calories: 598 kCal',
    "ingredient1":"Ground beef"
   },
   {
"name":"Penne Alfredo Chicken",
"protein":'Protein: 36g',
"fat":'Fat: 17g',
"carbohydrates":"Carbs: 49g",
"total calories":'Total Calories: 493 kCal ',
"ingredient1":"Chicken (Your Choice of Cut)"
}
   
   ]



   function randomChoice(){
    const userFood = foods[Math.floor(Math.random()*foods.length)];
 const foodTemplate = `
        <section class="head">
 
 <h1>${userFood.name}</h1>
    <img src=${userFood.image}>


   

 <section class="blocker">
 <p>${userFood.carbohydrates}</p>
 <p>${userFood.fat}</p>
 <p>${userFood.protein}</p>
 <p> ${userFood["total calories"]}</p>
 
 
 </section> 
 <h1 class="ingredients"> Ingredients Needed </h1>
<li> <p class="uno">${userFood.ingredient1}</p></li>
        </section>

 `;
 root.innerHTML = foodTemplate;

 
 }

CSS:

*{
    background-color: lightblue;
   
}


.container{
    height:100%;
    width: 100%;
    background: lightblue;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
    

}

.container .question{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: lightblue;
}

.container .generate{
color:rgb(31, 78, 94);
background-color: black;
color:white;
}

.container .info {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS;', sans-serif;
justify-self: center;
padding:5px;
text-align: center;
background-color: transparent;
font-size: x-large;
width: 50%
}

.container .question2{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS;', sans-serif;
    background: lightblue;
}

.container #randpick{
    background-color: lightblue;
    color:black
}

#randomMeal{
    background: lightblue;
}

section{
text-align:center;
}

h1{
font-size: xx-large;
}

.cookingt{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color:red

}

.blocker{
    font-size: x-large;
    display:flex;
    flex-direction:row;
    justify-content: space-around;
    color:black;
    margin: 5%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.head{
    border: 4px solid black;
}

.uno{
font-size: x-large;

}
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.