Hello everyone, first time posting here 
So, i’m almost done with my “Product Landing Page” project. I’ve already made the desktop version and now i’m adding media queries to make it responsive.
There are two bits that are giving me trouble:
-
Feature-list: my “#feature” and “.feature-list” doesn’t seem to respond to a different screen size. No matter what i do, it doesn’t change anything. I’ve tried changing it’s width, changing it’s text-align property, changing the display and nothing seems to work. What i’m trying to achieve is making the text fit on screen and align center, but it’s not happening and i have no idea why.
-
Pricing blocks: the other problem is with my pricing blocks, which are side-by-side on the desktop version and i want to make them one below the other on mobile. Again, no matter what i try, it’s not working, they just get thinner.
I believe both problems are connected due to the fact that both these sessions are displayed as grids.
Can someone help me?
HTML Code:
<div id="header-div">
<header id="header">
<img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" id="header-img">
<nav id="nav-bar">
<ul>
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#how-it-works" class="nav-link">How it works</a></li>
<li><a href="#pricing" class="nav-link">Pricing</a></li>
</ul>
</nav>
</header>
</div>
<div id="form-div">
<h1>Handcrafted, home-made masterpieces</h1>
<form action="https://www.freecodecamp.org/email-submit" id="form">
<input
type="email"
name="email"
placeholder="Enter your email address"
id="email"
required
>
<br>
<input
type="submit"
id="submit"
value="Get started"
>
</input>
</form>
</div>
<div id="features">
<div class="feature-list">
<div class="icon"><i class="fa fa-fire"></i></div>
<div class="desc">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="feature-list">
<div class="icon"><i class="fa fa-truck "></i></div>
<div class="desc">
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="feature-list">
<div class="icon"><i class="fa fa-battery-full"></i></div>
<div class="desc">
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</div>
<div id="how-it-works">
<iframe
width="600"
height="300"
src="https://youtu.be/y8Yv4pnO7qc"
id="video"
>
</iframe>
</div>
<div id="pricing">
<div class="prices" id="tenor">
<h3 class="trombone">Tenor Trombone</h3>
<h2>$600</h2>
<p>Lorem ipsum.<br>Lorem ipsum.<br>Lorem ipsum dolor.<br>Lorem ipsum.</p>
<button> Select </button>
</div>
<div class="prices" id="bass">
<h3 class="trombone">Bass Trombone</h3>
<h2>$900</h2>
<p>Lorem ipsum.<br>Lorem ipsum.<br>Lorem ipsum dolor.<br>Lorem ipsum.</p>
<button> Select </button>
</div>
<div class="prices" id="valve">
<h3 class="trombone">Valve Trombone</h3>
<h2>$1200</h2>
<p>Plays similar to a Trumpet<br>Great for Jazz Bands<br>Lorem ipsum dolor.<br>Lorem ipsum.</p>
<button> Select </button>
</div>
</div>
<footer>
<div id="footer">
<ul>
<li><a href="#features">Privacy</a></li>
<li><a href="#features">Terms</a></li>
<li><a href="#features">Contact</a></li>
</ul>
<p>Copyright 2016, Original Trombones</p>
</div>
</footer>
CSS Code:
:root {
--light-gray: #f5f5f5;
--mustard-yellow: #ffc400;
}
body {
background-color: var(--light-gray);
font-family: sans-serif;
}
header {
padding: 1em;
background-color: var(--light-gray);
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
header ul {
display: flex;
}
@media (max-width: 600px) {
header, header ul {
display: block;
margin: auto;
text-align: center;
line-height: 1.5;
}
.icon {
display: none;
}
}
header li {
margin: auto 3em auto auto;
list-style-type: none;
}
a {
text-decoration: none;
color: #000;
}
#header-img {
width: 20em;
max-width: 100%;
height: auto;
}
#form-div {
text-align: center;
margin: 12em auto 7em auto;
line-height: 2.5em;
}
#email {
max-width: 250px;
width: 100%;
height: 1.5em;
padding-left: 0.5em;
margin-bottom: 1.5em;
}
#submit {
max-width: 150px;
width: 100%;
height: 2.5em;
border: none;
background-color: var(--mustard-yellow);
text-transform: uppercase;
font-weight: 800;
}
#features {
width: 50%;
margin: auto;
}
i {
color: var(--mustard-yellow);
transform: scale(3);
}
.feature-list {
margin-bottom: 3em;
display: grid;
grid-template-columns: 10% 80%;
align-items: center;
}
#how-it-works {
text-align: center;
margin: 5em auto 5em auto;
}
iframe {
max-width: 600px;
width: 100%;
border: none;
}
#pricing {
text-align: center;
line-height: 1.6;
width: 60%;
margin: auto;
display: grid;
grid-template-areas: 'tenor bass valve';
grid-column-gap: 1.5em;
}
.prices {
border: 1px solid;
}
#tenor {
grid-area: tenor
}
#bass {
grid-area: bass
}
#valve {
grid-area: valve;
}
.trombone {
margin: 0;
padding: 1.5em;
background-color: #dbdbdb;
text-transform: uppercase;
font-weight: 550;
font-size: 15px;
}
.prices button {
width: 35%;
padding: 1em;
margin: 1em 0 2em 0;
border: none;
background-color: var(--mustard-yellow);
text-transform: uppercase;
}
#footer {
width: 60%;
margin: 4em auto 0 auto;
padding: 0.5em 1em 0.5em 1em;
line-height: 0.7;
background-color: #dbdbdb;
text-align: right;
}
footer ul {
display: flex;
justify-content: flex-end;
}
footer li {
list-style-type: none;
margin-left: 1em;
}
footer p {
font-size: 14px;
opacity: 0.5;
}
My browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36.
Challenge: Build a Product Landing Page
Link to the challenge:
i have no idea what’s wrong, i know i can change display to flex but eventually i’ll need to use grid and i need to learn.
if not let me know.
if not let me know.