Hello, this is Triston.
I am looking to improve my code for this project. I noticed in the activity page that the result on the sidebar has a minimum width of 612 pixels. As a result, I added code in my CSS to match the page.
CSS:
* {
font-family: Helvetica, sans-serif;
}
header {
width: 100%;
margin: 40px auto;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg");
min-width: 612px;
}
h1 {
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
.headerbox h2 {
font-size: 32px;
font-weight: bold;
color: white;
}
main {
min-width: 612px;
}
#brushes {
background-color: mediumspringgreen;
}
#frames {
background-color: lightcoral;
}
#paint {
background-color: skyblue;
}
strong {
color: blue;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dasmoto's Arts & Crafts</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<!-- Header -->
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<!-- Main -->
<main>
<!-- Sections are used to demarcate listings. They each contain a "headerbox" div and an article element. -->
<section>
<div class="headerbox" id="brushes">
<h2>Brushes</h2>
</div>
<article>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg" />
<h3>Hacksaw Brushes</h3>
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <strong>Starting at $3.00 / brush.</strong></p>
</article>
</section>
<!-- section 2 of page -->
<section>
<div class="headerbox" id="frames">
<h2>Frames</h2>
</div>
<article>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg" />
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <strong>Starting at $2.00 / frame.</strong></p>
</article>
</section>
<!-- section 3 of page -->
<section>
<div class="headerbox" id="paint">
<h2>Paint</h2>
</div>
<article>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg" />
<h3>Clear Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <strong>Starting at $5.00 / tube.</strong></p>
</article>
</section>
</main>
</body>
</html>
I am looking for a way to make the process of applying a global minimum width more efficient. Does anyone have any ideas on how to accomplish this task?
Thanks,
Triston