I am working on a side project of mine where I have an HTML and CSS file. I started working on it from a mobile-first approach and things were looking good. But then I needed to make it a responsive design and added the following tag the CSS broke and did not work properly.
<meta name="viewport" content="width=device-width, initial-scale=1">
:root {
--black: #191414;
--green: #1DB954;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap') * {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background-color: #181818;
}
.container {
display: grid;
grid-template-rows: min-content 8fr 1fr;
background-color: #181818;
width: 100vw;
height: 100vh;
}
.main {
display: grid;
grid-template-columns: min-content 1fr;
}
.music-img {
width: 300px;
height: 300px;
object-fit: cover;
margin: 50px 50px;
}
.music-details {
display: flex;
flex-direction: column;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 35px;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 32px;
height: 32px;
margin: 20px 15px;
}
.list {
overflow: auto;
display: flex;
flex-direction: column;
-ms-overflow-style: none;
scrollbar-width: none;
/* Firefox */
}
.list::-webkit-scrollbar {
display: none;
}
.footer {
background-color: var(--black);
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
}
.song-name {
font-family: 'Roboto', sans-serif;
font-size: 10px;
color: #ffffff;
}
.song-band {
font-family: 'Roboto', sans-serif;
font-size: 8px;
color: #8e8e8e;
}
.song-detail {
margin: 10px 50px;
}
#test {
color: #ffffff;
width: 100px;
height: 100px;
}
#home,
#search,
#library {
width: auto;
height: calc(100vh*0.05);
margin: 30px auto;
}
.song-detail:last-child {
margin-bottom: 25px;
}
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Spotify</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="main">
<div class="img">
<img src="assets/album.jpg" class="music-img"></img>
</div>
<div class=music-details>
<div class="music-name">
Justice Beaver
</div>
<div class="album-name">
The Office
</div>
<div class="play-items">
<span><img src="assets/backward.png" id="backward"></img></span>
<span><img src="assets/play.png" id="play"></img></span>
<span><img src="assets/forward.png" id="forward"></img></span>
<br>
<span><img src="assets/heart.png" id="heart"></img></span>
<span><img src="assets/share.png" id="share"></img></span>
</div>
</div>
</div>
<div class="list">
<div class="song-detail">
<div class="song-name">Celebration</div>
<div class="song-band">KOOL & THE GANG</div>
</div>
</div>
<div class="footer">
<span><img src="assets/home.png" id="home"></img></span>
<span><img src="assets/search.png" id="search"></img></span>
<span><img src="assets/library.png" id="library"></img></span>
</div>
</div>
</body>
</html>
Here is the image before adding the above tag
And here is the image after I added the above tag
I and not sue what is wrong here. Any help would be appreciable.
Thanks
You have some issues in that code. First, you didn´t made the cassette img responsive, because you gave him a px size, then the img can´t resize, it´s static. If you want to make an img responsive, you have to use relative sizes, like "%" or "vw". Then you have to do the same with the icons, or at least add a media query for smaller devices and give them smaller sizes in px.
Same thing applies to the font size, it´s better to work with "em" or "rem", because they are relative sizes.
Then, i don´t know why you added this code
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
Because of the media query, this code only adds red color on devices that are bigger than 768, so tablets and cellphones won't apply
You should use it the simple way
.footer {
background-color: red;
}
I think that´s a good start point to start making it responsive.
You can start by trying to make these changes.
.music-img {
width: 15vw;
height: 15vh;
object-fit: cover;
margin: 50px 50px;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 25px;
height: 25px;
margin: 20px 15px;
}
.footer {
background-color: red;
}
Then I think you would figure it out the rest.
Related
I want to achieve this desktop design.
The mobile design has been completed but when I try changing the mobile design to desktop design, I am using a specific flex property row-reverse. When I use the row-reverse property the result looks like this
I am unable to figure out how to fix the position to achieve the desktop design and have been stuck on this problem for the past few days.
Could someone please tell me what am i doing wrong and how do i fix this issue.
#import url('css-reset.css');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap');
:root {
--color-main-background: hsl(233, 47%, 7%);
--color-card-background: hsl(244, 38%, 16%);
--color-soft-voilet: hsl(277, 64%, 61%);
--color-white-main: hsl(0, 0%, 100%);
--color-white-paragraph: hsla(0, 0%, 100%, 0.75);
--color-white-stats: hsla(0, 0%, 100%, 0.6);
--font-weight-four: 400;
--font-weight-seven: 700;
}
body {
background-color: var(--color-main-background);
font-weight: var(--font-weight-four);
color: var(--color-white-main);
margin: 0;
}
.container {
display: grid;
grid-auto-flow: row;
border-radius: 10px;
justify-content: center;
text-align: center;
align-self: center;
max-width: 350px;
min-height: 750px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
/* padding: 0 2rem; */
background-color: var(--color-card-background);
overflow: hidden;
}
/* .main-img {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
} */
picture>* {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.main-header {
font-family: 'Lexend Deca',
sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.5rem;
color: var(--color-white-main);
margin-top: 20px;
}
.insight {
color: var(--color-soft-voilet)
}
.h1-first,
.h1-second {
display: block;
}
.stats,
.heading {
display: block;
}
.paragraph {
margin-top: 5px;
margin-bottom: 30px;
}
.para-1,
.para-2,
.para-3,
.para-4 {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.875rem;
color: var(--color-white-paragraph);
display: block;
line-height: 1.75;
}
.stats {
color: var(--color-white-main);
font-family: 'Inter', sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.25rem;
margin-top: 10px;
}
.heading {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.7rem;
color: var(--color-white-stats);
margin-bottom: 20px;
}
#media (min-width:768px) {
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
flex-direction: row-reverse;
min-height: 400px;
max-width: 50rem;
overflow: hidden;
}
picutre {
max-width: 100%;
max-height: 100%;
}
picture>* {
width: 100%;
height: 400px;
border-top-left-radius: 0px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 0px;
border-top-right-radius: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles/style.css">
<title>Frontend Mentor | Stats preview card component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
</style>
</head>
<body>
<div class="container">
<div class="img-component">
<picture>
<source media="(min-width: 768px)" srcset="/images/image-header-desktop.jpg">
<source media="(min-width: 100px)" srcset="/images/image-header-mobile.jpg">
<img class="main-img" src="/images/image-header-mobile.jpg" alt="main image">
</picture>
</div>
<div class="main-header">
<h1><span class="h1-main"> Get <span class="insight">insights</span> that</span>
<span class="h1-first">help your business</span>
<span class="h1-second"> grow.</span></h1>
</div>
<div class="paragraph">
<p>
<span class="para-1"> Discover the benefits of data</span>
<span class="para-2">analytics and make better decisions</span>
<span class="para-3">regarding revenue, customer</span>
<span class="para-4">experience, and overall efficiency.</span>
</p>
</div>
<div class="stat-heading">
<span class="stats">10k+</span>
<span class="heading">COMPANIES</span>
<span class="stats">314</span>
<span class="heading">TEMPLATES</span>
<span class="stats">12M+</span>
<span class="heading">QUERIES</span>
</div>
</div>
</body>
</html>
Hope this will help to restructure your section.
I basically tried to roughly replicate your design using a slightly different approach:
So given the main div (container), let's split it in half creating 2 child div into it, aligning them with d-flex applied to the container.
Into the left one, let's create 2 other divs: one which will contain the header and paragraph and the other which will contain the 3 stats and heading. I will then suggest to wrap each stats and heading into they own div, this will help you to correctly align them on desktop and mobile using d-flex, and related flex-directions.
html,
body {
height: 100%;
}
div {
border: 2px solid red
}
.container {
display: flex;
align-items: center;
}
.box-left {
width: 50%;
background-color: blueviolet;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-right {
width: 50%;
background-color: brown;
height: 500px;
width: 50%;
background-image: url(https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
}
.box-bottom {
display: flex;
justify-content: space-between;
}
.text-wrapper {
padding: 50px;
}
#media (max-width:768px) {
.container {
flex-direction: column-reverse;
}
.box-left,
.box-right {
width: 100%;
}
.box-left {
text-align: center;
}
.box-bottom {
display: flex;
flex-direction: column;
justify-content: center;
}
}
<body>
<div class="container">
<div class="box-left">
<div class="text-wrapper">
<div>
<h1>Your title here</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English.</p>
</div>
<div class="box-bottom">
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
</div>
</div>
</div>
<div class="box-right">
</div>
</div>
</body>
I've literally tried everything at this point, but something in my code is making my website act funny. I've set it up to accept a picture with a very tall resolution to fill the center column of my CSS grid with the other two acting as margins. When I do this with my current code, the picture overflows the grid and when I scroll the margins just stop half way down the page. The container grows to size with the height of the photo but my margins don't.
Here's a picture of my website scrolled down half way, the cream colored part is the container and the black part is where the margins stop.
Picture of website:
Thanks for any advice if someone has some!
body {
margin: 0;
width: 100vw;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
}
.content {
width: 70vw;
height: 100vh;
background-color: #252525;
}
.margin {
width: 15vw;
height: 100vh;
background-color: #000000;
}
table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
tr {
vertical-align: top;
}
p {
color: #45d163;
font-size: 2.5vh;
}
.fixed {
position: fixed;
}
.grid-container {
display: grid;
grid-template-columns: 15% 70% 15%;
background-color: #fceee3;
width: 100vw;
height: 100vh;
min-width: 0;
min-height: 100vh;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
min-height: 100vh;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
color: blue;
font-size: 30vh;
text-align: left;
min-height: 100vh;
margin-top: 0%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- partial:index.partial.html -->
<head>
<meta charset="UTF-8">
<title>Keyboard Mechanic</title>
<link rel="stylesheet" href="style.css"> </link>
<style>
.header {
overflow: hidden;
background-color: #171615;
padding: 1% 1%;
width: 100%;
position: fixed;
}
.header a {
float: left;
color: #f1f1f1;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
width: 8vw;
margin-right: 10px;
}
.header a.active {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a.logo {
all: unset;
}
.login {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header-right {
float: right;
}
#media screen and (max-width: 100%) {
.header a {
float: none;
display: block;
text-align: left;
}
}
</style>
<style>
.wrapper {
display: grid;
grid-template-columns: auto fit-content(70%) auto;
background-color: #fceee3;
width: 100vw;
height: 100%;
overflow: scroll;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
height: auto;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
height: auto;
margin-top: 0%;
}
</style>
</head>
<body>
<div class="header">
<img src="images/cornerlogo.png" height="50px">
<div class="header-right">
<a class="active" href="newLook.html">Home</a>
<a class="active" href="games.html">Games</a>
<a class="active" href="webprojects.html">Web Projects</a>
<a class="login" href="login.html">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<div class="grid-item"></div>
<div class="grid-center">
<img src="images/homepageFour.png" width="100%"> </img>
</div>
<div class="grid-item"></div>
</div>
</body>
</html>
<!-- partial -->
The second selector is valid because the specificity value of the selector named ".header a" is lower than the specificity value of the selector named ".header a.active".
If you want to almost maximize the specificity value, you have to: use !important.
.header a {
width: max-content !important;
}
I have been trying all day to get my website to be responsive. Here is the link to it.
https://mywebsite.techgurll.repl.co
It does not look good on small screens. The image of myself I have on there keeps overflowing the container when the screens size gets smaller. Here is part of my CSS code
.img {
display: flex;
flex-direction: row;
height: 50vh;
margin-top: 20vh
}
If you would like to see the other code you can press inspect after you click my website link. I do not want to post it all here because it is a lot of code.
actually there were many problems in your css as well as in HTML so I wrote an improved version of your css and html and also made it responsive by using flexbox, media queries and units like vw and vh.
copy paste the following code.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Landing Page</title>
</head>
<body>
<div>
<ul>
<li><h3>megan's website</h3></li>
<li> About</li>
<li> Contact</li>
<li> Info</li>
</ul>
</div>
<div id="header">
<div class="header-content">
<h1>Hi Everyone!<br />My name is Megan. Nice to meet you!</h1>
<p>
<strong
>I am an aspiring Software Developer. I am also a student and I
study Computer Science.<br />
I will be graduating in December of 2022 with my Bachelor's
degree.<br />I hope this website impresses the right employer.<br />
I am creating this website in the hopes to be noticed and land my
dream job.<br />
I am very driven and motivated to learn.This is my passion.<br />
I do not want this job because of money.<br />
I want this job because I want to work in something I enjoy doing
everyday.<br />
That to me is happiness.<br />
I feel it is important to practice every day in order to be the best
you can be.</strong
>
</p>
<button class="button">Sign Up</button>
</div>
<div class="div-img">
<img src="x4yT5As.jpg" class="img" alt="Picture of Megan" />
</div>
</div>
<div id="title"><h2>Projects I have worked on</h2></div>
<hr />
<div class="second-container">
<div class="info">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png"
alt="Python Logo"
height="100"
/>
<div class="text">
Compounding Interest using Loops<br /><a
href="https://github.com/megankeyes/Compounding-Interest-with-Loops"
style="text-decoration: none"
>Python Project</a
>
</div>
</div>
<div class="info">
<img
src="https://www.simplilearn.com/ice9/webinar_thum_image/CPP_Tutorial.jpg"
alt="C++ Image"
height="100"
/>
<div class="text">
Shopping List Program<br /><a
href="https://github.com/megankeyes/Shopping-List"
style="text-decoration: none"
>C++ Project</a
>
</div>
</div>
<div class="info">
<img
src="https://miro.medium.com/max/840/1*RJMxLdTHqVBSijKmOO5MAg.jpeg"
alt="Python Image"
height="100"
/>
<div class="text">
BMI Calculator<br /><a
href="https://github.com/megankeyes/BMI-Calculator"
style="text-decoration: none"
>Python Project</a
>
</div>
</div>
<div class="info">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1200px-ISO_C%2B%2B_Logo.svg.png"
alt="C++ Logo"
height="100"
/>
<div class="text">
Dice Game<br /><a
href="https://github.com/megankeyes/Dice-Game"
style="text-decoration: none"
>C++ Project</a
>
</div>
</div>
</div>
<hr />
<div class="third-container">
<div class="quote">
<p>
<i>Your Future is Created by what you do Today<br />NOT Tomorrow</i>
</p>
<br />
<strong>-Robert Kyosaki</strong>
</div>
</div>
<div class="fourth-container">
<div class="box">
<div class="text-call">
<strong>Check out my GitHub for all of my projects!</strong>
<p></p>
<p>
Head on over to my GitHub by clicking that button right over there!
</p>
<button class="github-btn">
<a
class="call-to-action-button"
href="https://github.com/megankeyes"
>Megan's GitHub</a
>
</button>
</div>
</div>
</div>
<div class="footer">Copyright # The Odin Project 2021</div>
</body>
</html>
and style.css:
* {
margin: 0px;
box-sizing: border-box;
}
#header {
display: flex;
align-items: center;
justify-content: space-around;
background-color: darkslategray;
width: 100%;
max-width: 100vw;
}
.img {
width: 100%;
max-width: 280px;
height: auto;
border-radius: 50%;
}
.header-content {
color: white;
padding: 10px;
font-size: 1.5vw;
font-family: Arial, Helvetica, sans-serif;
}
p {
margin-top: 30px;
}
button {
background-color: rgb(107, 192, 226);
outline: none;
border-radius: 10px;
padding: 5px;
border: none;
cursor: pointer;
margin: 10px 0px;
width: 20vw;
}
button:hover {
background-color: cornsilk;
}
h3 {
color: white;
}
ul {
display: flex;
justify-content: flex-end;
list-style: none;
font-weight: bold;
background-color: darkslategray;
color: white;
}
ul li {
padding: 10px 12px;
}
li a {
color: white;
text-decoration: none;
}
a:hover {
color: rgb(107, 192, 226);
}
#title {
text-align: center;
margin: 10px;
}
.second-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
width: 100%;
max-width: 100vw;
height: 95vh;
}
.info {
text-align: center;
}
.third-container {
background-color: rgb(219, 219, 219);
width: 100%;
max-width: 100vw;
height: 70vh;
font-size: xx-large;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.fourth-container {
width: 100%;
max-width: 100vw;
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100%;
max-width: 70vw;
height: 100%;
max-height: 60vh;
background-color: #3882f6;
border-radius: 10px;
padding: 60px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.github-btn {
margin-top: 20px;
color: rgb(107, 192, 226);
}
.github-btn a {
text-decoration: none;
color: white;
}
.github-btn a:hover {
color: rgb(107, 192, 226);
}
.footer {
display: flex;
justify-content: center;
align-items: center;
background-color: darkslategray;
color: white;
height: 10vh;
}
#media only screen and (max-width: 950px) {
.img {
width: 100%;
max-width: 200px;
height: auto;
}
}
#media only screen and (max-width: 750px) {
.img {
width: 100%;
max-width: 170px;
height: auto;
padding-right: 10px;
}
.header-content {
font-size: 1.6vw;
}
}
#media only screen and (max-width: 600px) {
.img {
width: 100%;
max-width: 150px;
height: auto;
padding-right: 20px;
}
.header-content {
font-size: 1.8vw;
}
}
#media only screen and (max-width: 460px) {
.img {
width: 100%;
max-width: 200px;
height: auto;
padding-right: 20px;
}
.header-content {
font-size: 2.2vw;
}
}
#media only screen and (max-width: 400px) {
.img {
width: 100%;
max-width: 300px;
height: auto;
}
.header-content {
font-size: 2.5vw;
}
}
#media only screen and (max-width: 320px) {
.img {
width: 100%;
max-width: 100vw;
height: auto;
}
.header-content {
font-size: 3vw;
}
}
just read and try to understand what Improvements I made and also look how I made it resposive. I hope after reading this you'll get how to add responsiveness. and adjust it according to your taste like if you want to add more css like border etc..
enjoy :)
Technically your image is already responsive, because you are using vh units. However, vh stands for viewport height, which means that your image is responsive to how tall your viewport is.
If you want it to respond to width, you can use vw units. (Same concept as vh, just using width instead of height)
Another easy method for creating responsiveness is using CSS media queries.
#media (max-width: 600px){
body {
background-color: blue;
}
}
This will make the background color of the body change to blue when the viewport is 600px or less.
You can change any CSS properties inside of there (image size, etc...), but make sure that the media query comes after the normal css styling in your css file.
You can also look into CSS Grid Layout, but there is a bit more of a learning curve down that path.
Hopefully this helps to get you in the right direction.
Hey so I'm trying to have black borders in between each tab at the top of my page (shown below), however when I try to add border-left: ; it adds it to the text in the cell rather than the cell itself.
I have tried adding:
height: 100%;
width: 100%;
but this messes with the text inside as well.
This is where I would want the border to be:
and this is where I would want the text to be:
html,
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #70614b;
}
.banner {
display: grid;
z-index: 1;
position: fixed;
width: auto;
height: 90px;
background-color: #d7cdc7;
grid-template: 100% / 20% repeat(5, 1fr);
grid-gap: 2px;
justify-items: center;
align-items: center;
}
.logo img {
width: 100%;
height: auto;
}
.about {
grid-area: 1 / 2 / span 1 / span 1;
}
.tabs {
font-family: Roboto;
font-size: 40px;
font-weight: bold;
text-align: center;
border-left: 2px black solid;
}
<html>
<head>
<link href="./style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<div class="logo"><img src="./photos/aa logo.png" /></div>
<div class="about tabs">ABOUT</div>
</div>
</body>
</html>
Without modifying your stylesheet too much, I'd suggest giving your tabs selector the height of its parent and then aligning the text using flex. It should look like this:
.tabs {
font-family: Roboto;
font-size: 40px;
font-weight: bold;
text-align: center;
border-left: 2px black solid;
height: 100%;
display: flex;
align-items: center;
}
Hope it helps!
I'm trying to create a rock, paper, scissors game and I'm having trouble getting the items to stack. I have three images on one row and I would like to display the fourth image below them (this image would be the resulting image displaying either rock, paper or scissors).
I tried using flex-wrap, changing width's, etc and after an hour of searching, I figured I'll just ask you guys who will probably solve it in a minute lol Here is my code and thanks in advance for the help :D
#import url("https://fonts.googleapis.com/css?family=Germania+One");
$primary-color: #000000;
$serif: "Germania One",
cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
img {
height: 12rem;
padding: 20px;
&:hover {
height: 13rem;
}
}
}
#rock,
#paper,
#scissor {
display: flex;
justify-content: center;
border-radius: 20px;
cursor: pointer;
}
#scissor {
margin-left: 30px;
padding-left: 10px;
color: green;
}
p {
font-size: 4rem;
width: 100%;
height: auto;
margin-top: 200px;
display: flex;
justify-content: center;
}
#rock_win,
#paper_win,
#scissor_win {
justify-content: center;
width: 50%;
height: auto;
flex-wrap: wrap;
border-radius: 20px;
cursor: pointer;
}
#scissor_win {
margin-left: 30px;
padding-left: 10px;
}
<h1>Rock, Paper, Scissor's</h1>
<h2>Choose your fate</h2>
<div class="container">
<div class='items'>
<div id='rock'><img src='https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_rock1600.png' /> </div>
<div id='paper'><img src="https://maxcdn.icons8.com/Share/icon/Hands//hand1600.png" /> </div>
<div id='scissor'><img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png" /> </div>
</div>
<div id='scissor_win'><img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png" /> </div>
</div>
<p></p>
The display: flex; setting needs to be applied to the container/parent element, not to the flex-items/children.
Since you have a structure of .container as a container for items and #scissor_win, and items again contains three items-to-be stacked, the CSS rules should (partly) look like this:
.container {
display: flex;
flex-direction: column;
}
.items {
display: flex;
flex-direction: column;
}
The single items don't need display: flex, unless you want to center their contents using flex.
Make sure you close your img's. They are missing the ending bracket.
The display: flex goes on the container, and the children all get a flex assigned to them (Flex Guide).
I added the SASS tag, since it seems you're using that
$primary-color: #000000;
$serif: "Germania One", cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
img {
height: 12rem;
padding: 20px;
&:hover {
height: 13rem;
}
}
}
.items {
display: flex;
}
#rock,
#paper,
#scissor {
flex: 1;
/* justify-content: center; */
border-radius: 20px;
cursor: pointer;
}
#scissor {
color: green;
}
p {
font-size: 4rem;
width: 100%;
height: auto;
margin-top: 200px;
display: flex;
justify-content: center;
}
#rock_win,
#paper_win,
#scissor_win {
margin: 0 auto;
clear: both;
width: 50%;
height: auto;
border-radius: 20px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Rock, Paper, Scissors</h1>
<h2>Choose your fate</h2>
<div class="container">
<div class='items'>
<div id='rock'>
<img src='https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_rock1600.png'>
</div>
<div id='paper'>
<img src="https://maxcdn.icons8.com/Share/icon/Hands//hand1600.png">
</div>
<div id='scissor'>
<img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png">
</div>
</div>
<div id='scissor_win'>
<img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png">
</div>
</div>
<p></p>
</body>
</html>
I'm having trouble posting my inline code here with SCSS, so here's a jsbin link in addition. jsbin
using #kauffee000 snippet, I reduced the amount of css required.
Hope it helps.
explanation:
the trick here is to make .container be a flex and have a flex-direction of column, while .items be flex with a flex-direction of row.
$primary-color: #000000;
$serif: "Germania One", cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
img {
height: 13rem;
}
}
.items {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
& div {
border-radius: 20px;
flex: 1;
&:hover {
img {
height: 5rem;
}
}
}
}