This is my code which works - used vehicle platform - HTML with flex, but isn't quite esthetically pleasing:
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.itemwrapper1 img {}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
width: 600px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
margin-left: -450px;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
margin-left: -200px;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Car , Van, Caravan Dealer | Quality Used Cars</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<header class="infog">
header
</header>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
black
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac1'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
rowtt
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column at1'>
<h3>2004 TOYOTA RAV4 2.0</h4>
black
</div>
<div class='column priceh'>
<h3>£6000</h4>
</div>
</div>
</div>
<footer class="infog">
footer
</footer>
</body>
</html>
The problem is that I'm trying to make it so that if the image is large it's still alongside the text, like this from my page:
The blue line below is actually a bit of the next image... I didn't screencap well.
I've not figured out how to with the CSS and max-width size to do this, resulting in:
The car description in the second flexbox (column and ncat classes) doesn't show up.
But it works fine with the smaller image; I'm trying to make it big enough for people to see.
This isn't the final version, as I'm adding Roboto font etc. in the CSS, but it's almost working.
I'd much appreciate any advice on how to ensure I can get this to work in flexbox.
Just update your CSS with the following code
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}
Related
I'm trying to create a scrolling element without a fixed height parent. I want #SECTION1 of my code to be scrollable to show the rest of the images. I can't seem to find a way to do this. I've attempted to set #SECTION1 to a fixed height but it forces my images to be squashed. Any help would be appreciated. Thank you.
Here is my code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
}
::-webkit-scrollbar {
width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
html,
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
/*----------SECTION 1----------*/
header {
height: 80px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
#header-wrapper {
display: flex;
width: 55%;
justify-content: space-between;
align-items: center;
}
#logo {
width: 70px;
}
nav a {
color: white;
padding: 20px;
font-family: 'Roboto';
font-size: 0.8em;
font-weight: bold;
}
#media only screen and (max-width: 750px) {
nav {
display: none;
}
}
#mobile-menu {
color: white;
font-size: 1.3em;
}
#media only screen and (min-width: 750px) {
#mobile-menu {
display: none;
}
}
#body-wrapper {
display: flex;
height: 100%;
}
aside {
width: 300px;
height: 889px;
background-color: #0c0c0c;
display: flex;
align-items: center;
padding-top: 50px;
flex-direction: column;
}
#aside-wrap {
width: 70%;
}
#user-info {
display: flex;
margin: 10px;
margin-left: 0;
margin-bottom: 50px;
justify-content: center;
align-items: center;
font-family: 'Roboto';
font-weight: 400;
}
#user {
font-size: 40px;
color: white;
margin-right: 20px;
}
aside h3 {
color: white;
font-size: 1.2em;
}
#hello {
color: white;
font-size: 20px;
}
#box-1 {
color: #808080;
margin-bottom: 60px;
}
#box-1 p {
margin: 20px;
margin-left: 0;
font-family: 'Roboto';
font-size: 0.9em;
}
#box-2 {
color: #808080;
}
#box-2 p {
margin: 20px;
margin-left: 0;
font-family: 'Roboto';
font-size: 0.9em;
}
#section1 {
background-color: #191919;
/*background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),
url("listen_background.jpg");*/
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
overflow: auto;
}
#section1-wrapper {
width: 80%;
display: flex;
font-family: 'Roboto';
padding-top: 50px;
padding-bottom: 50px;
align-items: center;
flex-direction: column;
}
#section1 h1 {
color: white;
font-size: 3em;
margin-bottom: 50px;
text-align: center;
}
.image-box {
max-width: 280px;
margin: 20px;
}
img {
max-width: 100%;
}
#image-row-1,
#image-row-2,
#image-row-3,
#image-row-4 {
width: 100%;
margin-bottom: 50px;
display: flex;
justify-content: space-between;
}
#media only screen and (max-width: 1080px) {
#image-row-1,
#image-row-2,
#image-row-3,
#image-row-4 {
flex-direction: column;
align-items: center;
}
}
/*----------------SECTION 2--------------*/
#pusher {
height: 889px;
width: 300px;
}
#player {
height: 80px;
width: 100%;
position: fixed;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
#media only screen and (max-width: 750px) {
#player {
height: auto;
}
}
#player-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
}
#media only screen and (max-width: 750px) {
#player-wrapper {
flex-direction: column;
}
}
.button-controls {
color: white;
margin: 20px;
}
#player-bar {
width: 100%;
height: 3px;
background-color: white;
}
#player-filler {
width: 50%;
height: 100%;
background-color: #2A4B5A;
}
#timeline {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
#media only screen and (max-width: 750px) {
#timeline {
width: 100%;
}
}
#timeline p {
color: white;
margin: 20px;
}
#share,
#phone {
color: white;
margin: 20px;
}
#media only screen and (max-width: 750px) {
#share,
#phone {
display: none;
}
}
<head>
<meta charset="utf-8">
<title>Flo Music</title>
<link rel="stylesheet" type="text/css" href="listen.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div id="test">
<div id="body-wrapper">
<aside>
<div id="aside-wrap">
<div id="user-info">
<i class="far fa-user-circle" id="user"></i>
<h3>Emmanuel</h3>
</div>
<div id="box-1">
<p>Your Library</p>
<p>Recently Played</p>
<p>Songs</p>
<p>Playlist</p>
</div>
<div id="box-2">
<p>Your Library</p>
<p>Recently Played</p>
<p>Songs</p>
<p>Playlist</p>
</div>
<p>HOME</p>
</div>
</aside>
<section id="section1">
<div id="section1-wrapper">
<h1>New Releases</h1>
<div id="image-row-1">
<div class="image-box"><img src="album1.jpg"></div>
<div class="image-box"><img src="album2.jpg"></div>
<div class="image-box"><img src="album3.jpg"></div>
<div class="image-box"><img src="album4.jpg"></div>
</div>
<div id="image-row-2">
<div class="image-box"><img src="album5.jpg"></div>
<div class="image-box"><img src="album6.jpg"></div>
<div class="image-box"><img src="album7.jpg"></div>
<div class="image-box"><img src="album8.png"></div>
</div>
<div id="image-row-3">
<div class="image-box"><img src="album9.jpg"></div>
<div class="image-box"><img src="album10.jpg"></div>
<div class="image-box"><img src="album11.jpg"></div>
<div class="image-box"><img src="album12.jpg"></div>
</div>
<div id="image-row-4">
<div class="image-box"><img src="album13.jpg"></div>
<div class="image-box"><img src="album14.jpg"></div>
<div class="image-box"><img src="album15.jpg"></div>
<div class="image-box"><img src="album16.jpg"></div>
</div>
</div>
</section>
</div>
<div id="player">
<div id="player-wrapper">
<div id="controls">
<i class="fas fa-backward button-controls"></i>
<i class="fas fa-play button-controls"></i>
<i class="fas fa-forward button-controls"></i>
</div>
<div id="timeline">
<p>0:00</p>
<div id="player-bar">
<div id="player-filler"></div>
</div>
<p>0:00</p>
</div>
<div id="icon-right">
<i class="fas fa-share-square" id="share"></i>
<i class="fas fa-mobile" id="phone"></i>
</div>
Flex items are set to flex-shrink: 1 by default. This means they can shrink to prevent an overflow of the container. In your case, you may need to disable this feature (flex-shrink: 0).
Also, consider using height: 100vh, instead of height: 100% on your flex container. Percentage heights are tricky and often require the parent to have a defined height.
See this post for details: Working with the CSS height property and percentage values
Lastly, remove justify-content: center from your flex container. It makes content inaccessible via scroll in some cases.
See this post for details: Can't scroll to top of flex item that is overflowing container
Make these adjustments to your code:
#body-wrapper {
display: flex;
/* height: 100%; */
height: calc(100vh - 80px); /* subtract footer height */
}
#section1 {
background-color: #191919;
display: flex;
align-items: center;
/* justify-content: center; */ /* remove to avoid scrolling problems */
flex-direction: column;
width: 100%;
overflow: auto;
}
#section1-wrapper {
width: 80%;
display: flex;
font-family: 'Roboto';
padding-top: 50px;
padding-bottom: 50px;
align-items: center;
flex-direction: column;
flex-shrink: 0; /* add to disable flex default shrinking feature */
}
jsFiddle demo
You should change your overflow property in the #section1
#section1-wrapper {
overflow: scroll;
}
so I'm trying to do a "cast" section for one of my assignments and I want the actor's character to appear when the actor is hovered over. How would I achieve this? When hiding the display of the deadpool div, it leaves a big gap in the page. I want this to not show until Ryan Reynolds is hovered over.
article {
display: flex;
flex-wrap: wrap;
margin: auto;
padding-top: 12px;
padding-bottom: 12px;
background-color: #8b2323;
width: 48vw;
min-height: 200px;
min-width: 391px;
font-family: verdana, sans-serif;
justify-content: center;
}
.castcontainer {
flex-wrap: wrap;
min-width: 215px;
width: 20%;
height: 30%;
overflow: hidden;
padding: 5px;
}
#cast {
border-radius: 50%;
width: 100%;
}
.cast2 {
display: none;
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
.cast:hover+.cast2 {
display: block;
}
.cast {
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
p {
background: white;
}
<article>
<div class="castcontainer">
<div class="cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast">
<p><b>Ryan Reynalds</b></p>
</div>
</div>
<div class="castcontainer">
<div class="cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast">
<p><b>Wade Wilson</b></p>
</div>
</div>
</article>
Let me offer a more radical departure from your current code:
.cast * {
box-sizing: border-box;
}
.cast {
border-radius: 10px;
background: #8b2323;
font-family: Verdana, sans-serif;
text-align: center;
padding: 12px;
}
.cast img {
border-radius: 50%;
max-height: 300px;
}
.cast strong {
background: white;
display: block;
border-radius: 10px;
margin-top: 5px;
}
.cast .actor,
.cast .role {
width: 100%;
}
.cast .actor {
display: block;
z-index: 2;
}
.cast .role {
display: none;
z-index: 1;
}
.cast:hover .actor {
display: none;
}
.cast:hover .role {
display: block;
}
<article class="cast">
<div class="actor">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg">
<strong>Ryan Reynalds</strong>
</div>
<div class="role">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg">
<strong>Wade Wilson</strong>
</div>
</article>
This reduces the number of child elements and (in my opinion) makes selecting which element to show/hide that much easier. You're targeting the :hover event of the parent wrapper and instead of trying to use an ID (which cannot be reused) you're targeting .actor and .role.
One concern would be to make sure that the images for each were the same dimension, otherwise on change you could get some transition that was unappealing if the box had to resize.
Might this be what you're looking to do?
Added:
article:hover .cast {
display: none;
}
article:hover .cast2 {
display: block;
}
article {
display: flex;
flex-wrap: wrap;
margin: auto;
padding-top: 12px;
padding-bottom: 12px;
background-color: #8b2323;
width: 48vw;
min-height: 200px;
min-width: 391px;
font-family: verdana, sans-serif;
justify-content: center;
}
article:hover .cast {
display: none;
}
article:hover .cast2 {
display: block;
}
.castcontainer {
flex-wrap: wrap;
min-width: 215px;
width: 20%;
height: 30%;
overflow: hidden;
padding: 5px;
}
#cast {
border-radius: 50%;
width: 100%;
}
.cast2 {
display: none;
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
.cast:hover+.cast2 {
display: block;
}
.cast {
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
p {
background: white;
}
<article>
<div id="one" class="castcontainer">
<div class="cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast">
<p><b>Ryan Reynalds</b></p>
</div>
</div>
<div id="two"class="castcontainer">
<div class="cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast">
<p><b>Wade Wilson</b></p>
</div>
</div>
</article>
<article>
<div class="castcontainer" id="show1">
<div class="cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" class="castImg" id="CastImgRef">
<p><b>Ryan Reynalds</b></p>
</div>
</div>
<div class="castcontainer" id="show2">
<div class="cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" class="castImg">
<p><b>Wade Wilson</b></p>
</div>
</div>
</article>
jQuery(function ($) {
$('#show1').hover(function () {
$(this).find('img').attr('src', function (i, src) {
return src.replace('https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg', 'http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg')
})
$('#textChange').text('Wade Wilson');
}, function () {
$(this).find('img').attr('src', function (i, src) {
return src.replace('http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg', 'https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg')
})
$('#textChange').text('Ryan Reynalds');
})
})
Add thisjquery and it will work fine
https://jsfiddle.net/dLwxm2ox/8/
article {
display: flex;
flex-wrap: wrap;
margin: auto;
padding-top: 12px;
padding-bottom: 12px;
background-color: #8b2323;
width: 48vw;
min-height: 200px;
min-width: 391px;
font-family: verdana, sans-serif;
justify-content: center;
}
article:hover .cast {
display: none;
}
article:hover .cast2 {
display: block;
}
.castcontainer {
flex-wrap: wrap;
min-width: 215px;
width: 20%;
height: 30%;
overflow: hidden;
padding: 5px;
}
#cast {
border-radius: 50%;
width: 100%;
}
.cast2 {
display: none;
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
.cast:hover+.cast2 {
display: block;
}
.cast {
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
p {
background: white;
}
<article>
<div id="one" class="castcontainer cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast">
<p><b>Ryan Reynalds</b></p>
</div>
<div id="two"class="castcontainer cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast">
<p><b>Wade Wilson</b></p>
</div>
</article>
The inner div seems to be unnecessary where class="cast" and class="cast2". Remove the div's and add the class to its parent.
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;
}
}
}
}
so I am doing this project and i've started to run into problems with display properties and elements not positioning as i would want them to. Here's what i have so far: https://codepen.io/benasl/pen/zdMbKQ
* {
box-sizing: border-box;
}
html, body {
margin:0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin:0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: inline-block;
width: 100%;
}
.left {
padding-right: 10px;
width: 50%;
border-right: 1px solid #797977;
display: flex;
float: left;
}
.below {
display: flex;
clear: both;
width: 50%;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
width: 50%;
display: flex;
}
aside {
width: 40%;
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
display: inline-block;
float: left;
margin-right: 15px;
}
section {
display: inline-block;
float: left;
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size:bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background:#868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border:none;
color:#c3c3c2;
cursor: pointer;
transition:all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
<div id="container">
<div class="wrapper">
<div class="left">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about"><p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p></div>
</div>
<div class="right">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on
the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about"><p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p></div>
</div>
</div>
</div>
</div>
Everything was okay before i added the .below class with all its content, what i need is .left to be on the left and .rightto be in the right..
I've tried all sorts of display properties, none of them seem to work.
Note, your markup and CSS can be cleaned up a lot, though I choose not to do that for your.
If you move the .below element's into each .left/.right element, add flex-wrap: wrap to the .left/.right rules, and use calc() for the aside's width (so it take border/margin into account), you'll get a good start of both see how Flexbox works and to restructure your markup.
Updated codepen
Stack snippet
* {
box-sizing: border-box;
}
html, body {
margin:0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin:0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: inline-block;
width: 100%;
}
.left {
padding-right: 10px;
width: 50%;
border-right: 1px solid #797977;
display: flex;
float: left;
flex-wrap: wrap;
}
.below {
display: flex;
clear: both;
width: 100%;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
width: 50%;
display: flex;
flex-wrap: wrap;
}
aside {
width: calc(40% - 18px);
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
margin-right: 15px;
}
section {
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size:bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background:#868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border:none;
color:#c3c3c2;
cursor: pointer;
transition:all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
<div id="container">
<div class="wrapper">
<div class="left">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
<div class="right">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on
the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
</div>
</div>
Add display: flex to the wrapper.
Wrap top left content in a new wrapper (in this case .left-top) to separate it from below.
Separate left and right and add flex-direction: column to stack left-top and below.
*Avoid mixing flex and float
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin: 0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: flex;
width: 100%;
}
.left {
padding-right: 10px;
border-right: 1px solid #797977;
display: flex;
}
.below {
display: flex;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
display: flex;
}
aside {
width: 40%;
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
display: inline-block;
float: left;
margin-right: 15px;
}
section {
display: inline-block;
float: left;
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size: bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background: #868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border: none;
color: #c3c3c2;
cursor: pointer;
transition: all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
.left,
.right {
flex-direction: column;
}
<div id="container">
<div class="wrapper">
<div class="left">
<div class="left-top">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
<div class="right">
<div class="right-top">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
</div>
</div>
I'm trying to make a simple game, and I've run into few problems I can't seem to solve:
I can't center vertically floated elements (.stat and .clickable).
Total height of all elements should fit exactly into screen height, however it goes beyond it.
Images differ a bit in their width depending on value I give them (at my screen they look the same at 32% or 29%, but on 30% upper one has slightly wider (and a bit blurry) right border).
Height property of img elements has no effect.
Here's my code (Images are 450px wide squares):
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>
I don't know what you mean with your first question. However I can help you with the second. I made some small changes to your code, but I don't have the image. Look at the code bellow. The game container now is set to max-height: 100%; and height: 100vh; that should help. (100vh means the hole page. I also made body overflow: hidden;, because I think scrolling isn't necessary. I made the buttons container to the bottom of the page.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
overflow:hidden;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
.buttons {
bottom: 0;
clear:both;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
max-height: 100%;
height: 100vh;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
height: 50%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
For the third question, we don't have the images...
For the height property try display: block; and no width then. Check your classed normally it should work.
I hope I helped you !!!
You can take advantage of flexbox in this case (note the scroll is generated by the snippet's viewport height, ideally it wouldn't even overflow, but if it did, overflow: auto is set just to handle it, you can comment it though based on your benefit):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
}
.hands {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
/* comment if content will never overflow */
overflow-x: auto;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
/*text-align: center;*/
margin: auto;
background-color: #999999;
display: flex;
flex-flow: column wrap;
justify-content: center;
}
img {
width: 32%;
display: block;
margin: auto;
}
/*#score {
float: left;
margin-left: 5%;
}*/
/*#hp {
float: right;
margin-right: 5%;
}*/
/*.stats:after {
content: "";
display: block;
clear: both;
}*/
/*#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}*/
/*#playerHand {
margin-bottom: 5%;
}*/
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
Please check this code. I solve your question 1 and 2. I don't understand about your image issue.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
display: table;
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
width: 100%;
}
#score,
#hp{
display: table-cell;
vertical-align: middle;
padding: 10px;
}
#score {
/*float: left;
margin-left: 5%;*/
text-align: left;
}
#hp {
/*float: right;
margin-right: 5%;*/
text-align: right;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
/*float: left;*/ /*Float sould not use here */
display: table-cell;
width: 29.33%;
/*margin: 1%;
padding: 1%;*/
border: 5px solid #bfbfbf;
vertical-align: middle;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="http://placehold.it/450x450">
<img id="playerHand" src="http://placehold.it/450x450">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>