Hey guys im stuck in the last point where "Your Technical Documentation project should use at least one media query."I dont understand what am i supossed to do, do i need to create a @media (max-width:.) in the css stylesheet? or do how do i create a @media rule in html. Im almost done except for that last step.
Maybe looking up what media query is would help?
I did, i actually added a media query into the styles.css, i can see it working in the website but the code doesnt goes through, i dont know if im suppossed to add a media query line into the html.
This is the media query i added into the styles.css
@media only screen and (max-width: 500px) {
.introduction{
color: red;
}
}
That seems correct.
I pasted your code as replacement into my already finished project, ran the tests, and it completed fine.
I would suggest that you make sure there are no browser plugins that at interfering .
thats odd, is there anything i need to add to the html file specifying the media query?
Please post all your html code and all your css code here for us to check it rather than to talk in hypotheticals.
here is my html:
<DOCTYPE! html>
<html lang="en"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="device-width, initial-scale=1.0">
<title>Husqvarna 701 Supermoto</title>
<link rel="stylesheet" href="styles.css">
</head>
<main id="main-doc">
<nav id="navbar">
<header>Features</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Technical_Details">Technical Details</a>
<a class="nav-link" href="#Frame">Frame</a>
<a class="nav-link" href="#Polyamide_rear_subframe_and_tank">Polyamide rear subframe and tank</a>
<a class="nav-link" href="#WP_fork">WP fork</a>
<a class="nav-link" href="#WP_monoshock">WP monoshock</a>
<a class="nav-link" href="#Engine">Engine</a>
<a class="nav-link" href="#Overhead_Camshaft">Overhead Camshaft</a>
<a class="nav-link" href="#Fuel_injection_system">Fuel injection system</a>
<a class="nav-link" href="#Gearbox">Gearbox</a>
<a class="nav-link" href="#Wheels">Wheels</a>
<a class="nav-link" href="#Brakes">Brakes</a>
<a class="nav-link" href="#Slipper_clutch">Slipper clutch</a>
<a class="nav-link" href="#Traction_control">Traction control</a>
<a class="nav-link" href="#Bodywork">Bodywork</a>
<a class="nav-link" href="#CNC-machined_triple_clamps"> CNC-machined triple clamps</a>
<a class="nav-link" href="#Ride_Modes">Ride Modes</a>
<a class="nav-link" href="#New_Configurator">New Configurator</a>
</nav>
<section class="main-section" id="Introduction">
<header class="Introduction" id="Introduction">Introduction</header>
<p class="explanation">Bringing the pure spirit of Supermoto riding to the street, the powerful, single-cylinder 701 Supermoto delivers unparalleled performance on the asphalt. Featherlight, perfectly balanced, and equipped with the latest electronic rider aids, it is a motorcycle that allows for full customisation and encourages extended ride times. Distinguished by its black and grey livery, the 701 Supermoto creates a commanding presence on the open road.</p>
</section>
<div class="p1">
<section class="main-section" id="Technical_Details">
<header class="Technical_Details" id="Technical_Details" > Technical Details</header>
<div class="leftp" style="float:left">
<h1 class="component">Engine</h1>
<ul>
<li class="features"><span class="element" >TRANSMISSION</span> 6-speed</li>
<li class="features"><span class="element">COOLING</span> Liquid cooled</li>
<li class="features"><span class="element">POWER IN KW</span> 55 kW</li>
<li class="features"><span class="element">STROKE</span> 80 mm</li>
</ul>
</div>
<div class="rightp" style:"float:left">
<h1 class="component">Chassis</h1>
<ul>
<li class="features"><span class="element">WEIGHT (WITHOUT FUEL)</span> 147 kg</li>
<li class="features"><span class="element">TANK CAPACITY (APPROX.)</span> 13 l</li>
<li class="features"><span class="element">ABS</span> Two-channel Bosch 9.1 MP ABS (incl. Cornering ABS and Supermoto mode Disengegable)</li>
<li class="features"><span class="element">FRONT BRAKE DISC DIAMETER</SPAN> 320 mm</li>
<li class="features"><span class="element">REAR BRAKE DISC DIAMETER</span> 240 mm</li>
</ul>
</div>
</section>
</div>
<section>
<header class="subtitle">01. Precisely Engineered</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_701-Supermoto-2023-01_%23SALL_%23AEPI_%23V1.jpg" class="main-img">
</section>
<div class="precisely_enginereed">
<section class="main-section" id="Frame">
<header class="precisely_engineered" id="Frame" >Frame</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_frame-black-701sm-20_%23SALL_%23AEPI_%23V1.png" class="img">
<p class="explanation">The lightweiht trellis frame is made of high-grade chromium-molybdenum steel and developed to ensure precise handling and instil complete confidence. Detailed feedback is transmitted to the rider thanks to precisely calculated torsional rigidity and longitudinal flex</p>
</section>
<section class="main-section" id="Polyamide_rear_subframe_and_tank">
<header class="precisely_engineered" id="Polyamide_rear_subframe_and_tank">Polyamide rear subframe and tank</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_subframe-701sm-20_%23SALL_%23AEPI_%23V1.png" class="img">
<p class="explanation">The self supporting rear subframe with integrated<code> 3.4 gal (13 liter)</code> fuel tank is prefectly positioned for the best possible weight distribution. Produced in a thermoplastic rotational moulding process, the single-piece construction weights only <code> 11.4 lbs (5.2kg)</code> and is made of high-strength polyamide.</p>
</section>
<section class="main-section" id="WP_fork">
<header class="precisely_engineered" id="WP_fork">WP fork</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_fork-701sm-20_%23SALL_%23AEPI_%23V1.png" class="img">
<p class="explanation">The WP APEX split fork has <code>215 mm </code>wheel travel, and features improved damping and an easier setup than traiditonal forks thanks to the separate damping circuits in the fork legs. The left leg is dedicated to compression damping, while the right fork leg is for rebound damping. </p>
</section>
<section class="main-section" id="WP_monoshock">
<header class="precisely_engineered" id="WP_monoshock">WP monoshock</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_shock-701sm-20_%23SALL_%23AEPI_%23V1.png" class="img">
<p class="explanation">The fully adjustable WP APEX rear shock absorber features rebound damping adjustment as well as a high and low compression damping adjustment. The <code> 240 mm</code> rear wheel travel guarantees perfect control in every condition, be it on tight and twisty mountain roads or in crowded city centers.</p>
</section>
</div>
<section>
<header class="subtitle">02. A Masterpiece</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_701-Supermoto-2023-02_%23SALL_%23AEPI_%23V1.jpg" class="main-img">
<section class="main-section" id="Engine">
<header class="a_masterpiece" id="Engine">Engine</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_engine-701-20_%23SALL_%23AEPI_%23V1.png" class="img">
<p class="explanation">The single overhead camshaft, liquid cooled, single cylinder engine features the latest in design and electronic technology. An outstanding maximum power output of <code>55 KW (74hp) 8000rpm 73,5 Nm 6000rpm</code> leave the rider no doubt of the performance packed inside this lightweight unit</p>
</section>
<section class="main-section" id="Overhead_Camshaft">
<header class="a_masterpiece" id="Overhead_Camshaft">Overhead Camshaft</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_701-cylinder-head-2017_%23SALL_%23AEPI_%23V1.jpg" class="img">
<p class="explanation">The compact design of the single overhead camshaft, 4-valve cylinder head features <code> 42mm intake 34mm exhaust valves </code> actuated by a robust rocker arm system which delivers precise valve timing at high engine speeds. Ignition is via a dual spark plug layout, each of which has an individual ignition timing control for optimal fuel combustion in the large bore combustion chamber.</p>
</section>
<section class="main-section" id="Fuel_injection_system">
<header class="a_masterpiece" id="Fuel_injection_system">Fuel injection system</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_ridebywire-701sm-20_%23SALL_%23AEPI_%23V1.png" class="img">
<p class="explanation">The Keihin electronic fuel injection system features a <code> 50mm</code> throttle body with no mechanical linkage to the throttle grip. As the rider twists the trhottle open or closed, the throttle valve is electronically controlled by the engine management system (EMS). The EMS continously compares engine parameters with data from sensors, and adjusts the throttle valve accordingly, resulting in perfect power delivery and throttle response.</p>
</section>
<section class="main-section" id="Gearbox">
<header class="a_masterpiece" id="Gearbox">Gearbox</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_701-21-gearbox_%23SALL_%23AEPI_%23V1.jpg" class="img">
<p class="explanation"> The lightweight 6-speed gearbox features an Easy Shift function allowing gears to be seamlessly shifted up or down without using the clutch. The system uses two sensors, one sensor is on the shift arm, which detects the movement on the shift lever rod when the rider upshifts. As the second sensor detechs the gear engagement, it matches engine parameters to allow a simple gear change at any rpm or engine load.</p>
</section>
<section>
<header class="subtitle">3 Perfect Control</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_701-Supermoto-2023-03_%23SALL_%23AEPI_%23V1.jpg" class="main-img">
</section>
<section class="main-section" id="Wheels">
<header class="perfect_control" id="Wheels">Wheels</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_701-Supermoto-MY23-wheels_%23SALL_%23AEPI_%23V1.jpg" class="img">
<p class="explanation">Black anodized Giant tubeless spoked wheels are lightweight and strong. The <code> 17" </code> wheels are shod with Continental ContiAttack supermoto 120/70 and 160/60 tires front and rear respectively for extraordinarily light handling and exceptional control at all lean angles.</p>
</section>
<section class="main-section" id="Brakes">
<header class="perfect_control" id="Brakes">Brakes</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_701-Supermoto-MY23-brakes_%23SALL_%23AEPI_%23V1.jpg" class="img">
<p class="explanation"> Exceptional stopping power with improved brake feel and controllability are available at the rider request thanks to the radially mounted 4 piston Brembo caliper and <code>Ø 320mm front 240mm rear</code> floating discs. The latest cornering sensitive ABS technology from Bosch guarantees maximum braking confidence.</p>
</section>
<section class="main-section" id="Slipper_clutch">
<header class="perfect_control" id="Slipper_clutch">Slipper clutch</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_slipperclutch-701sm-20_%23SALL_%23AEPI_%23V1.png" class="img">
<p class="explanation"> The APTC (Adler Power Torque Clutch) from Adler allows for greater speeds going into and comung out of corners by maximising rear wheel grip under hard acceleration as well as preventing rear wheel instability and hopping when braking hard into the apex of a turn. The rider thus enjoyrs maximum control and perfect down-shifting.</p>
</section>
<section class="main-section" id="Traction_control">
<header class="perfect_control" id="Traction_control">Traction control</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_tractioncontrol-701-20_%23SALL_%23AEPI_%23V1.png" class="img">
<p class="explanation">The lean-angle sensitive traction control system monitors rear and wheel speed and reacts inmediately (within miliseconds) if the rotational speed of the rear wheel is disproportionate to the riding situation. The system works by reducing the enigne output with a smooth and barely perceivable intervention at the throttle valve, until the system has reduced slippage to an optimum level for the selected ride mode and current lean angle. For riders looking for the full control of their motorcycle, the traction control can also be switched off.<p>
</section>
<section>
<header class="subtitle">04. Premium Technology</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_701-Supermoto-2023-04_%23SALL_%23AEPI_%23V1.jpg" class="img">
<section class="main-section" id="Bodywork">
<header class="premium_technology" id="Bodywork">Bodywork</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_701-Supermoto-MY23-bodywork_%23SALL_%23AEPI_%23V1.jpg" class="img">
<p class="explanation">Sleek, modern bodywork is ergonomically designed to connect the rider to the motorcycle and allow for unrestricted movement in all situations. The riding experience is further enhanced by the extended seat, which reaches over the radiators shrouds for improved grip and control in tighter corners. Additionally, a USB socket is neatly positioned behind the headlight mask for a convenient and continuous power supply for all navigational devices</p>
</section>
<section class="main-section" id="CNC-machined_triple_clamps">
<header class="premium_technology" id="CNC-machined_triple_clamps"> CNC-machined triple clamps</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_tripleclamp-701sm-20_%23SALL_%23AEPI_%23V1.png" class="img">
<p class="explanation">The adonized CNC-machined triple clamps are designed for high performance Supermoto needs. Stylishly crafted and engineered with a precise flex, they transmit detailed feedback on the behavior of the front end to the rider</p>
</section>
<section class="main-section" id="Ride_Modes">
<header class="premium_technology" id="Ride_Modes">Ride Modes</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_ridemodes-701sm-20_%23SALL_%23AEPI_%23V1.png" class="img">
<p class="explanation">With a handlebar switch, the power characteristic of the engine can easily be adjusted on the fly through two unique ride modes. Mode 1 offers a sporty throttle response and cornering sensitive traction control, keeping wheel slip and wheelies to a minimum for optimal street riding performance. Mode 2 provides a more agressive throttle response with reduced traction control, to allow drifts and full control of the slide, aimed at track or unconditional street usage. Optional Supermoto ABS mode is also available. In the supermoto mode, ABS only functions on te front wheel and the rider then has control to lock up the rear wheel if needed for full Supermoto performance.</p>
</section>
<section class="main-section" id="New_Configurator">
<header class="premium_technology" id="New_Configurator">New Configurator</header>
<img src="https://azwecdnepstoragewebsiteuploads.azureedge.net/PHO_BIKE_DET_701-Supermoto-MY23-a2_%23SALL_%23AEPI_%23V1.jpg" class="img">
<p class="explanation">The configurator allows you to easily add accessories to your new 701 Supermoto with the click of a few buttons. Build your dream motorcycle through an immersive online experience now</p>
</section>
</main>
<link rel="stylesheet" href="styles.css">
Here is my css:
#navbar{
height: 100%;
width: 9%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #faf7e6;
color: #182347;
padding-top: 40px;
padding-bottom: 10px;
transition: 0.5s;
overflow-x: hidden;
}
#navbar a{
padding: 8px 8px 8px 32px;
text-decoration: none;
color:#182347;
font-size: 14px;
display: block;
transition: 0.3s;
font-family: helvetica;
font-weight: bold;
}
#navbar a:hover{
color: #c9c110;
}
#navbar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 20px;
}
@media screen and (max-height: 450px) {
#navbar {padding-top: 15px;
width: 0;
font-size: 8px;}
#navbar a {font-size: 8px;
width: 0;
}
}
body{
position: absolute;
left: 170px;
margin-left: 11px;
background-color: #fffff4;
}
.subtitle{
color: #151130;
font-family: Helvetica;
font-weight: 500;
font-size: 40px;
font-variant: small-caps slashed-zero;
}
.main-img{
width: 100%;
height: 900px;
object-fit: cover;
}
img{
object-fit: cover;
width: 400px;
height: 400px;
}
.component{
font-family: Helvetica;
Font-weight: 300;
color: #151130;
font-size: 22px;
}
.features{
font-family: Helvetica;
font-size: 14px;
font-weight: 100;
color: #151130;
}
.element{
font-weight: 350;
}
header{
font-family: Helvetica;
color: #151130;
font-size: 30px;
font-weight: 200;
}
.explanation{
font-family: Helvetica;
color: #151130;
font-size: 14px;
font-weight: 100;
}
.p1{
background-color: #fffff4;
padding-top: 100px;
padding-bottom: 190px;
}
.leftp{
float: left;
width: 50%;
text-align: left;
}
.rightp{
float: right;
width: 50%;
}
.precisely_enginereed{
width:
}
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
you have a few syntax errors and when I started to fix them, the code passed.
You can see all of them by pasting your html here
The main ones to fix include:
this link element should be deleted. The correct one is already nested in the head element.
You need to move the html closing tag to the last line of the file.
And the first line of this file should be <!DOCTYPE html> (your exclamation is in the wrong spot)