Hey guys,
I’m starting simple on my first ever website from scratch and any help would be greatly appreciated. Here is the current version. Here are the issues I’m trying to fix:
-
Top image is kind of wonky. On smaller screens it shows a horizontal scroll bar. Ideally I would like the image to be centered and take up the full width of the browser, and on smaller screens less of the image would show up (without squishing the image).
-
Mobile friendly.
a) I would like the cooking image meme (cooking challenge accepted) to be resized as the viewport gets smaller.
b) the clock icon and ingredients should stack overtop of one another as the viewport gets smaller
c) the text should not go off screen as the viewport gets smaller
I would love any feedback on a better or more elegant way to write the CSS or HTML. I am starting simple so that I can understand a simple website before trying anything more complex.
for reference, here is the code I am using. Thanks in advance for any help!
HTML:
<!DOCTYPE html>
<head>
<title>Koo's Crispy Parmesan Brussel Sprouts</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--Banner Area Start-->
<div class="banner">
<img src="images/brussels.jpg" width="1000" height="501" class="banner"/>
<div id="banner-text">Koo's Crispy Parmesan Brussel Sprouts</div></div>
<div id="main_container">
<!--Banner Area end-->
<!--content Area Start-->
<div id="content">
<p>Forget everything you've ever heard about brussel sprouts being <em>too</em> healthy. Serve these puppies to your poker buddies and we guarantee they'll be coming back for more.</p>
<img class="displayed" src="images/challenge.png" />
<div id="Ingredients">
<div class="left"><img src="images/time.png" width="302" height="233" /></div>
<div class="right">
<h3>Ingredients</h3>
<ul>
<li> 4 Cups of Raw Brussel Sprouts, halved </li>
<li> 2 Tablespoons of Olive Oil </li>
<li> 1 Cup of freshly grated parmesan </li>
<li>Pinch of Salt & Pepper</li>
<li> 1 Lemon</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="ingredients">
<h2>Instructions:</h2>
<ol>
<li>Preheat Oven to 405 Degrees Farenheit.</li>
<li>While the oven is preheating, cut the brussel sprouts in half and throw them in your big ass bowl. Add oil and a few pinches of salt and pepper and mix with your bare hands (like a real man).</li>
<li>Spread the sprouts on a baking pan and leave them on middle rack for 45 minutes. <strong>*Flip them after 20 minutes</strong>.</li>
<li>While those bad boys are cooking, grate the cheese and slice the lemon into quarters.</li>
<li>Remove sprouts from oven and sprinkle parmesan cheese. Serve with lemon wedge.</li>
</ul>
</div>
</div>
<!--content Area end-->
</body>
</html>
CSS:
body {
font-family:Arial, Helvetica, sans-serif;
color:#322e2e;
margin:0px;
}
/* ************Main container *****************/
#main_container {
width: 1000px;
margin:auto;
}
/* ************Banner start *****************/
#main_container .banner {
width: 1000px;
height:500px;
background:url(../images/brussels.jpg) no-repeat top;
}
#main_container .banner h1 {
text-align:center;
color: white;
text-shadow: 2px 2px #666666;
font-size: 40px;
font-weight: lighter;
padding-top: 200px;
letter-spacing: 1px;
margin-top:-4px;
}
/* ************Banner start *****************/
#banner-container{
width:100%;
position:relative;
}
#banner-text{
text-align:center;
color: black;
text-shadow: 2px 3px #cccccc;
font-size: 40px;
font-weight: lighter;
padding-top: 50px;
letter-spacing: 1px;
margin: auto;
/* position: absolute; */
/* left: 289px; */
/* top: 33px; */
}
img.banner {
width: auto;
height:500px;
}
img.banner h1 {
text-align:center;
color: white;
text-shadow: 1px 1px #666666;
font-size: 40px;
font-weight: lighter;
padding-top: 200px;
letter-spacing: 1px;
margin-top:-4px;
}
/* ************Banner end *****************/
/* ************content start *****************/
#content {
margin: 50px 50px 200px 50px;
}
p {
font-family:Arial, Helvetica, sans-serif;
color:#322e2e;
font-size:19px;
text-align:left;
}
img.displayed {
display: block;
/* margin-left: auto; */
/* margin-right: auto
; */
/* margin-top: 50px; */
margin: 100px auto 120px auto;
border: 1px solid black;
border-radius: 10%;
}
#Ingredients {
margin-top:100px;
}
#Ingredients .left {
margin:0px;
float:left;
width:280px;
margin: 0px 10px 0px 100px;
}
#Ingredients .right {
margin-left: 10px;
float:left;
width:500px;
}
#Ingredients h3 {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
font-size:22px;
margin:0px 0px 20px 40px;
}
#Ingredients h2 {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
font-size:26px;
margin:0px 0px 0px 0px;
text-align:center;
}
#Ingredients ul {
margin:0px;
}
#Ingredients ul li {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size:20px;
list-style:none;
padding:0px;
}
/* ************Banner end *****************/
.clear {
clear:both;
}
li {
padding-top: 20px;
}
div#ingredients {
margin-top: 120px;
}
#Ingredients .left img:hover {transform: scale(1.1);
}
#Ingredients .left img {transition: all .2s ease-in-out; }
. I was asleep, sorry I couldn’t help.