this is my first attempt at doing media queries for responsive design so I am just a beginner at this. I have a wrapper called "skills-wrapper" that has 4 divs called "skills" lined up in a row so they are all in one line next to each other. when the screen shrinks down to 320px I want the 4 divs to be essentially form a square, two on top two on bottom. when it gets to 320px all 4 divs are still lined up in a row and are going outside the wrapper div. how do I make it to form a square like I want it to when the screen shrinks down to 320px?
FYI the code I put in the media queries does line up the "skills" divs the way I want it to but that's when the screen is in its normal size NOT when it shrinks down. That's how I came up with the code for my media queries. here is the code.
.skills-container {
position: relative;
width: 100%;
height: 700px;
background-color: #e1e1e1;
margin-top: 0;
padding: 0;
bottom: 0;
}
.title.second {
color: black;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family: 'Raleway', sans-serif;
font-size: 55px;
}
#underline-second {
width: 500px;
margin: 0 auto;
border-bottom: 5px solid black;
margin-bottom: 40px;
}
.skills-wrapper {
position: relative;
margin: auto;
width: 1200px;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.skills {
position: relative;
width: 23%;
height: 470px;
margin-top: 10px;
border-right: 4px solid black;
}
.skills.last {
border: none;
}
.logo {
width: 265px;
height: 340px;
margin-top: 10px;
}
.ion-social-html5 {
text-align: center;
font-size: 280px
}
.des {
font-size: 25px;
margin-top: 0px;
color: black;
}
.ion-social-css3 {
text-align: center;
font-size: 280px
}
.ion-social-javascript {
text-align: center;
font-size: 280px
}
.ion-social-angular {
text-align: center;
font-size: 280px
}
#media all and (max-width: 320px) {
.skills-container {
position: relative;
width: 100%;
height: 700px;
background-color: #e1e1e1;
margin-top: 0;
padding: 0;
bottom: 0;
}
.title.second {
font-size: 18px;
margin-bottom: 0;
}
#underline-second {
border-bottom: 2px solid #0A0A0A;
width: 200px;
margin-bottom: 0
}
.skills-wrapper {
position: absolute;
margin: auto;
width: 100%;
height: 500px;
}
.lang {
font-size: 40px;
}
.skills {
float: left;
width: 50%;
height: 50%;
margin-top: 10px;
text-align: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
border-right: none;
}
.des {
font-size: 14px;
}
}
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "practice.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body>
<div class = "skills-container">
<div id = "underline-second">
<h1 class = "title second" id = "skills">Skills</h1>
</div>
<div class = "skills-wrapper wow bounceInUp" data-wow-duration="2s" data-wow-offset="280">
<div class = "skills">
<div class = "logo">
<div class = "ion-social-html5 lang">
<p class = "des">HTML5</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-css3 lang">
<p class = "des">CSS3</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-javascript lang">
<p class = "des">JAVASCRIPT</p>
</div>
</div>
</div>
<div class = "skills last">
<div class = "logo">
<div class = "ion-social-angular lang">
<p class = "des">ANGULAR JS</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When dealing with a fluid design you should avoid styling the elements width using px, instead use percentage unit. I also suggest you making use of max-width property instead of width in this case. Another suggestion would be to use min-height instead of height to avoid problems on mobile devices. I've modified your code a bit:
.skills-container {
position: relative;
width: 100%;
height: 700px;
background-color: #e1e1e1;
margin-top: 0;
padding: 0;
bottom: 0;
}
.title.second {
color: black;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family: 'Raleway', sans-serif;
font-size: 55px;
}
#underline-second {
max-width: 500px;
margin: 0 auto;
border-bottom: 5px solid black;
margin-bottom: 40px;
}
.skills-wrapper {
position: relative;
margin: auto;
max-width: 1200px;
width: 100%;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.skills {
position: relative;
width: 23%;
height: 470px;
margin-top: 10px;
border-right: 4px solid black;
}
.skills.last {
border: none;
}
.logo {
max-width: 265px;
width: 100%;
height: 340px;
margin-top: 10px;
}
.ion-social-html5 {
text-align: center;
font-size: 280px
}
.des {
font-size: 25px;
margin-top: 0px;
color: black;
}
.ion-social-css3 {
text-align: center;
font-size: 280px
}
.ion-social-javascript {
text-align: center;
font-size: 280px
}
.ion-social-angular {
text-align: center;
font-size: 280px
}
#media all and (max-width: 320px) {
.skills-container {
position: relative;
width: 100%;
height: 700px;
background-color: #e1e1e1;
margin-top: 0;
padding: 0;
bottom: 0;
}
.title.second {
font-size: 18px;
margin-bottom: 0;
}
#underline-second {
border-bottom: 2px solid #0A0A0A;
max-width: 200px;
width: 100%;
margin-bottom: 0
}
.skills-wrapper {
position: absolute;
margin: auto;
width: 100%;
height: 500px;
}
.lang {
font-size: 40px;
}
.skills {
float: left;
width: 50%;
height: 50%;
margin-top: 10px;
text-align: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
border-right: none;
}
.des {
font-size: 14px;
}
}
<div class="skills-container">
<div id="underline-second">
<h1 class="title second" id="skills">Skills</h1>
</div>
<div class="skills-wrapper wow bounceInUp" data-wow-duration="2s" data-wow-offset="280">
<div class="skills">
<div class="logo">
<div class="ion-social-html5 lang">
<p class="des">HTML5</p>
</div>
</div>
</div>
<div class="skills">
<div class="logo">
<div class="ion-social-css3 lang">
<p class="des">CSS3</p>
</div>
</div>
</div>
<div class="skills">
<div class="logo">
<div class="ion-social-javascript lang">
<p class="des">JAVASCRIPT</p>
</div>
</div>
</div>
<div class="skills last">
<div class="logo">
<div class="ion-social-angular lang">
<p class="des">ANGULAR JS</p>
</div>
</div>
</div>
</div>
</div>
i'd drop the code into a jsfiddle and play around with and
short codes can make this pretty simple, here's a post using them:
Nesting [su-column] inside [row] to get them to align neatly
that should force it into a square and you can see the results live on the fiddle
here is the media query code which you need to use, and don't include all properties in #media screen and (max-width : 320px){} just selected properties which you are changing for screen resolution of 320px and less.
#media screen and (max-width: 320px){
.skills-container{
width: 100%;
height: auto;
}
.title.second{
font-size: 25px;
}
#underline-second{
width: 100%;
border-bottom: 5px solid black;
}
.skills-wrapper{
width: 100%;
height: auto;
}
.skills{
border-right: 4px solid yellow;
}
.skills.last{
border: none;
}
.logo{
width: auto;
height: 340px;
margin-top: 10px;
}
.ion-social-html5{
text-align: center;
}
.des{
font-size: 20px;
word-wrap:break-word;
}
}
Check this jsFiddle
This must be what actually you need.
codepen.io
or you can insert this in your sublime and check if this actuall is;
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "practice.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
<style>
.skills-container {
position: relative;
width: 100%;
height: auto;
background-color: #e1e1e1;
margin-top: 0;
padding: 0;
bottom: 0;
}
.title.second{
color: black;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family:'Raleway', sans-serif;
font-size: 55px;
}
#underline-second {
width: 100%;
margin: 0 auto;
border-bottom: 5px solid black;
margin-bottom: 40px;
display: inline-block;
}
.skills-wrapper {
position: relative;
width: 100%;
display: block;
}
.skills {
width: 24.8%;
height: auto;
border: 1px solid #000;
display: block;
position: relative;
float: left;
}
.skills-wrapper.wow.bounceInUp:before, .skills-wrapper.wow.bounceInUp:after {
clear: both;
display: block;
content: "";
}
.logo {
width: 100%;
height: auto;
margin: 0 auto;
}
.ion-social-html5{
text-align: center;
font-size: 280px
}
.des{
font-size: 25px;
margin-top: 0px;
color: black;
}
.ion-social-css3{
text-align: center;
font-size: 280px
}
.ion-social-javascript{
text-align: center;
font-size: 280px
}
.ion-social-angular{
text-align: center;
font-size: 280px
}
#media (max-width: 768px){
.skills {
width: 49.3%;
height: auto;
border: 1px solid #000;
display: block;
position: relative;
float: left;
}
.ion-social-html5,
.ion-social-css3,
.ion-social-javascript,
.ion-social-angular {
font-size: 70px;
padding: 30px 0;
}
.des {
margin-top: 15px;
font-size: 18px;
}
}
</style>
</head>
<body>
<div class = "skills-container">
<div id = "underline-second">
<h1 class = "title second" id = "skills">Skills</h1>
</div>
<div class = "skills-wrapper wow bounceInUp" data-wow-duration="2s" data-wow-offset="280">
<div class = "skills">
<div class = "logo">
<div class = "ion-social-html5 lang">
<p class = "des">HTML5</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-css3 lang">
<p class = "des">CSS3</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-javascript lang">
<p class = "des">JAVASCRIPT</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-angular lang">
<p class = "des">ANGULAR JS</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I currently studying HTML/CSS/DOM and I am a begginer. I tried to make an Instagram main page for practicing and improving my level. I will share my code, so you can understand what I'm trying to do!
This is HTML code
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
/*box-sizing: border-box;*/
}
#font-face {
font-family: instagramFont;
src: url("./westagram.ttf") format("opentype");
}
.wrapper {
margin: 10px 10px 10px 10px;
}
.wrapper .nav {
padding-top: 20px;
padding-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: space-around;
border-bottom: solid 1px #dbdbdb;
position: fixed;
z-index: 99999;
/*포지션 여러개 썼을때 우선순위 설정 인덱스값이 클수록 우선순위*/
width: 100%;
}
.wrapper .nav .logo {
font-family: instagramFont;
font-size: 2rem;
padding-right: 100px;
}
.search-box {
margin-top: 5px;
width: 215px;
height: 28px;
}
.wrapper .nav .icons {
margin-left: 100px;
}
.wrapper .main {
position: relative;
/*포지션을 쓰면 위치 조정 top left right bottom*/
top: 90px;
width: 100%;
/*height: 900px;*/
background-color: yellow;
}
.wrapper .main .feeds {
position: relative;
top: 40px;
right: 5px;
left: 40px;
width: 60%;
height: 660px;
background-color: red;
}
.wrapper .main .feeds .article {
position: relative;
display: flex;
flex-direction: column;
top: 10px;
right: 10px;
left: 15px;
width: 95%;
height: 600px;
background-color: green;
}
. .wrapper .main .feeds .article .identi {
position: relative;
/*width: 97%;*/
/*height: 100px;*/
/*background-color: black;*/
}
.identi {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.wrapper .main .feeds .article .identi .selfi {
padding: 20px 20px 20px 20px;
width: 30px;
height: 30px;
border-radius: 50%;
}
.wrapper .main .feeds .article .identi .id {
padding-top: 20px;
}
.wrapper .main .feeds .article .identi .fa {
padding-top: 20px;
padding-right: 20px;
}
.wrapper .main .feeds .article .pic {
position: relative;
width: 100%;
/*top: 10px;*/
height: 65%;
background-color: lightblue;
}
.wrapper .main .feeds .article .show-box {
position: relative;
width: 100%;
height: 15%;
background-color: lightcoral;
}
.wrapper .main .feeds .article .comment {
position: relative;
width: 100%;
height: 9%;
background-color: lightcyan;
}
.wrapper .main .feeds .article .name {
/*margin-left: 40px;*/
/*padding-bottom: 20px;*/
}
.wrapper .main .main-right {
position: absolute;
top: 40px;
right: 30px;
width: 30%;
height: 900px;
background-color: blue;
}
#compass {
width: 30px;
height: 30px;
}
#heart {
width: 30px;
height: 30px;
}
#my-page {
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Westagram Main Page</title>
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<!-- header : segmantic tag -->
<div class="wrapper">
<div class="nav">
<p class="logo"> Westagram </p>
<input class="search-box" type="text" placeholder=" Search" , style="font-family:Arial, FontAwesome">
<div class="icons">
<img id="compass" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png">
<img id="heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png">
<img id="my-page" src=" https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png">
</div>
</div>
<div class="main">
<div class="feeds">
<div class="article">
<div class="identi">
<img class="selfi" src="about.png">
<span class="id"> Jiwan Jeon </span>
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</div>
<div class="pic">
</div>
<div class="show-box">
</div>
<div class="comment">
</div>
</div>
</div>
<div class="main-right">
</div>
</div>
</div>
</body>
</html>
According to the CSS file, I declare the height of each section for checking those sections in the right position. Based on my knowledge, If I delete the height, it would be automatically adjusted height(I mean Depending on the size of the screen window, the horizontal/vertical height will increase or decrease.) This is what was expected. However, the main and the height of the others is fixed... Could you help me out with this problem? I struggling with it the whole day :(
Thank you for your help in advance!
You can use vh (view height) ,em ,rem or percentage.
Example:
height: 120px;
height: 10em;
height: 75%;
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;
}
I'm working on a little something and I'm trying to make it so the footer is always getting pushed down when the screen shrinks. I'm struggling to do this as my content instead goes under the footer. Can anyone help?
I'm also open to any things I can improve on or clean up, I know the CSS is a bit un-neat but I'm getting used to not using bootstrap so I'm working on it :)
Many thanks,
Conner.
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
min-height: 100%;
}
#image-wrap {
background-color: #2E2E2E;
}
#wrapper-image {
height: calc(100vh - 135px);
background: url(../images/background-image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.6;
}
.full-view {
width: 100%;
}
/* Fonts */
.title-color {
color: #FF1A1A;
}
#font-face {
font-family: titleText;
src: url("../fonts/Typo_Round_Regular_Demo.otf") format("opentype");
}
.page-font {
font-family: titleText;
}
/* Header Handler */
#header-container {
position: absolute;
top: 0;
background-color: #2E2E2E;
}
#site-title {
display: inline-block;
margin-left: 175px;
margin-top: 25px;
margin-bottom: 20px;
font-size: 20px;
}
#navbar-handle {
float: right;
display: inline-block;
margin-right: 90px;
margin-top: 25px;
}
.navi-bar {
display: inline-block;
list-style: none;
}
.navi-bar li {
display: inline-block;
text-decoration: none;
}
li a {
text-decoration: none;
color: white;
padding: 20px;
font-size: 25px;
}
.nav-item {
background-color: #4A4A4A;
border-radius: 5px;
margin-top: 10px;
margin-left: 15px;
padding: 5px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto;
text-align: center;
}
#footer {
background-color: #2e2e2e;
position: relative;
bottom: 0;
height: auto;
clear: both;
}
#footer-title {
margin-left: 10px;
}
#footer-text {
text-align: center;
}
#footer-subtext {
color: white;
}
#discord-icon {
font-size: 60px;
padding: 10px;
}
#discord-item-container {
margin-top: 5px;
border: solid 1px red;
border-radius: 5px;
display: inline-block;
width: auto;
background-color: #494949;
text-align: center;
padding: 5px;
}
#builder,
#builder a {
color: white;
text-align: left;
text-decoration: none
}
/* Content */
#content {
position: absolute;
top: 275px;
width: 100%;
height: auto;
}
.grid-container-1 {
display: grid;
grid-template-columns: auto;
text-align: center;
height: auto;
}
#image-container {
height: auto;
margin: 0 auto;
position: relative;
}
#logo {
height: 125px;
width: 125px;
}
#content-subtext {
color: white;
}
#media screen and (max-width: 420px) {
.grid-container {
grid-template-columns: auto;
}
#discord-item-container {
margin-top: 10px;
margin-bottom: 5px;
}
#site-title {
display: block;
margin-top: 10px;
text-align: center;
margin-left: 0;
font-size: 20px;
}
#navbar-handle {
display: block;
text-align: center;
margin-left: 0;
margin-right: 0;
float: none;
padding-bottom: 5px;
}
li a {
padding: 5px;
font-size: 20px;
}
}
#media screen and (max-width: 770px) and (min-width: 421px) {
#site-title {
margin-left: 60px;
}
li a {
padding: 5px;
font-size: 25px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0 viewport-fit=cover, user-scalable=no">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/page-style.css">
<!-- Icons -->
<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 class="wrapper">
<div id="image-wrap">
<div id="wrapper-image">
</div>
</div>
<div class="full-view" id="header-container">
<div class="title-color page-font" id="site-title">
<h1>Voltunix's Services</h1>
</div>
<div id="navbar-handle">
<ul class="navi-bar page-font">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Services
</li>
</ul>
</div>
</div>
<div id="content">
<div class="grid-container-1">
<div class="grid-row" id="image-container">
<img src="./images/logo.png">
<h1 class="page-font title-color">Voltunix's Services</h1>
<p class="page-font" id="content-subtext">Quality work fitting your personal budget</p>
</div>
</div>
</div>
</div>
<footer class="full-view" id="footer">
<div id="footer-title">
<div class="grid-container">
<div class="grid-item" id="footer-text">
<h2 class="title-color page-font">Voltunix</h2>
<p class="page-font" id="footer-subtext">Freelance Manager,<br> Server Owner,<br> Middleman
</p>
</div>
<div class="grid-item">
<div id="discord-item-container">
<i class="fab fa-discord title-color" id="discord-icon"></i>
<p class="page-font" style="color: white;">Voltunix#0033</p>
</div>
</div>
<div class="grid-item" style="border: solid 1px red;">
<p id="builder">Website developed by Conner Murphy</p>
</div>
</div>
</div>
</footer>
</body>
</html>
This is taken from here https://css-tricks.com/couple-takes-sticky-footer/ and only one solution but you can use flexbox and do the following
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper{
flex: 1 0 auto;
}
.footer{
flex-shrink: 0;
}
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>