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;
}
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 months ago.
I am having trouble. There is a whitespace between the two pages of content. Also I have tried applying margin: auto; and text-align: center; but to no avail I don't know what to do. Also what other things are wrong with the way I implemented my design?
Also I tried to add a gray border around the avatar so that it fits into the navbar but stays exactly where it is.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, intial-scale=1.0"/>
<title>Johnson's Personal Portfolio</title>
</head>
<body>
<nav id="navbar">
<div class="avatar">
<img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3"/>
</div>
<ul>
<li>Alias</li>
<li>About</li>
<li><a href="#">Contacts<a/></li>
<li>Works</li>
</ul>
</nav>
<header id="welcomesection">
<div id="welcome-section">
<h1>
Welcome to Johnson Oluwaseun Adeleke's
</h1>
<h1>
<>Portfolio Page<>
</h1>
<p style="color: blue"><i>I am an aspiring Web Developer</i></p>
</div>
</header>
<section id="projects">
<h2>Here are some of my Projects</h2>
<p></p>
</section>
</body>
</html>
body{
width: 100%;
height: 100%;
margin: 0;
}
#navbar li, a{
list-style-type: none;
display: inline-block;
padding: 4px;
float: right;
color: black; font-weight: normal;
font-style: Helvetica, sans-serif;
font-size: 15px;
vertical-align: center;
}
nav{
width: 100%;
display:block;
background-color:red;
position: fixed;
height: 50px;
top: 0;
left: 0;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#welcomesection{
float: clear;
display: flex;
align-items: center;
width: 100%;
height: 120vh;
text-align: center;
background-color: teal;
z-index: 1;
}
h1{
margin: auto;
}
#welcomesection p{
text-align: center;
}
.avatar img{
width: auto;
height: 50px;
float: left;
left: 15px;
top: 0;
padding: 15px solid grey;
}
#projects{
width: 100%;
height: 150vh;
background-color:blue;
}
#projects h2{
text-decoration: underline;
text-align: center;
}
Is the h2 margin you can remove it and add a padding
body {
width: 100%;
height: 100%;
margin: 0;
}
#navbar li,
a {
list-style-type: none;
display: inline-block;
padding: 4px;
float: right;
color: black;
font-weight: normal;
font-style: Helvetica, sans-serif;
font-size: 15px;
vertical-align: center;
}
nav {
width: 100%;
display: block;
background-color: red;
position: fixed;
height: 50px;
top: 0;
left: 0;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#welcomesection {
float: clear;
display: flex;
align-items: center;
width: 100%;
height: 120vh;
text-align: center;
background-color: teal;
z-index: 1;
}
h1 {
margin: auto;
}
#welcomesection p {
text-align: center;
}
.avatar img {
width: auto;
height: 50px;
float: left;
left: 15px;
top: 0;
padding: 15px solid grey;
}
#projects {
width: 100%;
height: 150vh;
background-color: blue;
}
#projects h2 {
text-decoration: underline;
text-align: center;
margin-top: 0;
padding-top: 20px;
}
<nav id="navbar">
<div class="avatar">
<img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3" />
</div>
<ul>
<li>Alias</li>
<li>About</li>
<li><a href="#">Contacts<a/></li>
<li>Works</li>
</ul>
</nav>
<header id="welcomesection">
<div id="welcome-section">
<h1>
Welcome to Johnson Oluwaseun Adeleke's
</h1>
<h1>
<>Portfolio Page
<>
</h1>
<p style="color: blue"><i>I am an aspiring Web Developer</i></p>
</div>
</header>
<section id="projects">
<h2>Here are some of my Projects</h2>
<p></p>
</section>
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 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%;
I can't seem to find a way to center the images inside the div.. any tips ? Pretty basic stuff I know, just recently got into it again. I hope anybody gets what I'm trying to do here ?
I can't seem to find a way to center the images inside the div.. any tips ? Pretty basic stuff I know, just recently got into it again. I hope anybody gets what I'm trying to do here ?
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-color: grey;
background-attachment: fixed;
background-size: 100% auto;
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
width: 100%;
height: 100%;
background-image: url("img/bg/background1.png");
background-color: grey;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.body {
/*height: 100%;*/
width: 100%;
background-color: white;
color: black;
padding-left: 5%;
padding-right: 5%;
overflow: hidden;
}
.content {
margin: auto;
width: 100%;
background-color: white;
color: black;
border-right: double;
border-left: double;
text-align: justify;
font-size: 20px;
font-family: arial;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
.social {
margin: auto;
position: absolute;
}
.social a {
}
.footer {
height: 50px;
width: 100%;
background-color: black;
color: white;
margin: auto;
vertical-align: middle;
}
#copyright {
display: table;
}
#cpy{
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
<meta name="description" content="My Personal Portfolio">
<title>John's Work</title>
</head>
<body>
<div class="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="header">
</div>
<div class="body">
<div class="content">
<div class="social">
<a href="https://www.facebook.com/" style="color:black; text-decoration:none">
<img src="img/fb.png" alt="Facebook">
</a>
<a href="http://www.instagram.com/" style="color:black; text-decoration:none" >
<img src="img/ig.png" alt="Instagram">
</a>
<a href="http://www.snapchat.com/" style="color:black; text-decoration:none" >
<img src="img/snapchat.png" alt="Snapchat">
</a>
</div>
</div>
</div>
<div class="footer" id="copyright" style="text-align:center">
<div id="cpy">©)</div>
</div>
</body>
</html>
As I understand the main trouble is an absolute position of .social block. If this position is really necessary use:
left: 50%;
transform: translateX(-50%);
In other case you can remove position: absolute; and add
display: flex;
justify-content: center;
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>