I'm beginner to CSS & HTMl, and for now I am practicing on templates, i wanted to make a zoom effect using transform scale and overflow hidden (without overflowing the image borders, as in Snapshot Template), i made transform scale JSFiddle, but i didn't manage to make a trick and make zoom effect, can anyone help me?
.gallery-grid img {
-webkit-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
width: 100%;
height: 100%;
overflow: hidden;
}
Wrap every image into a container div and give overflow: hidden to it
<div class="image-container">
<img src="https://i.ibb.co/G9CYqz6/01.jpg">
</div>
<div class="image-container">
<img src="https://i.ibb.co/pbjtTMD/05.jpg">
</div>
<div class="image-container">
<img src="https://i.ibb.co/ckv3dPy/09.jpg">
</div>
<div class="image-container">
<img src="https://i.ibb.co/p0kYsQR/02.jpg">
</div>
...
and
.image-container {
overflow: hidden
}
You can not apply overflow: hidden on an img.
You should apply it to the container which you do not want it to bleed out of.
you may use z-indexand position , so scaled element remains under others. Also lay theme all the way throught and all the way down, overflow on the container will be hidding what overflows from the top and the bottom of itself.
To avoid to deal with this this way, wrap each image in a container , so overflow works for each of them.
Demo from your HTML and CSS updated
https://jsfiddle.net/c5ae48vL/
modification made on lines about z-index and container grid-column and height:
// modifications made
//line 140
//line 141
//line 149
//line 158
//line 176
or snippet below
// modifications made
//line 140
//line 141
//line 149
//line 158
//line 176
// and transition turned to transform instead all
<!DOCTYPE html>
<!-- https://templated.co/snapshot -->
<html lang="en">
<head>
<title>Snapshot</title>
<style>
#import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
* {
margin: 0;
padding: 0;
font-family: "Roboto Light";
}
body {
width: 100%;
height: 100%;
}
/* Side Nav Bar */
aside {
width: 5%;
height: 100%;
font-size: 22px;
text-align: center;
background: rgb(13, 18, 23);
position: fixed;
z-index: 4;
}
aside i {
margin-top: 40px;
color: rgb(134, 137, 139);
}
aside i:hover {
color: white;
}
aside i:active {
color: rgb(134, 137, 139);
}
.fas.fa-home {
color: #19b5fe;
}
/* End Of Side Nav Bar */
/* Main Section */
main {
width: 95%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
#banner-img {
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
height: 500px;
z-index: 2;
}
.banner {
background-image: url("https://i.ibb.co/KKpJvX3/banner.jpg");
width: 100%;
height: 500px;
position: fixed;
overflow: hidden;
}
.main-fore {
text-align: center;
position: relative;
color: white;
z-index: 3;
margin-top: 15%;
width: 100%;
margin-right: auto;
margin-left: auto;
}
.main-fore h1 {
font-size: 50px;
margin-bottom: 10%;
}
.main-fore h2 {
border: 2px solid rgb(82, 72, 63);
border-radius: 5px;
padding-top: 15px;
padding-bottom: 15px;
width: 15%;
margin-right: auto;
margin-left: auto;
}
.main-fore h2:hover {
background: rgba(72, 57, 44, .2);
color: white;
cursor: pointer;
user-select: none;
}
/* End Of Main Section */
/* Gallery Section - What's New */
.gallery {
position: absolute;
z-index: 3;
top: 500px;
right: 0;
margin-right: 0;
width: 95%;
text-align: center;
height: 800px;
background: #f1f1f1;
}
#g-head {
margin-top: 5%;
margin-bottom: 3%;
color: rgb(34, 49, 63);
font-size: 25px;
}
.gallery-grid img {
-webkit-transition: transform .5s ease-in-out;
-o-transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out;
width: 100%;
height: 100%;
overflow: hidden;
position:relative;
z-index:10;
}
.gallery-grid img:hover {
-webkit-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
z-index:0;
}
.gallery-grid {
width: 100%;
/* height: 100%;*/ max-width: 1000px;margin:0 auto;
margin-left: auto;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 27% 27%;
grid-template-areas: ". . . ." ". . . .";
}
#g-button {
position: relative;
bottom: 200px;
text-decoration: none;
outline: none;
padding: 15px 50px;
font-size: 22px;
font-weight: 500;
color: white;
background: #19b5fe;
transition: all .2s ease-in-out;
border-radius: 5px;
z-index:20;
}
#g-button:hover {
color: white;
background: rgb(1, 155, 227);
}
/* End Of What's New Section */
/* About Me Section */
.aboutme {
width: 47.5%;
position: absolute;
top: 1300px;
z-index: 3;
background: #e6e6e6;
right: 47%;
color: rgb(34,49,63);
height: 70%;
}
.aboutme h1 {
font-size: 20px;
margin-top: 7%;
margin-left: 10%;
}
.aboutme p {
margin-left: 10%;
margin-top: 4%;
margin-right: 7%;
line-height: 25px;
font-size: 13px;
}
.socialicons i {
position: relative;
left: 10%;
top: 20px;
font-size: 25px;
user-select: none;
color: #19b5fe;
margin: 3px;
}
.socialicons i:hover {
color: rgb(1, 155, 227);
}
/* End Of About Me Section */
/* Message Section */
.message {
width: 47.5%;
position: absolute;
top: 1300px;
background: #ececec;
right: 0;
z-index: 3;
height: 70%;
}
.message h1 {
font-size: 20px;
color: rgb(34,49,63);
margin-top: 7%;
margin-left: 10%;
}
.name_email {
display: flex;
margin-top: 5%;
font-size: 16px;
}
.name_field {
flex: 0 0 50%;
margin-left: 10%;
}
.email_field {
flex: 1;
}
.message_field {
margin-left: 10%;
margin-top: 5%;
}
.email_field input, .name_field input, .message_field textarea {
padding: 10px;
width: 75%;
border: 1px solid #bde6fc;
}
#submit_button {
margin-left: 10%;
margin-top: 10%;
background: #19b5fe;
color: white;
padding: 2% 7%;
border-radius: 5px;
border: none;
cursor: pointer;
font-size: 17px;
font-weight: 500;
}
#submit_button:hover {
background: rgb(1, 155, 227);
}
/* End Of Message Section */
/* Footer Section */
#footer-cap {
font-size: 13px;
text-align: center;
position: relative;
top: 30%;
color: black;
}
.no1-img {
overflow: hidden;
}
</style>
</head>
<body>
<aside>
<i class="fas fa-home"></i><br>
<i class="fas fa-camera-retro"></i><br>
<i class="fas fa-file-alt"></i>
</aside>
<main>
<div class="banner">
<div id="banner-img"></div>
</div>
<div class="main-fore">
<h1>Hey, I'm Snapshot</h1>
<h2>Continue</h2>
</div>
</main>
<div class="gallery">
<h1 id="g-head">What's New</h1>
<div class="gallery-grid">
<img src="https://i.ibb.co/G9CYqz6/01.jpg">
<img src="https://i.ibb.co/pbjtTMD/05.jpg">
<img src="https://i.ibb.co/ckv3dPy/09.jpg">
<img src="https://i.ibb.co/p0kYsQR/02.jpg">
<img src="https://i.ibb.co/7pgbSk9/06.jpg">
<img src="https://i.ibb.co/0F93gYK/10.jpg">
<img src="https://i.ibb.co/0Yw8zwd/03.jpg">
<img src="https://i.ibb.co/wwnzstm/07.jpg">
</div>
<a id="g-button" href="gallery.html">Full Gallery</a>
</div>
<div class="middlediv">
<div class="aboutme">
<h1>About Me</h1>
<p>Mus sed interdum nunc dictum rutrum scelerisque erat a parturient condimentum potenti dapibus vestibulum condimentum per tristique porta. Torquent a ut consectetur a vel ullamcorper a commodo a mattis ipsum class quam sed eros vestibulum quisque a eu nulla scelerisque a elementum vestibulum.<br><br><br>Aliquet dolor ultricies sem rhoncus dolor ullamcorper pharetra dis condimentum ullamcorper rutrum vehicula id nisi vel aptent orci litora hendrerit penatibus erat ad sit. In a semper velit eleifend a viverra adipiscing a phasellus urna praesent parturient integer ultrices montes parturient suscipit posuere quis aenean. Parturient euismod ultricies commodo arcu elementum suspendisse id dictumst at ut vestibulum conubia quisque a himenaeos dictum proin dis purus integer mollis parturient eros scelerisque dis libero parturient magnis.</p>
<h1>Follow Me</h1>
<div class="socialicons">
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<!-- Message Section -->
<div class="message">
<h1>Get in Touch</h1>
<form action="#" method="POST" id="message_form">
<div class="name_email">
<div class="name_field">
<label for="name">Name</label><br><br>
<input type="text" placeholder="Name" id="name" name="user_name" required>
</div>
<div class="email_field">
<label for="email">Email</label><br><br>
<input type="email" id="email" placeholder="Email" name="user_email" required>
</div>
</div>
<div class="message_field">
<label for="message_area">Message</label><br><br>
<textarea cols="20" rows="7" id="message_area" placeholder="Message" name="user_message" required></textarea>
</div>
<input id="submit_button" type="submit" value="Send" form="message_form">
</form>
</div>
</div>
<!-- End Of Message Section -->
<footer>
<div style="width:95%; height: 100px; position: relative; z-index: 3; background: rgb(242, 242, 242); top: 1900px; right: 0; left: 5%;" class="footer">
<p id="footer-cap">© Snapshot: HASHEM. Images: Unsplash.</p>
</div>
</footer>
</body>
</html>
Related
how can I add a space between those 2 images and dont allow the text to break on the center of the page? It's for a college project and I've never programmed before.
i actually dont know whats going on on this template i have to edit.. i just need to add a photo of a person in the image circle (which i know how to) and a text of their review, but the images keep going off position and text breaks in the middle..
/*
Horizons by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
#import url("font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900");
/* Basic */
}
body {
background: #222833;
}
body,
input,
select,
textarea {
color: #555555;
font-family: 'Raleway', sans-serif;
font-size: 13pt;
font-weight: 300;
line-height: 1.75em;
}
a {
color: #3ac984;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
strong,
b {
font-weight: 700;
}
em,
i {
font-style: italic;
}
p,
ul,
ol,
dl,
table,
blockquote {
margin: 0 0 2em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-weight: 700;
line-height: 1.75em;
margin-bottom: 1em;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
text-decoration: none;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.25em;
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
hr {
border-top: solid 1px #888888;
border: 0;
margin-bottom: 1.5em;
}
blockquote {
border-left: solid 0.5em #888888;
font-style: italic;
padding: 1em 0 1em 2em;
}
section.special,
article.special {
text-align: center;
}
header.major {
padding-bottom: 4em;
}
header h2 {
margin: 0;
padding: 0;
font-size: 3em;
font-weight: 600;
}
header .byline {
font-size: 1.6em;
}
footer> :last-child {
margin-bottom: 0;
}
footer.major {
padding-top: 3em;
}
/* Form */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
background: none;
border: solid 1px #888888;
color: inherit;
display: block;
outline: 0;
padding: 0.75em;
text-decoration: none;
width: 100%;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #3ac984;
}
input[type="text"],
input[type="password"],
input[type="email"] {
line-height: 1em;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.5;
position: relative;
top: 3px;
}
:-moz-placeholder {
color: inherit;
opacity: 0.5;
}
::-moz-placeholder {
color: inherit;
opacity: 0.5;
}
:-ms-input-placeholder {
color: inherit;
opacity: 0.5;
}
.formerize-placeholder {
color: rgba(85, 85, 85, 0.5) !important;
}
/* Image */
.image {
border: 0;
position: relative;
}
.image.fit {
display: block;
}
.image.fit img {
display: block;
width: 100%;
}
.image.feature {
display: block;
margin: 0 0 2em 0;
}
.image.feature img {
display: block;
width: 100%;
}
.image.feature2 {
display: block;
margin: 0 0 5em 0;
}
.image.feature2 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: left margin 40px;
}
/* Icon */
.icon {
position: relative;
}
.icon:before {
content: "";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
.icon>.label {
display: none;
}
/* Lists */
ol.default {
list-style: decimal;
padding-left: 1.25em;
}
ol.default li {
padding-left: 0.25em;
}
ul {
margin: 0;
padding: 0;
}
ul.default {
list-style: none;
}
ul.default li {
display: block;
padding: 0.60em 0;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
}
ul.default> :first-child {
padding-top: 0;
border-top: none;
}
ul.icons {
cursor: default;
}
ul.icons li {
display: inline-block;
line-height: 1em;
padding-left: 0.5em;
}
ul.icons li:first-child {
padding-left: 0;
}
ul.actions {
cursor: default;
}
ul.actions:last-child {
margin-bottom: 0;
}
ul.actions li {
display: inline-block;
padding: 0 0 0 1.5em;
}
ul.actions li:first-child {
padding: 0;
}
ul.actions.vertical li {
display: block;
padding: 1.5em 0 0 0;
}
ul.actions.vertical li:first-child {
padding: 0;
}
ul.contact li {
padding: 1.05em 0;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
}
ul.contact li>span {
display: inline-block;
}
ul.contact li .address,
ul.contact li .mail,
ul.contact li .phone {
float: left;
width: 100px;
font-weight: 600;
}
ul.contact> :first-child {
padding-top: 0;
border-top: none;
}
ul.style li {
clear: both;
display: block;
padding-top: 3em;
}
ul.style> :first-child {
padding-top: 0;
}
ul.style h3 {
display: block;
margin: 0;
padding-bottom: 0.50em;
font-size: 1.1em;
font-weight: 700;
color: #404040;
}
ul.style .fa {
float: left;
display: inline-block;
width: 80px;
height: 80px;
margin-right: 1em;
background: #3ac984;
line-height: 80px;
text-align: center;
border-radius: 10px;
font-size: 2em;
color: white;
}
ul.list {
list-style: none;
}
ul.list li {
display: block;
padding: 0.60em 0;
border-top: 1px solid;
border-color: red;
}
ul.list> :first-child {
padding-top: 0;
border-top: none;
}
/* Tables */
table {
width: 100%;
}
table.default {
width: 100%;
}
table.default tbody tr {
border-bottom: solid 1px #888888;
}
table.default td {
padding: 0.5em 1em 0.5em 1em;
}
table.default th {
font-weight: 700;
padding: 0.5em 1em 0.5em 1em;
text-align: left;
}
table.default thead {
background: #555555;
color: #fff;
}
/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
background: #3ac984;
border-radius: 40px;
border: 0;
color: white;
cursor: pointer;
display: inline-block;
padding: 0.80em 2em;
text-align: center;
text-decoration: none;
font-size: 1.4em;
font-weight: 600;
min-width: 10em;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:hover {
background-color: #32b777;
}
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
.button.fit {
width: 100%;
}
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
.button.small {
font-size: 0.8em;
}
/* Wrapper */
.wrapper.style1 {
background: #fff;
}
.wrapper.style2 {
background: #ececec;
padding: 6em 0;
text-align: center;
}
.wrapper.style4 {
background: #ececec;
padding: 1em 0;
text-align: center;
}
.wrapper.style3 {
padding: 2em 0 3.5em 0;
background: #ececec;
}
.wrapper.style3 span {
display: inline-block;
padding-top: 0.80em;
font-size: 2em;
font-weight: 600;
}
.wrapper.style3 .button {
float: right;
}
/* Header */
#header {
background: #333333 url("../images/pic01.jpg") no-repeat;
background-size: cover;
color: #fff;
padding: 6em 0;
text-align: center;
background-position: 0% 65%;
position: relative;
}
#header:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(16, 32, 48, 0.25);
}
#header>* {
position: relative;
z-index: 1;
}
.homepage #header {
padding: 8em 0;
background-position: center;
}
#logo {
font-size: 2em;
}
#nav>ul {
margin: 0;
}
#nav>ul>li {
border-radius: 10px 10px 0 0;
display: inline-block;
margin-left: 0.5em;
padding: 0.5em 1.5em;
}
#nav>ul>li a {
color: #FFF;
text-decoration: none;
font-size: 1.2em;
}
#nav>ul>li:first-child {
margin-left: 0;
}
#nav>ul>li:hover a {
color: #fff;
}
#nav>ul>li.active {
background: #3ac984;
}
#nav>ul>li.active a {
color: white;
}
#nav>ul>li>ul {
display: none;
}
/* Dropotron */
.dropotron {
margin-top: -2px;
background: #3ac984;
border-radius: 10px;
color: white;
min-width: 12em;
padding: 1em 0;
}
.dropotron>li {
line-height: 2em;
padding: 0 1em;
}
.dropotron>li>a {
color: #FFF;
text-decoration: none;
}
.dropotron>li.active>a,
.dropotron>li:hover>a {
color: #FFF;
}
.dropotron.level-0 {
border-radius: 0 10px 10px 10px;
font-size: 1em;
}
/* Banner */
#banner {
text-align: center;
padding: 4em 0 0 0;
}
#banner .major h2 {
font-size: 3.5em;
}
#banner .major .byline {
display: block;
margin: 0em 2em;
line-height: 1.6em;
font-size: 1.5em;
}
#banner a {
color: inherit;
}
/* Main */
.no-sidebar #main .major,
.left-sidebar #main .major,
.right-sidebar #main .major {
text-align: left;
}
.homepage #main .major {
text-align: center;
}
#main {
padding: 6em 0;
}
#main .sidebar .major {
padding-bottom: 2em;
}
#main .sidebar .major h2 {
font-size: 1.8em;
}
#main .sidebar .default li {
border-color: #cdcdcd;
}
#main .sidebar .default a {
color: #464646;
}
#main .sidebar> :first-child {
margin-bottom: 3em;
}
/* Footer */
#footer {
padding: 4em 0;
color: #fff;
}
#footer .major h2 {
font-size: 2em;
color: #FFF;
}
#footer .major .byline {
font-size: 1.1em;
}
#footer .copyright {
margin-top: 3em;
padding-top: 3em;
border-top: 1px solid;
border-color: rgba(192, 192, 192, 0.15);
text-align: center;
color: inherit;
}
#footer a {
color: inherit;
}
#middle {
height: 600px;
width: 300px;
background: green;
}
<!DOCTYPE HTML>
<!--
Horizons by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Horizons by TEMPLATED</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1>Vista 702</h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Fotos</li>
<li>Depoimentos</li>
<li>Planos</li>
</nav>
<!-- Banner -->
<div id="banner">
<div class="container">
<section>
<header class="major">
<h2>Vista 702</h2>
<span class="byline">… a melhor vista de Juiz de Fora para se passar o feriado, réveillon e comemorações em geral.</span>
</header>
Sign Up
</section>
</div>
</div>
</div>
</div>
<!-- Featured -->
<div class="wrapper style2">
<section class="container">
<header class="major">
<a id="fotos"></a>
<h2>Fotos</h2>
<span class="byline">Sua visita começa aqui.</span>
</header>
<div class="row no-collapse-1">
<section class="4u">
<a class="image feature"><img src="images/pic02.jpg" alt=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="4u">
<a class="image feature"><img src="images/pic03.jpg" alt=""></a>
<p>Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis. Donec magna.</p>
</section>
<section class="4u">
<a class="image feature"><img src="images/pic04.jpg" alt=""></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
</div>
</section>
</div>
<div class="wrapper style2">
<section class="container">
<header class="major">
<a id="depoimentos"></a>
<h2>Depoimentos</h2>
<span class="byline">Os viajantes recomendam.</span>
</header>
<div class="row no-collapse-1">
<section class="">
<a class="image feature2"><img src="https://abrilexame.files.wordpress.com/2016/09/size_960_16_9_google-robert-bunsen.jpg" align="left"=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="">
<a class="image feature2"><img src="https://eduardhosp-alemao.com.br/wp-content/uploads/2018/05/Hashtag-Google-Alem%C3%A3o-Sem-Complica%C3%A7%C3%A3o.jpg" align="left"></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
</div>
</section>
</div>
<!-- Main -->
<div id="main" class="wrapper style1">
<section class="container">
<header class="major">
<a id="planos"></a>
<h2>Uma janelas, diversas</h2>
<span class="byline">Um plano para todos os bolsos.</span>
</header>
<div class="row">
<!-- Content -->
<div class="6u">
<section>
<ul class="style">
<li>
<span class="fa fa-wrench"></span>
<h3>Integer ultrices</h3>
<span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim.</span>
</li>
<li>
<span class="fa fa-cloud"></span>
<h3>Aliquam luctus</h3>
<span>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
</li>
</ul>
</section>
</div>
<div class="6u">
<section>
<ul class="style">
<li>
<span class="fa fa-cogs"></span>
<h3>Integer ultrices</h3>
<span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim.</span>
</li>
<li>
<span class="fa fa-leaf"></span>
<h3>Aliquam luctus</h3>
<span>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
</li>
</ul>
</section>
</div>
</div>
</section>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<!-- Lists -->
<div class="row">
<div class="8u">
<section>
<header class="major">
<h2>Donec dictum metus</h2>
<span class="byline">Quisque semper augue mattis wisi maecenas ligula</span>
</header>
<div class="row">
<section class="6u">
<ul class="default">
<li>Pellentesque elit non gravida blandit.</li>
<li>Lorem ipsum dolor consectetuer elit.</li>
<li>Phasellus nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam pharetra.</li>
</ul>
</section>
<section class="6u">
<ul class="default">
<li>Pellentesque elit non gravida blandit.</li>
<li>Lorem ipsum dolor consectetuer elit.</li>
<li>Phasellus nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam pharetra.</li>
</ul>
</section>
</div>
</section>
</div>
<div class="4u">
<section>
<header class="major">
<h2>Donec dictum metus</h2>
<span class="byline">Mattis wisi maecenas ligula</span>
</header>
<ul class="contact">
<li>
<span class="address">Address</span>
<span>1234 Somewhere Road #4285 <br />Nashville, TN 00000</span>
</li>
<li>
<span class="mail">Mail</span>
<span>someone#untitled.tld</span>
</li>
<li>
<span class="phone">Phone</span>
<span>(000) 000-0000</span>
</li>
</ul>
</section>
</div>
</div>
<!-- Copyright -->
<div class="copyright">
Design: TEMPLATED Images: Unsplash (CC0)
</div>
</div>
</div>
<a id="middle"></a>
</body>
</html>
thanks
Just use white-space: nowrap on the text element to make the text stay on the same line regardless of the parents size.
And for the images, you need to either add margin or padding on the parent container.
i.e,
.4u p {
white-space: nowrap;
}
and
.4u{
padding: 0.23em;
}
or
.4u{
margin: 0.23em;
}
apparently the footer background went missing too
Edited:
This is the changes I made to your code
.flex {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flex-item + .flex-item {
margin-top: 30px;
}
.image.feature2 {
display: block;
margin: 0 0 7em 0;
}
<div class="row no-collapse-1">
<div class="flex">
<section class="flex-item">
<a class="image feature2"><img
src="https://abrilexame.files.wordpress.com/2016/09/size_960_16_9_google-robert-bunsen.jpg" align="left" =""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="flex-item">
<a class="image feature2"><img src="https://eduardhosp-alemao.com.br/wp-content/uploads/2018/05/Hashtag-Google-Alem%C3%A3o-Sem-Complica%C3%A7%C3%A3o.jpg" align="left"></a>
<p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>
Having just picked up grid I am having some issues when a site is being viewed in mobile. If I set a grid to have a height of 1200px then any elements after this should appear in normal document flow, right?
So how do we deal with this on mobile when a grid is stretched further than its original height value because from what I am experiencing the element after the grid is following the normal document flow and expecting the grid to be finished at 1200px and as a result appears behind the grid element.
Here is a gif to illustrate if anyone could shed light on this it would be super helpful all mark up below also (note on JS fiddle this "bug" does not exhibit itself)
https://gyazo.com/1f3d18693c8df5a339fb5fdc09e8d2c6
HTML
<!DOCTYPE html>
<html lang="" dir="ltr">
<head>
<meta charset="utf-8">
<title>Divine Tofu - Vegan Art and Apparel</title>
<link rel="stylesheet" href = "style/style.css" type = "text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "js/menuscript.js"></script>
</head>
<body>
<nav id="wrapper">
<div class="sideSpacer">
<div id="logoCont">
<img id="logo" src="images/navicons/logo.png" alt="Devine Tofu Logo" />
<div id="logoText"><img id = "logo" class="logotext" src="images/navicons/logotext.png"></div>
</div>
<div id="navWrapper">
<ul>
<a href="#apparel">
<li>Apparel</li>
</a>
<a href="#gal">
<li>Gallery</li>
</a>
<a href="#contactmetitle">
<li>Contact</li>
</a>
<a href="https://www.etsy.com/uk/shop/DivineTofu">
<li>Etsy Store</li>
</a>
</ul>
</div>
<div id="logoCont">
<img id = "logo" class="logobot" src="images/navicons/bottomCircle.png" alt="Devine Tofu Logo" />
</div>
<div id="smWrap">
<ul id="smItems">
<li><img class="icon" src="images/navicons/fb.png" /></li>
<li><img class="icon" src="images/navicons/insta.png" /></li>
<li><img class="icon" src="images/navicons/twitter.png" /></li>
</ul>
</div>
</div>
<a href="https://www.etsy.com/uk/shop/DivineTofu">
Etsy Store
</a>
</nav>
<div id = "grid">
<div id = "grid-item1">
<h1>Commissions</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, felis ut tempus pulvinar, lorem urna imperdiet velit, ac semper lectus dolor at odio. Proin vitae sapien ex. Sed at varius diam. Fusce sit amet nulla lacinia, sodales leo eu, porta urna. Vestibulum rhoncus facilisis nisl vel dapibus. Vestibulum mollis egestas bibendum. Curabitur fringilla felis vitae nunc efficitur viverra. Nunc eleifend faucibus sodales. Donec libero magna, efficitur vel nisi non, tempus tincidunt quam.</p>
<!-- Slider -->
<img src = "images/Gallery/gallery3.png">
</div>
<div id = "grid-item2">
<h1>Warcraft Chibis</h1>
<br>
<p>Sed commodo turpis in nulla ultricies, ac volutpat turpis tristique. Sed a turpis dictum, posuere arcu sit amet, sodales eros. Maecenas in eleifend lacus. Phasellus mattis eros et justo egestas pharetra. Etiam ac tortor ut orci dapibus laoreet.</p>
</div>
<div id = "grid-item3">
<img src = "images/chibi/tcomm5.png" id = "imgtrans">
<img src = "images/chibi/tcomm1.png" id = "imgtrans">
<img src = "images/chibi/tcomm3.png" id = "imgtrans">
<img src = "images/chibi/tcomm2.png" id = "imgtrans">
<img src = "images/chibi/tcomm7.png" id = "imgtrans">
<img src = "images/chibi/tcomm10.png" id = "imgtrans">
</div>
<div id = "grid-item4">
<br>
<h1>Original Artwork</h1>
<br>
<p>Sed commodo turpis in nulla ultricies, ac volutpat turpis tristique. Sed a turpis dictum, posuere arcu sit amet, sodales eros. Maecenas in eleifend lacus. Phasellus mattis eros et justo egestas pharetra. Etiam ac tortor ut orci dapibus laoreet.</p>
</div>
<div id = "grid-item5">
<img src = "images/Gallery/icongall1.png" id = "imgtrans">
<img src = "images/Gallery/icongall6.png" id = "imgtrans">
<img src = "images/Gallery/icongall3.png" id = "imgtrans">
<img src = "images/Gallery/icongall4.png" id = "imgtrans">
<img src = "images/Gallery/icongall5.png" id = "imgtrans">
<img src = "images/Gallery/icongall2.png" id = "imgtrans">
</div>
</div>
<!--This is the red bar -->
<div class = "aftergrid"> </div>
</body>
</html>
CSS
*{
box-sizing: border-box;
}
.aftergrid {
width: 100%;
height: 40px;
background-color: red;
}
#grid {
margin: 0 auto;
display: grid;
max-width: 100%;
height:1200px;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(8,1fr);
grid-gap: 5px 5px;
}
#grid div {
background-color: hsla(126, 100%, 100%, 0.63);
box-shadow: 0px 20px 250px 10px #fffdd0 inset;
}
#grid:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.fixed-width {
max-width: 90%;
margin:0 auto;
}
h1 {
text-align: center;
}
#grid-item1{
background-color: aliceblue;
text-align: center;
}
#grid-item1 p{
position: relative;
margin-bottom: 1em;
padding: 1em;
animation-name: fadeinleft;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
#grid-item1 h1 {
position: relative;
animation-name: fadeinright;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
#keyframes fadeinleft{
0% {left:-50px;
opacity: 0;
}
80% {left: 10px;
}
100% {left:0px;
opacity: 1;}
}
#keyframes fadeinright {
0% {left:50px;
opacity: 0;
}
80% {left: -10px;
}
100% {left:0px;
opacity: 1;}
}
#grid-item1>img{
width: 80%;
}
#grid-item2{
grid-row: 4/5;
background-color: aliceblue;
display: flex;
flex-direction: column;
align-items: center;
}
#grid-item2 p {
padding: 1em;
display: flex;
}
#grid-item3{
grid-row: 5/6;
background-color: aliceblue;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#grid-item4{
grid-row: 6/7;
background-color: aliceblue;
display: flex;
flex-direction: column;
align-items: center;
}
#grid-item4 p {
padding:1em;
}
#grid-item5{
grid-row: 7/8;
background-color: aliceblue;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.icon {
max-width: 80%;
margin: 0 auto;
}
#imgtrans{
width: 32%;
transition: all .2s ease-in-out;
padding: 5px;
overflow: auto;
position: relative;
z-index: 3;
}
#imgtrans:hover{
transform: scale(1.1);
}
#navWrapper ul li:hover {
opacity: 1;
filter: alpha(opacity=0.5);
background-color: rgba(255, 74, 1, 0.54);
}
#navWrapper ul {
margin: 0 auto;
width:96%;
}
#navWrapper ul li {
text-align: center;
margin: 10px 5px 10px 0px;
padding: 1%;
color:white;
opacity: 0.6;
transition: background-color 0.25s, opacity 0.25s ease-in;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
width:98%;
font-size: 28px;
font-family: 'Shadows Into Light Two', cursive;
}
#navWrapper ul a {
text-decoration: none;
}
#parallax {
background-image: url(../images/parallaxbg.png);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
opacity: 0.1;
height: 100%;
width: 100%;
z-index: 0;
margin: 0 auto;
}
.sideSpacer {
position:fixed;
top:0;
left:0;
height:100vh;
width:220px;
background-color: hsla(36, 100%, 50%, 0.80);
z-index: 2;
transition: width .5s ease-out;
}
.sideSpacer:hover {
width:250px;
}
#flexcont{
display: block;
}
#flexlist{
height: 100%;
transition: all 1s;
}
#navIcons {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mobileLogo {
width:100px;
height: 100px;
}
.mobileNavButton {
width: 50px;
height: 50px;
align-self: center;
margin-right: 15px;
}
.mobileNavButton:hover {
cursor: pointer;
}
#smWrap {
width:100%;
}
#smItems{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
#smItems li{
text-align: center;
opacity: 0.6;
width:66px;
margin-bottom: 10px;
transition: width 2s, opacity 0.25s ease-in;
}
#smItems li:hover {
opacity: 0.9;
}
#logoCont{
margin:0 auto;
width:100%;
}
#logoCont{
font-weight: bold;
width: 100%;
opacity: 0.8;
color:white;
transition: width 2s, opacity 0.5s ease-in;
}
#logoCont:hover {
opacity: 1;
filter: alpha(opacity=0.5);
}
#logo{
max-width: 94%;
margin-left:3%;
margin-right:3%;
margin-top: 5%;
}
#logoText {
text-align: center;
}
.logobot{
max-width: 80%;
margin:10%;
padding-top: 1em;
}
#topNav {
width: 100%;
background-color: hsla(36, 100%, 50%, 0.80);
}
/* Tablet */
#media only screen and (min-width: 500px) {
#grid {
max-width: 90%;
margin: 0 auto;
}
.fixed-width {
width: 80%;
margin: 0 auto;
}
}
#media only screen and (max-width: 900px){
.sideSpacer {
display:none;
}
}
/* Desktop */
#media only screen and (min-width: 900px) {
#grid {
width: 70%;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(12,1fr);
grid-gap: 5px 5px;
margin-left: 25%;
}
#grid-item1{
grid-row: 2/12;
grid-column: 5/9;
background-color: aliceblue;
}
#grid-item2{
grid-row: 1/4;
grid-column: 1/4;
background-color: aliceblue;
}
#grid-item3{
grid-row: 4/7;
grid-column: 1/4;
background-color: aliceblue;
}
#grid-item4{
grid-row: 7/10;
grid-column: 1/4;
background-color: aliceblue;
}
#grid-item5{
grid-row: 10/13;
grid-column: 1/4;
background-color: aliceblue;
}
#topNav {
display: none;
}
.aftergrid {
margin-top: 25px;
}
}
I have solved it I should have been using height auto all along.
I have an html5 video tag with a div that has a text caption overlayed and when you scroll in chrome, the text div disappears as it gets near the top or bottom of the screen fold. Sometimes it's as its nearing the top of the screen, sometimes the bottom. I think it depends where the video is on the screen when it's refreshed.
Anyone know what is causing this? I think this is pretty barebones markup.
codepen: https://codepen.io/sharpdesigner/pen/KRgQZZ
screen capture of the issue: https://imgur.com/a/Hn8DWkP
html
<section id="video-landing" class="hide-mobile">
<div class="container">
<div class="row">
<div class="col-md-6 video-caption">
<h1>Lorem ipsum dolor sit</h1>
<p class="big">Quisque varius erat et</p>
<p>Vivamus aliquam lectus est. Nulla vitae fringilla felis. Aenean id elit sit amet sem mattis bibendum eu a felis. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div> <!-- /container -->
<video muted autoplay="autoplay" loop="loop" id="bgvid">
<source src="http://www.mysportresume.com/phone.mp4" type="video/mp4" />
</video>
</section><!-- #section -->
css
body {
height: 2000px;
margin-top: 500px;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
section#video-landing, section#video-landing-mobile {
background: url('../images/video-bg.jpg') no-repeat 0 -175px;
background-size: cover;
}
section#video-landing .row, section#video-landing-mobile .row {
margin: 0;
position: relative;
}
.video-caption {
position: absolute;
max-width: 550px;
top: 165px;
top: 8.5vw;
left: 0;
z-index: 99;
}
.video-caption h1, .video-caption p {
color: #000;
text-align: left;
}
.video-caption h1 {
font-size: 53px;
font-weight: 600;
}
.video-caption p.big {
margin: 0 0 30px;
max-width: 400px;
}
.video-caption p {
font-size: 17px;
}
p.big {
color: #000;
font-size: 27px !important;
font-weight: 300;
line-height: 1.5;
max-width: 850px;
margin: 0 auto;
}
video {
padding-top: 50%;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-55%);
width: 100%;
}
#video-landing, #video-landing-mobile {
width: 100%;
padding-bottom: 30%;
position: relative;
overflow: hidden;
color: white;
}
#video-landing .container, #video-landing-mobile .container {
max-width: 1140px;
}
#video-landing video, #video-landing-mobile video {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
<div class="square loading"></div>
square {
height: 200px;
width: 200px;
margin: 0px auto;
}
loading {
...
}
I'm trying to:
Overlay black color on top of div with 50% transparency (so background is still visible).
Place Loading... text in the absolute center of the div.
How do I achieve this with pure CSS?
display flex is your friend
.square {
height: 200px;
width: 200px;
margin: 0px auto;
background-color: yellow;
position: relative;
}
.loading:after {
content: '...loading';
position: absolute;
top:0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0,0,0,.5);
display: flex;
justify-content: center;
align-items: center;
}
<div class='loading square'></div>
Hope this will help you..
.square {
height: 200px;
width: 200px;
margin: 0px auto;
background: rgba(0,0,0,.5);
display: flex;
justify-content: center;
align-items: center;
}
<div class="square">
<div class="loading">Loading...</div>
</div>
Use this code.
.square {
height: 200px;
width: 200px;
margin: 0px auto;
background:rgba(0,0,0,0.5);
position:relative;
}
.square::after {
color: #fff;
content: "loading...";
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
<div class="square loading"></div>
.container {
display: flex;
height: 200px;
width: 200px;
position: relative;
border: 1px solid: #ddd;
padding: 10px;
}
.loader {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(127, 127, 127, 0.6);
opacity: 0;
transition: all 0.3s ease;
z-index: -1;
}
.loader.active {
opacity: 1;
z-index: 1;
}
<div class="container">
<div class="loader active">Loading</div>
<div class="content">Hai</div>
</div>
In this snippet, you can see the loader div. You can toggle its mode ON/OFF by toggling the class active. Also, the content in the loader (Now it is Loading) div will always be in the center. No matter what the content and its width or height are. Because the flexbox is used here.
Also, the overlay can be changed by changing the background of the loader.
Here is a div with content and a div with class overlay. you can try like this.
.overlay {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: 0px auto;
background: rgba(0,0,0,.7);
display: flex;
justify-content: center;
align-items: center;
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet nisl vel eros pulvinar, eu ultrices lorem interdum. Donec maximus massa ullamcorper est egestas faucibus et ac ligula. </p>
<div class="overlay">Loading...</div>
</div>
I'm currently trying to add some simple padding to the bottom of my testimonial element, so that it doesn't end right after the text.
It seems that no matter what value I enter in padding or padding-bottom, the bottom padding expands a set amount. I'm wondering how to fix this so it displays padding that is specific to the value I set.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
How padding shorthand works....
default declaration of padding looks like this:
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
You can abbreviate that and apply padding to all sides equally:
padding: 10px;
You can abbreviate a little less and apply different values to top and bottom, and right and left.
This equates to padding: top/bottom right/left;
padding: 10px 20px;
You can use full abbreviations to apply different values to each of the 4 sides independently:
This equates to padding: top right bottom left; or:
padding: 10px 20px 5px 20px;
In your CSS you have no top or bottom padding applied to the testimonial class, you only have right/left padding applied:
.testimonial {
padding: 0 5%;
}
You basically have (pseudo code as example):
.testimonial {
padding: top=0 right=5% bottom=0 left=5%;
}
If you want a the same padding all the way around, remove the first 0 in the property:
.testimonial {
padding: 5%;
}
If you want a similar top/bottom padding, then merely adjust the padding property to add top/bottom values:
.testimonial {
padding: 10% 5%;
}
If you want different padding on the top and bottom, then adjust the padding property to add all the values:
.testimonial {
padding: 0 5% 10% 5%;
}
You don't have any bottom padding. Changing to padding: 10px 5% adds 10px padding to the top and bottom, 5% to the left and right.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 10px 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5% 5% 0;
background-color: rgba(50, 173, 140, 0.82);
}
Adding all of the values ( even if 0 ) solved the problem right away.
Also, I am aware that if only two values are given the 1st represents top and bottom.
You don't currently have padding on the bottom of the testimonial div.
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 1% 5%;
background-color: rgba(50, 173, 140, 0.82);
}
Change the padding to the above ... padding: 1% 5%; or to target specifically the bottom ... padding 0 5% 1%; ... do that and you should be good to go, unless I'm misunderstanding your question. Good luck!
Found that having the last set of text in .testimonial in a paragraph tag, it was inserting a line break. So simply took that away and now it seems to be working fine.