hi guys i'm a bit newbie in web dev and i'm trying to build my portfolio website as training project, i structured it in desktop mode and when i begun using media-queries for responsiveness i encountered some problems, in a few words i have the mobile breakpoint at max-width 860px that works only if i resize the window of the browser manually and not if i use chrome's developer-tools to view it in mobile mode, i'll leave here the code and the link to the website if you want to view it on mobile
http://mandowebdev.ddns.net/portfolio/
#import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Knewave&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500;800&display=swap");
:root {
--background: #3e3e3e;
--primary: #ffed00;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
html {
width: 100vw;
height: 100vh;
font-size: 16px;
background-color: var(--background);
color: var(--primary);
}
body {
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
margin: auto;
}
nav {
width: 75%;
display: grid;
grid-template-columns: 1fr 3fr;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
height: auto;
}
.nav-logo {
font-family: "Luckiest Guy", cursive;
font-size: 3rem;
margin-right: 4.25rem;
margin-top: 1rem;
}
.nav-ul {
display: flex;
list-style-type: none;
}
.nav-li {
font-family: "Poppins", sans-serif;
font-weight: 800;
margin-right: 3.125rem;
}
.nav-links {
text-decoration: none;
color: var(--primary);
}
hr {
border: 2px solid #707070;
}
.landing {
width: 80%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url(img/grid.svg);
background-repeat: no-repeat;
background-size: cover;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
margin-bottom: 14.7rem;
padding: 3rem;
}
.landing-logo {
font-family: "Luckiest Guy", cursive;
font-size: 7.25rem;
}
.landing-logo-subtitle {
font-family: "Knewave", cursive;
font-size: 4.19rem;
}
.stack {
margin: auto;
margin-top: 8rem;
display: flex;
grid-template-columns: 1fr 1fr;
grid-column-gap: 12.25rem;
}
.stack-h1 {
font-family: "Luckiest Guy", cursive;
font-size: 2.5rem;
margin-bottom: 8rem;
margin-left: 7.5rem;
}
.stack article {
align-items: center;
}
.cloud {
border: 5px solid var(--primary);
border-radius: 4rem;
display: flex;
justify-content: space-around;
margin-left: 4rem;
}
.stack-icons {
margin: 5rem 1.5rem 5rem 1.5rem;
min-width: 2rem;
}
.projects {
margin-top: 25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.projects-h1 {
font-family: "Luckiest Guy", cursive;
font-size: 3rem;
}
.project {
padding-bottom: 10rem;
padding-top: 10rem;
display: grid;
grid-column-gap: 8rem;
grid-template-columns: 1fr 1fr;
align-items: center;
border-bottom: 2px solid var(--primary);
font-family: "Poppins", sans-serif;
line-height: 2rem;
}
#plant {
direction: rtl;
}
#plant p {
direction: ltr;
}
#media (max-width: 860px){
.project{
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
}
#media screen and (max-width: 1230px) {
.stack {
flex-direction: column;
}
.cloud {
margin-bottom: 15rem;
}
}
#media screen and (max-width: 1600px) {
html {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Portfolio</title>
</head>
<body>
<nav class="navbar">
<p class="nav-logo">Mando.</p>
<ul class="nav-ul">
<li class="nav-li">HOME</li>
<li class="nav-li">DEV-STACK</li>
<li class="nav-li">MY PROJECTS</li>
<li class="nav-li">CONTACT</li>
</ul>
</nav>
<hr id="nav_hr" />
<section class="landing">
<div class="landing-text">
<p class="landing-logo">Mando.</p>
<p class="landing-logo-subtitle">Full Stack Web Dev</p>
</div>
<img class="memoji" src="img/memoji_img.svg" alt="#" />
</section>
<section class="stack">
<article class="front-end">
<h1 class="stack-h1">My Front-end Stack</h1>
<div class="cloud">
<img class="stack-icons" src="img/front-end/js.svg" alt="#" />
<img class="stack-icons" src="img/front-end/html.svg" alt="#" />
<img class="stack-icons" src="img/front-end/css-3.svg" alt="#" />
</div>
</article>
<article>
<h1 class="stack-h1">My Back-end Stack</h1>
<div class="cloud">
<img class="stack-icons" src="img/back-end/js.svg" alt="#" />
<img class="stack-icons" src="img/back-end/django.svg" alt="#" />
<img class="stack-icons" src="img/back-end/python.svg" alt="#" />
</div>
</article>
</section>
<section class="projects">
<h1 class="projects-h1">My Learning Projects</h1>
<article class="project">
<img class="project-img" src="img/projects/python_guide.svg" alt="" />
<p class="projects-p">
A brief introduction to my favorite. Programming language: Python
</p>
</article>
<article class="project" id="plant">
<img class="project-img" src="img/projects/not_a_plant.svg" alt="" />
<p class="projects-p">
A product page design that includes images and a sample video <br />
for the product with a contact form at the end
</p>
</article>
<article class="project">
<img class="project-img" src="img/projects/apple.svg" alt="" />
<p class="projects-p">
My first html and css project: a little roadmap of Steve Jobs life
from 1974 to 2011
</p>
</article>
</section>
<section class="projects">
<h1 class="projects-h1">Javascript Projects</h1>
<article class="project">
<img class="project-img" src="img/projects/generative_art.svg" alt="" />
<p class="projects-p">
My generative art project made in javascript, with this you can tweak
<br />
some parameters to create your own generative frame
</p>
</article>
</section>
</body>
</html>
As it's working when you decrease the viewport size but not on the browser's emulator I suspect you are missing the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
See MDN for an explanation.
Add screen and in the max-width: 860px media query.
Related
I'm having trouble getting my grid to display the way i want and i can't see what i've done wrong. Please take a look at this for me.
It was displaying correctly when i was using background-image url() in css but i needed to use image tags because they need to be hyperlinks and i'm pretty sure this was the only way. When i use img tags the pictures were now displaying in their full size and i couldnt get them back to the right scale. and when i wrapped them in anchor tags they stopped displaying in the correct order.
Here's my code
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
margin: 0;
font-size: 1.8rem;
}
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
background-color: darkgrey;
padding-right: 5%;
}
header h1 {
background-color: blue;
padding: 1px;
min-width: 20%;
color: yellow;
}
nav {
display: flex;
text-decoration: underline darkblue;
width: 60%;
align-items: center;
justify-content: space-around;
}
nav li {
display: inline;
justify-content: flex-end;
padding-left: 8%;
color: yellow;
}
.heroBanner {
background-image: url("../images/02-hero-bg.jpg");
background-size: cover;
height: 200px;
position: relative;
}
#page-section {
width: 100%;
}
#title {
position: absolute;
bottom: 10%;
right: 10%;
background-color: blue;
color: yellow;
}
/* Put my about stuff here */
#about {
display: flex;
padding: 3%;
}
#about p {
align-items: stretch;
color: yellow;
}
#about-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#about-2 {
width: 80%;
padding-left: 3%;
background-image: url(/my-work/images/Portfolio-avatar.png);
background-size:contain;
background-position: center;
}
#work {
height: 1200px;
display: flex;
padding: 3%;
}
#work-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#work-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'one one'
'two three'
'four five'
}
.pics {
position: relative;
}
.pic-title {
position: absolute;
bottom: 15%;
background-color: blue;
color: yellow;
}
#big {
grid-area: one;
object-fit: contain;
margin: 10px;
border: solid 4px darkblue;
}
#pic1 {
grid-area: two;
object-fit: contain;
width: 25%;
margin: 10px;
border: solid 4px darkblue;
}
#pic2 {
grid-area: three;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic3 {
grid-area: four;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic4 {
grid-area: five;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#picture1, #picture2, #picture3, #picture4, #picture5 {
object-fit: cover;
}
#contact {
display: flex;
width: 100%;
display: flex;
padding: 3%;
}
#work-2 {
width: 75%;
}
#contact-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#contact-2 {
width: 80%;
}
#contact-2 ul {
display: flex;
list-style: none;
display: flex;
text-decoration: underline darkblue;
width: 80%;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lorenzo Francis-Walker // Junior Web Developer</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- main logo / nav -->
<header>
<h1>Lorenzo Francis-Walker</h1>
<nav>
<li>About me</li>
<li>Work</li>
<li>Contact Me</li>
</nav>
</header>
<!-- hero banner -->
<section class="heroBanner">
<h2 id="title">Room4Renzo</h2>
</section>
<main class="page-wrapper">
<!-- about me -->
<section class="page-section" id="about">
<div id="about-1">
<h2>About Me</h2>
</div>
<div id="about-2">
<p>My love for computers comes from a fairly young age and is greater than my current experience. I was given an
old PC by a friend that soon stopped working. He had another one that worked but soon after giving that to me
, it too stopped working. I found a pdf of how to build computers for dummies on my phone and used what i had
learned to combine the two PC's parts into one case, and it worked. I had always been interested in technology
but this is where my love for understanding computers and how they work. Once you learn about different types
of hardware theres not many places to go. ie networking, coding, etc. fortunately for me, the depth of the
limited options are vast, so there is alot left for me to learn and I never want my journey to end.</p>
</div>
</section>
<!-- portfolio container -->
<section class="page-section" id="work">
<div id="work-1">
<h2>Work</h2>
</div>
<div id="work-2">
<a href="" target="_blank">
<div id="big" class="pics">
<img src="./images/02-run-buddy.jpg" id="picture1" alt="" class="grid-column-span-2">
<div class="pic-title">
<h2>Run Buddy</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic1" class="pics">
<img src="./images/02-portfolio-1.jpg" id="picture2" alt="">
<div class="pic-title">
<h2>LED Wall</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic2" class="pics">
<img src="./images/02-portfolio-2.jpg" id="picture3" alt="">
<div class="pic-title">
<h2>Calculator</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic3" class="pics">
<img src="./images/02-portfolio-3.jpg" id="picture4" alt="">
<div class="pic-title">
<h2>Pastel Puzzels</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic4" class="pics">
<img src="./images/02-portfolio-4.jpg" id="picture5" alt="">
<div class="pic-title">
<h2>Surf Report</h2>
<p>Languages Used</p>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="page-section contact" id="contact">
<div id="contact-1">
<h2>Contact Me</h2>
</div>
<div id="contact-2">
<ul>
<li>Email: Lorenzo.afw#gmail.com</li>
<li>Github: Room4Renzo </li>
</ul>
</div>
</section>
</main>
</body>
</html>
i tried manually resizing, using object-fit as i saw in another answer, i tried different amount of columns for the grid, same for the rows. i can;t find where my mistake is. appreciate any help. Thanks
So I cant seem to figure out this padding, margin, and flexbox thing I cant seem to get these last 2 pictures lined up like this at the bottom of the page (green part). I need to put the logo in the middle and the photo right beside it. Also the code starts from < div class="bottom"> down.
/*
Colors:
Text: 1A1A1A
Green: #00B172
White: #FFF
*/
body{
margin: 0;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
height: 10vh;
width: 100vw;
}
nav{
display: flex;
justify-content: space-around;
width: 35vw;
}
nav > a{
text-decoration: none;
color: #070707;
}
.logo-spotify{
height: auto;
width: 10vw;
margin-left: 2vw;
}
.start{
background-image: url(../images/landing.jpg);
display: flex;
justify-content: center;
background-size: cover;
height: 850px;
align-items: center;
flex-direction: column;
}
.start-texts-Music{
color: white;
margin: 5vh 0;
font-size: 5vw;
}
.start-texts-Para{
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
font-size: 1.5vw;
}
h2{
/* text-decoration: underline; */
display: flex;
justify-content: center;
align-content: center;
font-size: 3vw;
border-bottom: 2px solid #06bc7d;
margin: 4vh 37vw;
}
.ads{
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
margin: 10vh 5.5vw;
}
.ads-block{
text-align: center;
}
.ads-text{
display: flex;
justify-content: center;
font-size: 25px;
color: #06bc7d;
align-items: center;
margin: 0;
}
.ads-desc{
margin: 3vh 0 3vh 0;
font-size: 20px;
width: 13vw;
color: #8a8a8a;
}
.bottom{
width: auto;
/* height: 100vh; */
background-color: #06bc7d;
margin: 0 2vw;
}
h3{
color: white;
font-size: 40px;
border-bottom: 2px solid white;
margin: 0 52vw 0 10vw;
}
.bottom-search{
padding: 5vh 5vw;
display: flex;
flex-direction: column;
width: 30vw;
margin: 0;
}
.title-search{
color: white;
margin: 0;
font-size: 3vw;
}
.desc-search{
color: white;
padding: 3vh 0;
font-size: 1vw;
max-width: 25vw;
margin: 0;
}
.center-bottom{
display: flex;
flex-direction: column;
align-items: center;
/* padding-bottom: 50vh; */
}
/* .middle{
display: flex;
flex-direction: column;
height: 600px;
justify-content: center;
margin-bottom: 100vh;
} */
.icon-white{
display: flex;
justify-content: center;
margin: 0;
align-items: center;
flex-direction: column;
}
.app{
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.app-pic{
display: flex;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Spotify Clone</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<header>
<img
class="logo-spotify"
src="images/spotify-logo.png"
alt="logo-spotify"
/>
<nav>
Premium
Discover
Help
Download
</nav>
</header>
<div class="start">
<h1 class="start-texts-Music">Music for everyone.</h1>
<p class="start-texts-Para">
Spotify is now free on mobile, tablet and computer.
</p>
<p class="start-texts-Para">
Listen to the right music, wherever you are.
</p>
</div>
<h2>What’s on Spotify?</h2>
<div class="ads">
<div class="ads-block">
<img src="images/music-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Millions of Songs</p>
<p class="ads-desc">There are millions of songs on Spotify</p>
</div>
<div class="ads-block">
<img
src="images/high-quality-icon.png"
alt=""
height="auto"
width="150px"
/>
<p class="ads-text">HD Music</p>
<p class="ads-desc">Listen to music as if you were listening live</p>
</div>
<div class="ads-block">
<img src="images/devices-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Stream Everywhere</p>
<p class="ads-desc">
Stream music on your smartphone, tablet or computer
</p>
</div>
</div>
<div class="bottom">
<h3>It’s as yeezy as Kanye West.</h3>
<div class="bottom-search">
<div class="bottom-search">
<div class="title-search">search</div>
<p class="desc-search">
Know what you want to listen to? <br />
Just search and hit play.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Browse</div>
<p class="desc-search">
Check out the latest charts, <br />
brand new releases and great <br />
playlists for right now.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Discover</div>
<p class="desc-search">
Enjoy new music every Monday <br />
with your own personal playlist. <br />
Or sit back and enjoy Radio.
</p>
</div>
</div>
<div class="center-bottom">
<div class="middle">
<img
class="icon-white"
src="images/spotify-icon-white.png"
alt=""
height="auto"
width="100px"
/>
</div>
</div>
<div class="app">
<img
class="app-pic"
src="images/spotify-app.jpg"
alt=""
width="auto"
height="700px"
/>
</div>
</div>
<!-- <p>
Discover Help Download Music for everyone. Spotify is now free on mobile,
tablet and computer. Listen to the right music, wherever you are. What’s
on Spotify? Millions of Songs There are millions of songs on Spotify HD
Music Listen to music as if you were listening live Stream Everywhere
Stream music on your smartphone, tablet or computer It’s as yeezy as Kanye
West. Search Know what you want to listen to? Just search and hit play.
Browse Check out the latest charts, brand new releases and great playlists
for right now. Discover Enjoy new music every Monday with your own
personal playlist. Or sit back and enjoy Radio.
</p> -->
</body>
</html>
So far this is what mine looks like and last but not least i cant get this stupid "yeezy" title to look like the one in the photo i put. Mine has no spacing from the green part and when i try the margin or padding goes outside the green area.
You can have it, hope it helps
/*
Colors:
Text: 1A1A1A
Green: #00B172
White: #FFF
*/
body {
margin: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
height: 10vh;
width: 100vw;
}
nav {
display: flex;
justify-content: space-around;
width: 35vw;
}
nav>a {
text-decoration: none;
color: #070707;
}
.logo-spotify {
height: auto;
width: 5vw;
margin-left: 2vw;
}
.start {
background-image: url(../images/landing.jpg);
display: flex;
justify-content: center;
background-size: cover;
height: 850px;
align-items: center;
flex-direction: column;
}
.start-texts-Music {
color: white;
margin: 5vh 0;
font-size: 5vw;
}
.start-texts-Para {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
font-size: 1.5vw;
}
h2 {
/* text-decoration: underline; */
display: flex;
justify-content: center;
align-content: center;
font-size: 3vw;
border-bottom: 2px solid #06bc7d;
margin: 4vh 37vw;
}
.ads {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
margin: 10vh 5.5vw;
}
.ads-block {
text-align: center;
}
.ads-text {
display: flex;
justify-content: center;
font-size: 25px;
color: #06bc7d;
align-items: center;
margin: 0;
}
.ads-desc {
margin: 3vh 0 3vh 0;
font-size: 20px;
width: 13vw;
color: #8a8a8a;
}
.bottom {
width: auto;
/* height: 100vh; */
background-color: #06bc7d;
margin: 0 2vw;
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
h3 {
color: white;
font-size: 40px;
border-bottom: 2px solid white;
}
.bottom-search {
padding: 5vh 5vw;
display: flex;
flex-direction: column;
width: 30vw;
margin: 0;
grid-column: span 5 / span 5;
}
.title-search {
color: white;
margin: 0;
font-size: 3vw;
}
.desc-search {
color: white;
padding: 3vh 0;
font-size: 1vw;
max-width: 25vw;
margin: 0;
}
.center-bottom {
display: flex;
align-items: center;
/* padding-bottom: 50vh; */
grid-column: span 2 / span 2;
grid-column-start: 6;
}
/* .middle{
display: flex;
flex-direction: column;
height: 600px;
justify-content: center;
margin-bottom: 100vh;
} */
.icon-white {
display: flex;
justify-content: center;
margin: 0;
align-items: center;
flex-direction: column;
}
.app {
display: flex;
align-items: center;
grid-column-start: 8;
margin-left: 3rem;
grid-column: span 5 / span 5;
}
.app-pic {
display: flex;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Spotify Clone</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<header>
<img class="logo-spotify" src="https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-icon-marilyn-scott-0.png" alt="logo-spotify" />
<nav>
Premium
Discover
Help
Download
</nav>
</header>
<div class="start">
<h1 class="start-texts-Music">Music for everyone.</h1>
<p class="start-texts-Para">
Spotify is now free on mobile, tablet and computer.
</p>
<p class="start-texts-Para">
Listen to the right music, wherever you are.
</p>
</div>
<h2>What’s on Spotify?</h2>
<div class="ads">
<div class="ads-block">
<img src="images/music-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Millions of Songs</p>
<p class="ads-desc">There are millions of songs on Spotify</p>
</div>
<div class="ads-block">
<img src="images/high-quality-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">HD Music</p>
<p class="ads-desc">Listen to music as if you were listening live</p>
</div>
<div class="ads-block">
<img src="images/devices-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Stream Everywhere</p>
<p class="ads-desc">
Stream music on your smartphone, tablet or computer
</p>
</div>
</div>
<div class="bottom">
<div class="bottom-search">
<h3>It’s as yeezy as Kanye West.</h3>
<div class="bottom-search">
<div class="title-search">search</div>
<p class="desc-search">
Know what you want to listen to? <br />
Just search and hit play.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Browse</div>
<p class="desc-search">
Check out the latest charts, <br />
brand new releases and great <br />
playlists for right now.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Discover</div>
<p class="desc-search">
Enjoy new music every Monday <br />
with your own personal playlist. <br />
Or sit back and enjoy Radio.
</p>
</div>
</div>
<div class="center-bottom">
<div class="middle">
<img class="icon-white" src="https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-icon-marilyn-scott-0.png" alt="" height="auto" width="100px" />
</div>
</div>
<div class="app">
<img class="app-pic" src="https://imag.malavida.com/mvimgbig/download-fs/spotify-10520-1.jpg" alt="" width="auto" height="700px" />
</div>
</div>
<!-- <p>
Discover Help Download Music for everyone. Spotify is now free on mobile,
tablet and computer. Listen to the right music, wherever you are. What’s
on Spotify? Millions of Songs There are millions of songs on Spotify HD
Music Listen to music as if you were listening live Stream Everywhere
Stream music on your smartphone, tablet or computer It’s as yeezy as Kanye
West. Search Know what you want to listen to? Just search and hit play.
Browse Check out the latest charts, brand new releases and great playlists
for right now. Discover Enjoy new music every Monday with your own
personal playlist. Or sit back and enjoy Radio.
</p> -->
</body>
</html>
You can use this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Spotify Clone</title>
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<header>
<img
class="logo-spotify"
src="images/spotify-logo.png"
alt="logo-spotify"
/>
<nav>
Premium
Discover
Help
Download
</nav>
</header>
<div class="start">
<h1 class="start-texts-Music">Music for everyone.</h1>
<p class="start-texts-Para">
Spotify is now free on mobile, tablet and computer.
</p>
<p class="start-texts-Para">
Listen to the right music, wherever you are.
</p>
</div>
<h2>What’s on Spotify?</h2>
<div class="ads">
<div class="ads-block">
<img src="images/music-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Millions of Songs</p>
<p class="ads-desc">There are millions of songs on Spotify</p>
</div>
<div class="ads-block">
<img
src="images/high-quality-icon.png"
alt=""
height="auto"
width="150px"
/>
<p class="ads-text">HD Music</p>
<p class="ads-desc">Listen to music as if you were listening live</p>
</div>
<div class="ads-block">
<img src="images/devices-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Stream Everywhere</p>
<p class="ads-desc">
Stream music on your smartphone, tablet or computer
</p>
</div>
</div>
<div class="bottom">
<div class="bottom-search-wrap">
<h3>It’s as yeezy as Kanye West.</h3>
<div class="bottom-search">
<div class="title-search">search</div>
<p class="desc-search">
Know what you want to listen to? <br />
Just search and hit play.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Browse</div>
<p class="desc-search">
Check out the latest charts, <br />
brand new releases and great <br />
playlists for right now.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Discover</div>
<p class="desc-search">
Enjoy new music every Monday <br />
with your own personal playlist. <br />
Or sit back and enjoy Radio.
</p>
</div>
</div>
<div class="center-bottom">
<div class="middle">
<img
class="icon-white"
src="images/spotify-icon-white.png"
alt=""
height="auto"
width="100px"
/>
</div>
</div>
<div class="app">
<img
class="app-pic"
src="images/spotify-app.png"
alt=""
width="auto"
height="700px"
/>
</div>
</div>
</body>
</html>
body{
margin: 0;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
height: 10vh;
width: 100vw;
}
nav{
display: flex;
justify-content: space-around;
width: 35vw;
}
nav > a{
text-decoration: none;
color: #070707;
}
.logo-spotify{
height: auto;
width: 10vw;
margin-left: 2vw;
}
.start{
background-image: url(../images/landing.jpg);
display: flex;
justify-content: center;
background-size: cover;
height: 850px;
align-items: center;
flex-direction: column;
}
.start-texts-Music{
color: white;
margin: 5vh 0;
font-size: 5vw;
}
.start-texts-Para{
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
font-size: 1.5vw;
}
h2{
/* text-decoration: underline; */
display: flex;
justify-content: center;
align-content: center;
font-size: 3vw;
border-bottom: 2px solid #06bc7d;
margin: 4vh 37vw;
}
.ads{
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
margin: 10vh 5.5vw;
}
.ads-block{
text-align: center;
}
.ads-text{
display: flex;
justify-content: center;
font-size: 25px;
color: #06bc7d;
align-items: center;
margin: 0;
}
.ads-desc{
margin: 3vh 0 3vh 0;
font-size: 20px;
width: 13vw;
color: #8a8a8a;
}
/* New Style Start============ */
.bottom{ background-color: #06bc7d; margin: 0 50px; padding: 40px; display: flex; justify-content: space-between; align-items: stretch; }
.bottom h3{color: white;font-size: 40px;border-bottom: 2px solid white;margin: 0 0 20px 0;}
.bottom .bottom-search{padding: 0 0 20px 0;margin: 0;}
.bottom .title-search{color: white;margin: 0;font-size: 3vw;}
.bottom .desc-search{color: white;padding: 0 0;font-size: 1vw;margin: 0;}
.bottom .center-bottom{ display: flex; align-items: center; justify-content: center; }
https://capr1sun.github.io/popsociology/
The main page of my website has an extra space on the right side which shows when I simulate smaller devices (iPhones). And on my desktop, there's a horizontal scroll bar at the bottom. How do I get rid of the extra space so the content fits exactly on the screen?
#import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
#keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
#media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div class="icon">
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div class="icon">
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div class="icon">
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div class="icon">
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div class="icon">
<img src="socialization2.png" alt="Socialization" id="socialization">
</div>
<div class="icon">
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div class="icon">
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div class="icon">
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div class="icon">
<img src="labeling2.png" alt="Labeling Theory" id="labelingIcon">
</div>
<div class="icon">
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div class="icon">
<img src="critical2.png" alt="Critical Theory" id="criticalIcon">
</div>
<div class="icon">
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div class="icon">
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div class="icon">
<img src="game2.png" alt="Game Theory" id="gameIcon">
</div>
<div class="icon">
<img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div class="icon">
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div class="icon">
<img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div class="icon">
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div class="icon">
<img src="macro2.png" alt="Macro Theory" id="macroIcon">
</div>
<div class="icon">
<img src="comte2.png" alt="August Comte" id="comteIcon">
</div>
<div class="icon">
<img src="marx2.png" alt="Karl Marx" id="marxIcon">
</div>
<div class="icon">
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div class="icon">
<img src="weber2.png" alt="Max Weber" id="weberIcon">
</div>
<div class="icon">
<img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>
The problem is in
footer {
width: 100vw;
}
You can just remove it or use 100% rather than 100vw, and add width: 100% to body tag.
There is a scroll due to the size of the anchors text. So you can set a relative size to them. For example font-size: 2.2vw for .icon-container:
#import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
font-size: 2.2vw; /* here */
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
#keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
#media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div class="icon">
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div class="icon">
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div class="icon">
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div class="icon">
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div class="icon">
<img src="socialization2.png" alt="Socialization" id="socialization">
</div>
<div class="icon">
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div class="icon">
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div class="icon">
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div class="icon">
<img src="labeling2.png" alt="Labeling Theory" id="labelingIcon">
</div>
<div class="icon">
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div class="icon">
<img src="critical2.png" alt="Critical Theory" id="criticalIcon">
</div>
<div class="icon">
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div class="icon">
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div class="icon">
<img src="game2.png" alt="Game Theory" id="gameIcon">
</div>
<div class="icon">
<img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div class="icon">
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div class="icon">
<img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div class="icon">
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div class="icon">
<img src="macro2.png" alt="Macro Theory" id="macroIcon">
</div>
<div class="icon">
<img src="comte2.png" alt="August Comte" id="comteIcon">
</div>
<div class="icon">
<img src="marx2.png" alt="Karl Marx" id="marxIcon">
</div>
<div class="icon">
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div class="icon">
<img src="weber2.png" alt="Max Weber" id="weberIcon">
</div>
<div class="icon">
<img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>
your width property in footer element cause overflow-x this snippet may help:
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
footer {
width: 100%;
}
HTMl STARTS HERE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght#400;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<link rel="stylesheet" href="./css/main.css" />
<title>Fylo | light theme page</title>
</head>
<body>
<header id="header-home">
<div class="container">
<nav class="nav-bar">
<img src="./images/logo.svg" alt="" />
<div class="nav-list">
<ul>
<li>Features</li>
<li>Sing In</li>
<li>Team</li>
</ul>
</div>
</nav>
</div>
</header>
<section id="header-content">
<div class="container">
<div class="main">
<div class="header-content-1">
<h1 class="header-title">
All your files in one secure location accessible anywhere
</h1>
<p class="header-text">
Fylo stores your most important files in one secure location.
Access them wherever you need, share and collaborate with friends,
family, and co-workers.
</p>
<form action="" class="form">
<input
type="email"
name=""
id=""
placeholder="Enter your email"
class="input"
/>
<button class="btn-main">Get Started</button>
</form>
</div>
<div class="header-content-2">
<img src="./images/illustration-1.svg" alt="" />
</div>
</div>
</div>
</section>
<section id="productive">
<div class="container">
<div class="main-2">
<div class="main-context">
<h2 class="header">Stay Productive wherever you are</h2>
<p class="text-1">
Never let location be an issue whn accessing your files. Fylo has
you covered for all your file storage needs
</p>
<p class="text-2">
Securely share your files and folders with friends, family and
colleaues for live collaboration. No email attachment required
</p>
<a href="#" class="link"
>See how fylo works <img src="./images/icon-arrow.svg" alt=""
/></a>
<div class="card">
<img src="./images/icon-quotes.svg" alt="" />
<p class="card-text">
Fylo has improved our team productivity by an rder of magnitude.
Since making the switch our team has become a well-oiled
collaboration machine
</p>
<div class="avatar-info">
<img src="./images/avatar-testimonial.jpg" alt="" />
<div class="avatar-name">
<h4>Kyle Burton</h4>
<p>Founder& & CEO, Huddle</p>
</div>
</div>
</div>
</div>
<div class="image-container">
<img src="./images/illustration-2.svg" alt="" class="image-two" />
</div>
</div>
</div>`
</section>
</body>
</html>
CSS STARTS HERE
#import "variables";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
// color: #fff;
font-family: "Open sans", sans-serif;
line-height: 1.6;
}
a {
color: $links;
text-decoration: none;
}
// img {
// max-width: %;
// }
ul {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.6;
font-family: "Raleway", sans-serif;
color: $footer;
// text-align: center;
// margin: 10px 0;
}
p {
line-height: 1.6;
font-family: "Raleway", sans-serif;
font-size: 0.95rem;
// text-align: center;
// margin: 10px 0;
// color: ;
}
#import "utilities";
#header-home {
grid-area: header;
// display: grid;
.nav-bar {
display: grid;
grid-template-columns: 1fr 2fr;
// margin-top: 50px;
padding: 2rem 1.5rem;
position: sticky;
// justify-content: space-between;
ul {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: end;
align-items: center;
height: 100%;
margin: 0;
li {
padding: 0 10px;
a {
font-size: 0.9rem;
text-transform: uppercase;
margin-right: 0.75rem;
border-bottom: 2px transparent solid;
padding: 2px 0;
transition: border-color 0.2s;
color: black;
&:hover {
border-color: $footer;
}
&.current {
border-color: $footer;
}
&:last-of-type {
margin-right: 0;
}
}
}
}
img {
max-width: 60%;
}
}
}
#header-content {
margin-top: 90px;
grid-area: section;
// height: 100vh;
.main {
display: grid;
grid-template-columns: 1fr 1fr;
.header-content-1 {
// justify-content: center;
// width: 200px;
grid-column: 1/2;
grid-row: 1/4;
.header-title {
align-self: flex-end;
font-size: 3rem;
// grid-column: 1/2;
}
.header-text {
grid-column: 1/2;
grid-row: 2/3;
// width: 80%;
margin-top: 20px;
// padding: 0 40px;
}
.form {
margin-top: 20px;
grid-column: 1/2;
grid-row: 2/3;
.input {
width: 300px;
padding: 15px;
border-radius: 4px;
border: 1px solid $bg-2;
&:focus {
outline: none;
}
}
}
}
.header-content-2 {
img {
grid-column: 2/3;
grid-row: 1/3;
max-width: 80%;
justify-self: center;
// margin-top: -10%;
align-self: center;
}
}
}
}
#productive {
// margin-top: 200px;
// // background-color: $bg-2;
// position: relative;
background-image: url(../dist/images/logo.svg);
background-color: hsl(240, 75%, 98%);
margin-top: 100px;
// position: relative;
padding: 50px 0;
// grid-area: section;
}
Image background on the #productive section. i have tried a number of things and it is not responding.
You will probably need to specify the background width and position. Here is an example:
div {
width: 100px;
height: 100px;
background-image: url(https://images7.memedroid.com/images/UPLOADED891/5c39cdc9b5921.jpeg);
background-size: 100px;
background-position: center;
}
<div>
</div>
I am using media queries and breakpoints to make my webpage responsive. I have 3 images with figcaptions. Everything is fine when the three images are in separate columns. However, for the mobile layout, everything is in the same column. In safari, the mobile layout experiences the following problem: the image overlaps the figcaption. This issue does not occur in firefox or chrome. Unfortunately, since I have no idea what is causing this issue, I don't know how to condense the code and still reproduce the bug. I am using css grid to layout my page (some elements are themselves grids as well). Thank you so much.
Screenshots of Part of Page:
Chrome: (working)
Screenshot
Safari (not working)
Screenshot
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Name</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="header">
<h1 class="header-logo">D</h1>
<div class="header-text">
<h1 class="header-name">Name</h1>
<h2 class="header-title">Title</h2>
</div>
</header>
<img class="large-image" src="images/code.jpg">
<main class="main">
<h2 class="featured-work">Featured Work</h2>
<figure class="project-1">
<img src="images/project-1.jpg">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 1</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
<figure class="project-2">
<img src="images/project-2.jpg">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 2</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
<figure class="project-3">
<img src="images/project-3.png">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 3</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
</main>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
color: #7d97ad;
font-style: normal;
overflow-x: hidden;
}
img, embed, object, video {
max-width: 100%;
}
.caption-header {
margin: 0;
color: #2d3c49;
font-size: 35px;
font-weight: 600;
}
a {
color:#337ab7;
text-decoration:none;
}
a:hover, a:focus {
color:#23527c;
text-decoration:underline;
}
a:focus {
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px;
}
.caption {
text-align: center;
}
.header-logo {
margin: 0;
color: #42c5f4;
font-size: 60px;
font-weight: bold;
text-align: center;
grid-area: hdlg;
}
.header-text {
text-align: center;
grid-area: hdtxt;
}
.header-name {
margin: 0;
font-size: 40px;
font-weight: 100;}
.header-title {
margin: 0;
font-weight: normal;
}
.featured-work {
font-weight: normal;
margin: 0;
grid-area: ftwk;
}
.project-1 {
margin: 0;
grid-area: prjone;
}
.project-1 img {
width: 100%;
}
.project-2 {
margin: 0;
grid-area: prjtwo;
}
.project-2 img {
width: 100%;
}
.project-3 {
margin: 0;
grid-area: prjthree;
}
.project-3 img {
width: 100%;
}
.header {
grid-area: header;
display: grid;
border-bottom: 3px solid #7d97ad;
grid-template-areas:
"hdlg"
"hdtxt";
}
.large-image {
width: 100%;
margin: 0;
padding: 0;
grid-area: limg;
}
.main {
grid-gap: 20px;
grid-area: main;
display: grid;
grid-template-areas:
"ftwk"
"prjone"
"prjtwo"
"prjthree";
}
.container {
display: grid;
grid-gap: 20px;
grid-template-areas:
"header"
"limg"
"main";
}
#media screen and (min-width: 600px) {
.header {
grid-template-columns: 90px 1fr;
grid-template-areas:
"hdlg hdtxt";
}
.header-logo {
text-align: left;
}
.header-text {
text-align: right;
}
.main {
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"ftwk ftwk ftwk"
"prjone prjtwo prjthree";
}
}
#media screen and (min-width: 800px) {
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}