Is the best way to make a website responsive to start from mobile device size?
From small to large?
mobile to desktop?
I"m just watching this video and this is the first video I actually do understand
yes or no and why?
I’m also wondering if this mess is fixable. I have to admit it is quite intimidating to start fixing this, I’d rather start over. What is the best way to approach this.
The images might not be visible because it’s from my local computer but hopefully someone can see through it.
<!--HTML: HyperText Markup Language-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="webpage, MDN, Mozilla Developer Network">
<title>My test page</title>
<link rel="stylesheet" href="style.css"> <!--links to css file-->
<!--START: This code links your page to a stylesheet hosted by the Google Fonts service, which loads your chosen font.-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Adamina&family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!--END: This code links your page to a stylesheet hosted by the Google Fonts service, which loads your chosen font.-->
</head>
<body>
<div id="back">
<header>
<section id="title">
<h1>The Kiger Mustangs</h1>
<h2>Told from the heart of the horse..</h2>
<!--<a href="https://commons.wikimedia.org/wiki/File:Kiger_Mustangs.jpg">--><img src="images/Kiger_Mustangs.jpg" alt="A herd of 10 various dunskin colored kiger mustang horses running in a field" title="Kiger Mustang herd"><!--</a>--></section>
<section id="info">
<!--When using anchor link on an image (to create image link). Make sure to set "display:block;" on the image to prevent extra clickable space (extra margin) of the image link-->
<a href="https://commons.wikimedia.org/wiki/File:Kiger_Mustang_stallions.jpg"><img src="images/Kiger_Mustang_stallions.jpg" alt="Kiger Mustang stallions, captured in a holding pen" title="Kiger Mustang stallions"></a>
<div id="infotext"><h2>What is a Kiger Mustang?</h2>
<p>The Kiger mustang is a strain of mustang horse located in the southeastern part of the U.S. state of Oregon. The name applies only to wild-captured individuals and does not apply to their bred-in-captivity progeny, which are known as Kiger horses. <br> <br> The Bureau of Land Management (BLM) administers two herd management areas for Kiger mustangs in the Burns District—Kiger and Riddle Mountain, in the Steens Mountain area. DNA testing has shown that Kiger mustangs are descended largely from Spanish horses brought to North America in the 17th century, a bloodline thought to have largely disappeared from mustang herds before the Kiger horse populations were discovered in 1977.[1]
Kiger mustangs are most often dun in color, although they are found in other solid colors. <br><br>Compact and well-muscled in appearance, their coloration and phenotype make them some of the most desired by private buyers when horses are removed from the feral herds. The BLM rounds up the horses from the two herd management areas every three to four years, and auctions excess horses to the public, returning horses to public lands that meet the desired coloration and phenotype and sometimes exchanging horses between the two herds to maintain genetic diversity. Horses in private ownership may be registered in several breed associations, the largest and oldest being the Kiger Mesteño Association, established in 1988.
</p>
</div>
</section>
<br>
<section id="characteristics">
<a href="https://commons.wikimedia.org/wiki/File:Kiger_Mustang_%282692908156%29.jpg"><img src="images/ride.jpg" alt="Kiger Mustang being ridden by an western rider" title="Cantering Kiger Mustang"></a>
<div id="infotext2">
<h2>Characteristics</h2>
<p>Kiger mustangs are most commonly dun in color, although the breed registry also allows bay, black and roan horses to be registered. There are numerous shades of dun, all variations on a tan base, and many shades have their own names. <br><br>The Kiger Mesteño Association separates dun shades into four categories: dun, red dun, grulla, and claybank. "Dun" as used by the Kiger registry covers dun horses with black points, and adds the terms zebra dun, dusty dun, smutty dun or coyote dun, depending on the exact shade of body color. Red dun, or the variation "apricot dun", covers horses with points that are red, brown or flaxen. Grulla covers horses with blueish, mousy or slate-colored bodies and black points, and these horses may also be called lobo duns, olive grullas, silver grullas or smutty grullas. Claybank, another variation of red dun, describes Kiger horses who have golden body coats with red or orange tints and darker red points.[2] Dun horses may have primitive markings, which include any of the following: a dorsal stripe, lightened outer guard hairs on the manes and/or tails, zebra-like stripes on the upper legs, transverse striping over the upper shoulders, dark color around the muzzle, and ears with dark outlines and lighter interiors.[3]
Kiger mustangs generally stand 13.2 to 15.2 hands (54 to 62 inches, 137 to 157 cm) high.<br><br> They are compact, well-muscled horses with deep chests and short backs. In general, they are agile and intelligent, with the stamina and sure-footedness seen in many feral horse breeds. They are generally bold but gentle and calm. They are used for pleasure riding as well as endurance riding, assorted performance competition under saddle, driving, and many other situations where an athletic horse is desired.[3][4]</p>
<h3>Summary of the characteristics</h3>
<ul>
<li>Color: Dun</li>
<li>Black points</li>
<li>Primitive markings</li>
<li>Compact</li>
<li>Between 13 and 15 hands</li>
</ul>
<p>Click <a href="https://en.wikipedia.org/wiki/Kiger_mustang"><b>here</b></a> to visit the Wikipedia page.</p>
</section>
<br>
<section id="check">
<div>
<h4>Have your read everything?</h4>
<p>Click on an item to cross out the subjects you've already read about on this page.</p>
<ol>
<li>Origin of the Kiger Mustang</li>
<li>Common colors of Kiger Mustangs</li>
<li>Conformation of the breed</li>
<li>Personality of the breed</li>
</ol>
</div>
</section>
</div>
</div>
</section>
<footer>
<p>© 2025 | All rights reserved | Webdesign: Whitney Wassenaar</p>
</footer>
<script src="scripts/toggleCrossoutItem.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/user.js"></script>
<button>Change user</button>
</body>
</html>
body {
font-size: 20px;
font-family:"Barlow Condensed", sans-serif;
/*background-color: rgb(132, 121, 109);*/
background-image: linear-gradient(rgb(48, 17, 10), rgb(121, 61, 36), rgb(189, 107, 25), rgb(255, 196, 108));
/*background-image:linear-gradient(rgb(255, 196, 108), rgb(189, 107, 25), rgb(121, 61, 36),rgb(48, 17, 10));*/
margin: 0;
}
#back {
display: flex;
align-content: center;
padding: 20px;
margin:auto;
background-color: rgba(202, 195, 187, 0.315);
width: 65%;
border-radius: 2em 0 2em 2em;
}
h1 {
font-size: 50px;
margin: 30px;
text-shadow: 1px 1px 10px rgb(255, 255, 255);
}
h2 {
font-size: 30px;
}
h3{
font-size: 25px;
}
p, li {
font-size: 20px;
line-height: 1.3;
letter-spacing: 0.4px;
}
#title {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-bottom:40px ;
}
#title img {
border-radius: 2em;
}
#info {
display: flex;
flex-direction: row;
justify-content:flex-start ;
align-items: flex-start;
border: solid rgba(0, 0, 0, 0.482) 2px;
border-radius: 2.1em;
background-color: rgba(255, 255, 255, 0.212);
}
#info img {
border-radius: 2em 0 0 2em;
display: block;
}
#infotext h2 {
margin:20px;
}
#characteristics {
display: flex;
flex-direction: row-reverse;
justify-content:flex-start ;
align-items: flex-start;
border: 2px solid rgba(0, 0, 0, 0.482);
border-radius: 2.1em;
background-color: rgba(255, 255, 255, 0.212);
}
#characteristics img {
border-radius: 0 2em 0 2em;
display: block;
}
#infotext2 h2, h3, p, ul {
margin:20px;
}
a {
text-decoration: none;
color: black;
}
#check {
display: flex;
flex-direction: row;
justify-content:flex-start ;
align-items: flex-start;
border: 2px solid rgba(0, 0, 0, 0.482);
border-radius: 2.1em;
background-color: rgba(255, 255, 255, 0.212);
}
#check h4 {
margin: 20px;
}
.done{
color:darkgreen;
text-decoration: line-through solid black 3px;
}
footer {
text-align: center;
}
