Dasmoto Project, how to change the size of my heading

Hello fellow coders,

I have been working on the Dasmoto’s Arts and Crafts. Here are the specs: https://content.codecademy.com/courses/freelance-1/unit-2/dasmotos-arts_redline.jpg

My problem is my heading. It’s too large. According to the spec’s it should be on one line. Mine is on two. Can someone please let me know how to adjust the size of my header.

Here is my code:

HTML:

<html>
<head>
    <title>Dasmoto's Art Supplies</title>
    <link href="index.css" type="text/css" rel="stylesheet">
</head>

<body>
  <header class="title">
    <h1>Dasmoto's Arts & Crafts</h1>
  </header>

<div>
<h2 class="brushes">Brushes</h2>
<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. <div class="price">Starting at $3.00/brush.</div> </p>
</div>

<div>
<h2 class="frames">Frames</h2>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames makde of different material, including MDF, birchwood and PDE. Select frames can be sanded and painted according to your needs. <div class="price">Starting at $2.00/frame.</div></p>
</div>

<div>
<h2 class="paint">Paint</h2>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg">
<h3>Clean Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz to 8oz). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <div class="price">Starting at $5.00/ tube.</div> </p>
</div>


</body>
</html>

CSS:

header {
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg");
}

.title {
    font-family: Helvetica, sans-serif;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-position: horizontal;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-sIze: 32px;
    font-weight: bold;
    color: white;
}

.brushes {
    background-color: mediumspringgreen;
}

.frames {
    background-color: lightcoral;
}

.paint {
    background-color: skyblue;
}

.price {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: blue;
}

Here is a link to my site: file:///C:/Users/mcmcc/Desktop/DevProject/Dasmoto/index.html

Hey there @moniquebender7872932 and welcome to the forums!! :slightly_smiling_face:

Just a heads up, your link to your site, won’t work for anyone other than you. It is pointing to a file stored on your computer, and as such only works for your computer.


Your <header> is currently so big because your font-size within .title is set to be so large:

For most small computer screens that won’t fit on one line, and so it splits into two at the end of the page. I would recommend making it a good deal smaller. You could make it a percentage so that it changes based on screen size.

One thing to note is that your background picture may be a good deal smaller than you want. You can change this by setting the height of the element to be bigger. I again recommend using a percentage so it can change with screen size.

1 Like

I changed the font-size to 50px and it worked perfectly! Thank you!! I really appreciate you taking the time to answer my question and be so thorough.
:smiley:

1 Like