Center images filtered with MixItUp plugin - javascript

Explanation
I'm working on this template which uses MixItUp plugin in it. Basically, I have one simple, but difficult (at least for me, because I'm new to web dev) doubt that I'm trying to solve without success: I'd like to center the "filtered images".
Code
You can access it at CodePen here (for some reason CodePen wouldn't load an image other than the second one, so all of the 6 images at CodePen are the same).
You can also download it here.
$(document).ready(function() {
/* ======================================================================== */
/* Filtering
/* ========================================================================= */
$(".project-wrapper").mixItUp();
});
/*=========================================
Basic Style
==========================================*/
body {
line-height: 21px;
font-size: 13px;
}
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
a, a:focus, a:hover {
text-decoration: none;
}
body>section, .footer {
padding: 70px 0;
}
/*=========================================
Mix
==========================================*/
.work-filter {
margin-bottom: 35px;
}
.work-filter ul li {
display: inline-block;
}
.work-filter ul li a {
color: #062033;
display: block;
padding: 5px 17px;
}
.work-filter ul li a:hover, .work-filter ul li a.active {
background-color: rgba(31, 107, 76, 1);
color: #fff;
}
.mix {
display: none;
}
.work-item {
float: left;
width: 25%;
position: relative;
}
.work-item>img {
display: block;
height: 100%;
width: 100%;
}
/*=========================================
Media Queries
==========================================*/
/*============================================================
For Small Desktop
==============================================================*/
#media (min-width: 980px) and (max-width: 1150px) {
/* work */
}
/*============================================================
Tablet (Portrait) Design for a width of 768px
==============================================================*/
#media (min-width: 768px) and (max-width: 979px) {
/* work */
.work-item {
float: left;
width: 33%;
}
}
/*============================================================
Mobile (Portrait) Design for a width of 320px
==============================================================*/
#media only screen and (max-width: 767px) {
/* work */
.work-item {
float: left;
left: 5% !important;
width: 90%;
}
}
/*============================================================
Mobile (Landscape) Design for a width of 480px
==============================================================*/
#media only screen and (min-width: 480px) and (max-width: 767px) {
/* work */
.work-item {
left: inherit !important;
width: 50%;
}
}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- meta charec set -->
<meta charset="utf-8">
<!-- Page Title -->
<title>MixItUp</title>
<!--=========================================
CSS
=========================================-->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/main.css">
<!--=========================================
Essential jQuery Plugins
=========================================-->
<!-- Main jQuery -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- jquery.mixitup.min -->
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<!-- Custom Functions -->
<script src="js/custom.js"></script>
</head>
<body id="body">
<section>
<div class="container">
<div class="row">
<div class="work-filter">
<ul class="text-center">
<li>All</li>
<li>Mix1</li>
<li>Mix2</li>
<li>Mix3</li>
<li>Mix4</li>
<li>Mix5</li>
<li>Mix6</li>
</ul>
</div>
</div>
</div>
<div class="project-wrapper">
<figure class="mix work-item mix1">
<img src="http://imgur.com/KZfjrVT.jpg" alt="">
</figure>
<figure class="mix work-item mix2">
<img src="http://imgur.com/GB54YZR.jpg" alt="">
</figure>
<figure class="mix work-item mix3">
<img src="http://imgur.com/afatbzS.jpg" alt="">
</figure>
<figure class="mix work-item mix4">
<img src="http://imgur.com/GvjT75d.jpg" alt="">
</figure>
<figure class="mix work-item mix5">
<img src="http://imgur.com/KJ9MaK6.jpg" alt="">
</figure>
<figure class="mix work-item mix6">
<img src="http://imgur.com/w3ZFVnq.jpg" alt="">
</figure>
</div>
</section>
</body>
</html>
Thanks in advance,
Luiz.


Try:
.project-wrapper {
text-align:center;
}
.work-item {
float: none;
width: 33%;
position: relative;
}

Related

HTML: Make AOS animations play when page is first loaded

I am trying to make AOS flip-up animations start when the page is initially loaded.
I am refering to the animations applied to img items in <div class="social-media"> , i am using the data-aos="flip-up" animation on these items.
Noob question: can i use multiple animation libraries in the same html file (on different elements ofc)?
Perhaps i should be using a different animation library other than AOS since that one is specifically meant for on-scroll animation, i was wondering if it was possible to do with AOS though. thanks
Currently the animations only start when i scroll down the page or when i refresh the page when already scrolled down. when i scroll up to the top of the page the animation for these images is played in reverse (the images flip down and they become invisible after the animation has finished). I tried finding how to make the animation start when page is loaded, i've seen suggestions to use javascript to animate a scrolling animation as such:
<script>
AOS.init();
AOS.refresh(); // initialize AOS animations
$(document).ready(function(){
$("body,html").animate({
scrollTop: 10
}, 1000);
$("body,html").animate({
scrollTop: 0
}, 1);
});
</script>
But adding this script snippet to my code doesnt seem to do anything (animations still behave the same). My current code:
<!Doctype HTML>
<head>
<title>Troos Bouw</title>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'> <!-- Font -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet"> <!-- On scroll animations -->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script> <!-- On scroll animations -->
</head>
<style type="text/css">
*{margin:0;}
html {
scroll-behavior: smooth;
}
/* Footer styles */
footer {
background-color: rgb(0, 0, 0);
position: fixed;
bottom: 0;
width: 100%;
padding-top: 1vh;
padding-bottom: 1vh;
padding-left: 1vh;
color: #fff;
/* padding: 1em; */
display: flex;
justify-content: space-between;
box-shadow: 0px 2px 10px 0px rgba(255, 255, 255, 0.5);
z-index:1002;
}
footer .social-media ul {
list-style: none;
margin: 0;
padding: 0;
}
footer .social-media ul a{
text-decoration: none; /* remove underline from social-links */
}
ul.footerlist li {
display:inline;
list-style: none;
}
.socials-img{ /* social icons; image size, background */
height: 2.5vh;
background-color: red;
opacity: 1
}
#filler{
background-color: aqua;
height: 1000vh;
}
.header{
position: fixed;
width:100%;
padding-bottom: 15px;
height: 80px;
background-color: rgba(2, 2, 2, 0.7);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
z-index: 1000;
}
.header ul{
text-align: center;
}
.header ul li{
list-style: none;
display: inline-block;
padding-top: 9px;
background-color: red;
}
.header ul li a{
display: inline-block;
text-decoration: none;
text-transform: uppercase;
font: size 20px;
font-family: 'Raleway', sans-serif;
letter-spacing: 2px;
font-weight: 1000;
padding: 25px ;
color: rgb(252, 252, 252);
transition: all ease 0.5s;
border-radius: 20px;
}
.header ul li a:hover{
background-color: rgba(160, 159, 159, 0.5);
}
.logoText{
width:200px;
margin-left: 1vw;
margin-top:2.5vh;
position: fixed;
z-index: 1001;
background-color: red;
}
.logoIcon{
margin-top: 10px ;
height:100px;
margin-left: 90vw;
position: fixed;
z-index: 1001;
background-color: red;
}
</style>
<body>
<header id="theHeader">
<!-- WEBSITE NAME TOP LEFT -->
<img class="logoText" data-aos="flip-down" data-aos-duration="1000" data-aos-delay="100" src="img/troosText.png" >
<img class="logoIcon" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500" src="img/TROOS geen achtergrond 1.png" >
<!-- TOP NAV. MENU -->
<div class="header">
<ul>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="#theHeader">home</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="#about">about</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">service</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">gallery</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">home</a></li>
</ul>
</div> <!-- end of header -->
<!-- <div id="transparentDiv" class="down-arrow">
<div id="arrowText" style="display: flex; align-items: center; justify-content: center; font-size: 200%;">ARROWTEXT</div>
<img style="display: flex; align-items: center; justify-content: center;" src="img/UI/arrow.png" background-color="red ">
</div> Arrow button which when clicked scrolls down -->
<div id="transparentDiv" style="display: flex; flex-direction:column; align-items: center; justify-content: center;">
<img src="img/UI/troos text banner.png" background-color="red">
<img src="img/UI/view more button purple.png" >
<!-- <button class="grey-button">Our Projects
<img src="img/UI/arrow.png" class="arrow">
</button> -->
</div>
<!-- <img src="your-image-url.jpg" class="bg-img" alt="Background Image"> -->
<img src="img/Troos BG lowres_auto_x2.jpg" class="bg-img" alt="Background Image" >
</header>
</header>
<div id="filler">filler</div>
</body>
</section>
<footer>
<div class="social-media">
<h3>Connect with us</h3>
<ul class="footerlist">
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="100" data-aos-once="false" class="socials-img" src="img/socials/Socials_Insta.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="300" data-aos-once="false" class="socials-img" src="img/socials/socials_FB.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="false" class="socials-img" src="img/socials/socials_WA.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="700" data-aos-once="false" class="socials-img" src="img/socials/socials_TW.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="900" data-aos-once="false" class="socials-img" src="img/socials/Socials_G+.png" > </li>
</ul>
</div>
</footer>
<script>
AOS.init();
AOS.refresh(); // initialize AOS animations
</script>
</html>
NOTE: I have added a red background color to the animated elements such that they are easily visible (theyre placed in the bottom left corner). Also added a big div "filler" to the body such that scrolling is possible.
What is strange to me is that in the header i've added some animated elements as well (same AOS animation) which for some reason do load immediately when the page loads even when scrolled all the way up. I've added the code for these header element
Thank you!

To stop the animation while scrolling back you can use attribute to element
data-aos-once="true"
https://github.com/michalsnik/aos#-advanced-settings

Links working on codepen do not work locally

I'm having some issue with HTML links not working locally however they do work on Codepen.
I have 3 pages; when I run them locally the links work on the first two but do not show on the 3rd. The 3rd-page links do show up in Codepen.
I have tried for over a week now trying to figure it out.
This is the Codepen:
https://codepen.io/Randy3/pen/oPvQoY?editors=1100
Here is the code itself
body {
background-color: ;
}
#Captain {
border-radius: 40%;
width: 150px;
height: 150px;
transform: rotate(90deg);
margin: 0px;
}
/* The navbar itself. */
nav ul {
float: right;
display: flex;
}
nav ul li {
list-style: none;
margin-right: 20px;
position: relative;
}
h1 {
text-align: center;
font-family: Comic Sans MS;
color: orange;
}
footer a {
margin-right: 30px;
position: relative;
float: right;
}
.figure-img {
display: grid;
height: 100%;
grid-template-columns: repeat( 3, 1fr);
grid-gap: 20px;
}
img {
display: block;
max-width: 240px;
max-height: 340px;
height: auto;
width: auto;
border: 30%;
}
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="../main.css/main.css">
</head>
<body>
<nav>
<ul>
<li> Home </li>
<li> Profile </li>
<li> Gallery </li>
</ul>
</nav>
<br>
<h1> The works </h1>
<br>
<!-- <section class="figure-img">
<figure class="photo">
<img src="https://i.pinimg.com/originals/ce/02/38/ce02382eed1d9b50fa50b4f4ee1f9600.jpg" alt="ying yang fish">
</figure>
<figure class="photo">
<img src="https://images.pexels.com/photos/18174/reflection-pad-gaming-gamepad.jpg?auto=compress&cs=tinysrgb&h=350" alt="captain">
</figure>
<figure class="photo">
<img src="https://images-na.ssl-images-amazon.com/images/I/61gG0598btL._SX342_.jpg" alt="tophat">
</figure>
<figure class="photo">
<img src="https://img3.stockfresh.com/files/b/beaubelle/m/25/686513_stock-photo-love-bird-with-gift-box-vector.jpg" alt="battlelady">
</figure>
<figure>
<img src="https://us.123rf.com/450wm/naum100/naum1001510/naum100151000017/45714786-gear-hand-drawn-icon-vector.jpg?ver=6" alt="wiretree">
</figure>
<figure>
<img src="https://thumb1.shutterstock.com/mosaic_250/2645560/1123343060/stock-photo-summer-quote-summer-vibes-1123343060.jpg" alt="fox">
</figure>
</section>
-->
<footer>
Codepen
Instagram
</footer>
</body>
</html>
Ps. If it helps the folders are as follows:
Desktop: (the folder is on my desktop)
Foundations (the name of the project folder on the desktop)
Gallery.html ( the name of the html page)
Gallery.html ( the name of the html document)

jQuery Finding Position Of Element Relative to Container

So I have a little bit of a block in making my website, I need to spice it up a bit by adding animations but I can't seem to get this effect working: https://youtu.be/bToBgJYI8Pc. I am using a tutorial (https://css-tricks.com/slide-in-as-you-scroll-down-boxes/) because I don;t know jQuery as I did not think I would need it. My problem is that It seems that jQuery does not find the correct position of the elements I want to animate (They are repositioned with position: relative;)
Example 1. It's like the jQuery is running before the css and not taking any styles into account.
Example 2. It's like the anchors for the elements are a 4th of the page below where they are supposed to be (I don't even know if anchors even exist in css/html/jquery)
Example 3. Here is a GIF to show you what I mean. http://gyazo.com/fe72b683031e88d4247e62ae9e9fe5e8 Look at the text bodies under 'Screamer' 'Swezii' and 'KINZU'
Keep in mind I'm completely new to jQuery so you are going to need to explain in great detail to me what you are talking about if it has to do with jQuery.
Here is the Code
$(document).ready(function() {
(function($) {
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* #author Sam Sehnert
* #desc A small plugin that checks whether elements are within
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
var win = $(window);
var allMods = $(".animated");
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("already-visible");
}
});
win.scroll(function(event) {
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
}
});
});
});
/* Managers */
/* 278 PX */
#managersbg {
background-color: rgba(255, 153, 0, 0.79);
position: absolute;
left: 0px;
top: 495px;
width: 100%;
}
#media (min-width: 288px) {
#managersbg {
top: 495px;
}
}
#media (min-width: 295px) {
#managersbg {
top: 470px;
}
}
#media (min-width: 350px) {
#managersbg {
top: 455px;
}
}
#media (min-width: 358px) {
#managersbg {
top: 460px;
}
}
#media (min-width: 364px) {
#managersbg {
top: 435px;
}
}
#media (min-width: 416px) {
#managersbg {
top: 410px;
}
}
#media (min-width: 450px) {
#managersbg {
top: 420px;
}
}
#media (min-width: 485px) {
#managersbg {
top: 400px;
}
}
#media (min-width: 510px) {
#managersbg {
top: 410px;
}
}
#media (min-width: 540px) {
#managersbg {
top: 420px;
}
}
#media (min-width: 550px) {
#managersbg {
top: 470px;
}
}
#media (min-width: 624px) {
#managersbg {
top: 450px;
}
}
#media (min-width: 650px) {
#managersbg {
top: 460px;
}
}
#media (min-width: 671px) {
#managersbg {
top: 435px;
}
}
#media (min-width: 775px) {
#managersbg {
top: 410px;
}
}
#media (min-width: 850px) {
#managersbg {
top: 420px;
}
}
#media (min-width: 914px) {
#managersbg {
top: 400px;
}
}
h4 {
text-align: center;
font-weight: 500
}
#managers {
position: relative;
top: 15px;
}
#screamer,
#swezii,
#kinzu {
background-image: url(../images/screamer.png);
background-size: 100%;
width: 60px;
height: 60px;
border-radius: 50%;
border-color: rgba(255, 153, 0, 0);
margin: 0 auto;
}
#screamer {
margin-top: 20px;
}
#swezii {
position: relative;
top: 125px;
}
#kinzu {
position: relative;
top: 275px;
}
#manager1,
#manager2,
#manager3 {
position: relative;
}
#manager1 {
top: -115px;
}
#manager1,
#manager2,
#manager3 {
font-weight: 600
}
#manager2 {
top: 45px;
}
#manager3 {
top: 195px;
}
#text1 {
position: relative;
top: -165px;
}
#text2 {
position: relative;
top: -50px;
}
#media (min-width: 550px) {
#text1,
#text2,
#text3 {
position: relative;
left: 50%;
transform: translateX(-25%);
text-align: center;
}
}
p {
margin: 0 auto;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>TheVersionArts Studio</title>
<meta name="description" content="TheVersionArts is a private design studio. We provide clients with quality design at a small cost.">
<meta name="author" content="TheVersionArts">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700' rel='stylesheet' type='text/css'>
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/base.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<!-- Scripts
-------------------------------------------------- -->
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="javascript/animated.js"></script>
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<img src="images/bg.png" id="background">
<div id="headerbg">
<div class="container">
<div class="row">
<div class="five columns">
<img src="images/thv-header.png" id="header">
</div>
<div class="seven columns">
<nav>
<ul>
<li>About
</li>
<li>Contact
</li>
<li>Designers
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div id="aboutbg">
<div class="container2">
<div class="row">
<div class="twelve columns">
<h4 id="about">About Us</h4>
</div>
<div class="animated">
<div class="twelve columns">
<p>TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our
clients. We don't sell graphics, or designs. We sell art and colours.</p>
</div>
</div>
<div class="animated">
<div class="seven columns" id="aboutbar"></div>
</div>
</div>
</div>
</div>
<div id="managersbg">
<div class="container3">
<div class="row">
<div class="animated">
<h4 id="managers">Our Managers</h4>
</div>
</div>
<div class="row">
<div class="animated">
<div class="one-third-column" id="screamer">
</div>
</div>
<div class="animated">
<div class="one-third-column" id="swezii">
</div>
</div>
<div class="animated">
<div class="one-third-column" id="kinzu">
</div>
</div>
</div>
<div class="row">
<div class="animated">
<div class="one-third-column">
<p id="manager1">Screamer</p>
</div>
</div>
<div class="animated">
<div class="one-third-column">
<p id="manager2">Swezii</p>
</div>
</div>
<div class="animated">
<div class="one-third-column">
<p id="manager3">KINZU</p>
</div>
</div>
</div>
<div class="row">
<div class="animated">
<div class="seven columns">
<p id="text1">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
</div>
</div>
<div class="animated">
<div class="seven columns">
<p id="text2">I love the fliudity of art, of any kind!. It is my goal to become a bettter designer myself so I can share my knowldge with others. I am one of the best designers for my price.</p>
</div>
</div>
<div class="animated">
<div class="seven columns">
<p id="text3">I'm that guy chilling on his computer, creating fantastic art for you. You can bet you'll get what you ask for!</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

I commented out your positioning code, that seems to be the main problem.
Here is the css (I added the come-in class to get it working in the jsfiddle:http://jsfiddle.net/kaemgm6y/
I din't alter the javascript at all. Here is the css file I used.
Also I added borders for visual/debugging effect - you can remove those later.
/* Managers */
/* 278 PX */
#managersbg {
background-color: rgba(255, 153, 0, 0.79);
position: absolute;
left: 0px;
top: 495px;
width: 100%;
}
#media (min-width: 288px) {
#managersbg {
top: 495px;
}
}
#media (min-width: 295px) {
#managersbg {
top: 470px;
}
}
#media (min-width: 350px) {
#managersbg {
top: 455px;
}
}
#media (min-width: 358px) {
#managersbg {
top: 460px;
}
}
#media (min-width: 364px) {
#managersbg {
top: 435px;
}
}
#media (min-width: 416px) {
#managersbg {
top: 410px;
}
}
#media (min-width: 450px) {
#managersbg {
top: 420px;
}
}
#media (min-width: 485px) {
#managersbg {
top: 400px;
}
}
#media (min-width: 510px) {
#managersbg {
top: 410px;
}
}
#media (min-width: 540px) {
#managersbg {
top: 420px;
}
}
#media (min-width: 550px) {
#managersbg {
top: 470px;
}
}
#media (min-width: 624px) {
#managersbg {
top: 450px;
}
}
#media (min-width: 650px) {
#managersbg {
top: 460px;
}
}
#media (min-width: 671px) {
#managersbg {
top: 435px;
}
}
#media (min-width: 775px) {
#managersbg {
top: 410px;
}
}
#media (min-width: 850px) {
#managersbg {
top: 420px;
}
}
#media (min-width: 914px) {
#managersbg {
top: 400px;
}
}
h4 {
text-align: center;
font-weight: 500
}
h2{
text-align:center;
}
div.animated{
border-width:1px;
border-style:solid;
}
#managers {
position: relative;
top: 15px;
}
#screamer,
#swezii,
#kinzu {
background-image: url(../images/screamer.png);
background-size: 100%;
width: 60px;
height: 60px;
border-radius: 50%;
border-color: rgba(255, 153, 0, 0);
margin: 0 auto;
}
/*#screamer {
margin-top: 20px;
}
#swezii {
position: relative;
top: 125px;
}
#kinzu {
position: relative;
top: 275px;
}
#manager1,
#manager2,
#manager3 {
position: relative;
}*/
/*#manager1 {
top: -115px;
}
#manager1,
#manager2,
#manager3 {
font-weight: 600
}
#manager2 {
top: 45px;
}
#manager3 {
top: 195px;
}*/
/*#text1 {
position: relative;
top: -165px;
}
#text2 {
position: relative;
top: -50px;
}*/
#media (min-width: 550px) {
#text1,
#text2,
#text3 {
position: relative;
left: 50%;
/*transform: translateX(-25%);*/
text-align: center;
}
}
p {
margin: 0 auto;
text-align: center;
}
.come-in {
transform: translateY(150px);
animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
animation-duration: 0.6s;
}
.already-visible {
transform: translateY(0);
animation: none;
}
#keyframes come-in {
to { transform: translateY(0); }
}
Also I changed the HTML. I combined some of the divs. They can have multiple classes in the same div like so:
<div class="animated one-third-column" id="kinzu">
</div>
The other thing that helped was putting the headers (manager names and the paragraph in the same div - this makes it almost impossible to get them wrongly positioned on top of each other.
Here is my altered HTML (needs more cleanup, but you get the idea):
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<img src="images/bg.png" id="background">
<div id="headerbg">
<div class="container">
<div class="row">
<div class="five columns">
<img src="images/thv-header.png" id="header">
</div>
<div class="seven columns">
<nav>
<ul>
<li>About
</li>
<li>Contact
</li>
<li>Designers
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div id="aboutbg">
<div class="container2">
<div class="row">
<div class="twelve columns">
<h4 id="about">About Us</h4>
</div>
<div class="animated">
<div class="twelve columns">
<p>TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our
clients. We don't sell graphics, or designs. We sell art and colours.</p>
</div>
</div>
<div class="animated">
<div class="seven columns" id="aboutbar"></div>
</div>
</div>
</div>
</div>
<div id="managersbg">
<div class="container3">
<div class="row">
<div class="animated">
<h4 id="managers">Our Managers</h4>
</div>
</div>
<div class="row">
<div class="animated one-third-column" id="screamer">
</div>
<div class="animated one-third-column" id="swezii">
</div>
<div class="animated one-third-column" id="kinzu">
</div>
</div>
<div class="row">
<div class="animated">
<div class="one-third-column">
<h2 id="manager1">Screamer</h2>
<p id="text1">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
</div>
</div>
<div class="animated">
<div class="one-third-column">
<h2 id="manager2">Swezii</h2>
<p id="text2">I love the fliudity of art, of any kind!. It is my goal to become a bettter designer myself so I can share my knowldge with others. I am one of the best designers for my price.</p>
</div>
</div>
<div class="animated">
<div class="one-third-column">
<h2 id="manager3">KINZU</h2>
<p id="text3">I'm that guy chilling on his computer, creating fantastic art for you. You can bet you'll get what you ask for!</p>
</div>
</div>
</div>
<div class="row">
<div class="animated">
<div class="seven columns">
</div>
</div>
<div class="animated">
<div class="seven columns">
</div>
</div>
<div class="animated">
<div class="seven columns">
</div>
</div>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>

How to implement this layout

I found a web page which shows only 3 events in a grid and when the screen is re-sized less a certain width, it not only relocates the 3 events into a list but also changes the layout inside each event.
I have tried many ways to make it look like that web page, but have not got any luck.
this is the web page
And this is what I have done: CodePen
/* -- DEFAULTS -- */
div, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
/* -- FLUID GRID STYLES -- */
#Grid {
margin-bottom: 40px;
text-align: justify;
font-size: 0.1px;
}
#Grid li {
display: inline-block;
background: #eee;
width: 23%;
padding-top: 23%;
/* Used instead of height to give elements fluid, width-based height */
margin-bottom: 2.5%;
}
#Grid:after {
content: 'haha';
display: inline-block;
width: 100%;
border-top: 10px dashed #922d8d;
/* Border added to make element visible for demonstration purposes */
}
ul li .icon {
width: 100%;
display: table;
min-height: 300px;
height: 300px;
padding: 0;
background: #545454 url(https://www.nike.com/events-registration/client-dist/assets/images/multi-card-bg.png) no-repeat center center;
}
#Grid .placeholder {
padding: 0;
border-top: 10px solid #922d8d;
/* Border added to make element visible for demonstration purposes */
}
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */
/* 3 COL */
#media (max-width: 800px) {
#Grid li {
width: 31%;
padding-top: 31%;
margin-bottom: 3%;
}
}
/* 2 COL */
#media (max-width: 600px) {
#Grid li {
width: 48%;
padding-top: 48%;
margin-bottom: 4%;
}
}
/* SINGLE COL */
#media (max-width: 400px) {
#Grid li {
width: 100%;
padding-top: 100%;
margin-bottom: 5%;
}
}
/* -- LEGEND STYLES (NOT PART OF GRID FRAMEWORK) -- */
h1 {
font: 600 20px"Helvetica Neue";
text-align: right;
text-transform: uppercase;
}
label {
padding: 8px 15px;
margin-bottom: 20px;
display: block;
font: 100 22px"Helvetica Neue";
border-left: 10px solid #922d8d;
}
label:last-of-type {
border-left: 10px dotted #922d8d;
}
p {
font: 200 15px/1.5em"Helvetica Neue";
max-width: 400px;
margin-bottom: 30px;
color: #333;
}
Update
Here is my updated code. The problem is I cannot place the "1 JAN" and "NEW YEAR" in the middle of the div.
Updat 2
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="row hidden-xs icon">
<div class="title">1 JAN</div>
<div class="event-time"><i>8:00PM</i></div>
<div class="sub-title">This Event is Full</div>
</div>
<div class="row hidden-xs sub-icon">
<div><span>LRC Thursday Night Run test long long</span></div>
<div>
<input type="button" class="btn btn-primary" value="Register" />
</div>
</div>
<div class="row hidden-sm event-sm">
<div class="col-xs-4 event-left">
<div class="event-day">01</div>
<div class="event-month">JAN</div>
<div class="event-time"><i>8:00PM</i></div>
</div>
<div class="col-xs-8 event-right">
<div class="event-notice">This event is full</div>
<div class="event-title">NIKE RUN 10 KM</div>
<div class="event-slogan">Come run with us</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">14 FEB</h1>
<p class="text-center hidden-xs">Valentine</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>February 14th</i>
</div>
<div class="col-xs-8">Ah! Lovey Dovey Day... Where is my chocolate?</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">1 APR</h1>
<p class="text-center hidden-xs">April Fool</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>April 1st</i>
</div>
<div class="col-xs-8">Your car just got stolen.... JUST KIDDING!!!</div>
</div>
</div>
</div>
</div>
</div>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

If you are already using Bootstrap, you already have this capability. Use hidden-.. and the col-xx-... classes to make your page responsive.
See this example: http://embed.plnkr.co/IH4WeZ/
It's all done using bootstrap css. The trick is to hide stuffs at certain media query and show them whenever appropriate.
I only coded it be responsive at small and extra small size, so on medium and large it's a bit bonker... but you get the idea...

You could use the Bootstrap grid system to do something like this.
You could use a combination of the columns, and offset to achieve this.
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
That will span three columns across the full width of the page. You could experiment with smaller width columns, and adding an offset to the first one to push it away from the left edge.
http://getbootstrap.com/css/#grid-offsetting

If you want to achieve a similar effect, try and replicate it with minimal code and work from there.
Here is a simple example I have knocked up to get the layout working:
http://codepen.io/anon/pen/OPeXgj
HTML
<ul class="events">
<li>Event Name</li>
<li>Event Name</li>
<li>Event Name</li>
</ul>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.events {
clear: both;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.events li {
float: left;
clear: both;
width: 100%;
background: yellow;
margin: 0;
padding: 10px;
}
#media only screen and (min-width: 768px) {
.events li {
width: 33.3%;
clear: none;
}
}
Using a mobile first approach, child items are styled with a width: 100%; and clear: both; Then, with a simple media query, I float them left and set a width to around a 3rd (33.3%) (there could be a better way, but this was a quick fix).
If you're using a grid system, it may be even easier. I would look into Bootstrap or Foundation, as many of these problems have already been solved many times over.
Good luck!

Last resort solution is to code two versions. One for mobile and another one for desktop. Then use media queries to hide one on mobile resolution and the other on desktop.
This will add some extra load on the page, but it should do it.

How to fix footer overlapping content when resizing

I have a problem with a template. On a large screen, it's look fine, like this:
But when I resize my browser, the content won't push the footer down. Here is a picture:
Here is my code, which is too long so forgive me.
index.php
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<!-- simple code -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- simple code -->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Begin page content -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
<div class="intro-text">
<!-- simple intro -->
</div>
</div>
</div>
</div>
</header>
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<!-- some social networks -->
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About Freelancer</h3>
<p>Freelance is a free to use, open source Bootstrap theme created by Start Bootstrap.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Author <?php echo date("Y"); ?>
</div>
</div>
</div>
</div>
</footer>
Here is my Css, which is also too long so forgive me( I deleted some irrelevant code ).
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 340px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
/*!
* Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
overflow-x: hidden;
}
header {
text-align: center;
color: #fff;
background: #18bc9c;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
#media(min-width:768px) {
header .container {
padding-top: 200px;
padding-bottom: 69px;
}
header .intro-text .name {
font-size: 4.75em;
}
header .intro-text .skills {
font-size: 1.75em;
}
}
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
background-color:#233140;
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2c3e50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
How can I solve this, so the page content will push the footer down...at any size of browser.
Any help is appreciated.

Removing position:absolute; from the footer in the css appears to work. Perhaps consider having it set to absolute at wider screen sizes using media queries if having position:absolute is absolutely (pardon the pun) necessary.
I provided a snippet with the absolute positioning removed, as well as the potential addition to a media query, which is commented out, but there to demonstrate.
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
width: 100%;
/* Set the fixed height of the footer here */
height: 340px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
/*!
* Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
overflow-x: hidden;
}
header {
text-align: center;
color: #fff;
background: #18bc9c;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
#media(min-width:768px) {
header .container {
padding-top: 200px;
padding-bottom: 69px;
}
header .intro-text .name {
font-size: 4.75em;
}
header .intro-text .skills {
font-size: 1.75em;
}
/*
****Optional****
footer{
position:absolute;
bottom:0px;
}*/
}
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar {
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
background-color: #233140;
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2c3e50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<!-- simple code -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- simple code -->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Begin page content -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
<div class="intro-text">
<!-- simple intro -->
</div>
</div>
</div>
</div>
</header>
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>3481 Melrose Place
<br>Beverly Hills, CA 90210</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<!-- some social networks -->
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About Freelancer</h3>
<p>Freelance is a free to use, open source Bootstrap theme created by Start Bootstrap.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Author
<?php echo date( "Y"); ?>
</div>
</div>
</div>
</div>
</footer>

The way Bootstrap sees how you want to change sizes for different screen sizes are in the column size identifiers. And each number is a fraction of 12.
<div class="footer-col col-md-4">
means you want the footer to take 4/12 of the screen on devices medium or higher. To designate that you want it to be different on different sizes, you would put something like
<div class="footer-col col-md-4 col-sm-12">
to mean that you want it to take up 4/12 of the screen on medium devices or larger, and 12/12 of the screen on small devices up to medium.

You have inline styling on your header <img> tag.
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
I would recommend trying to use a new class on that <img> tag, then apply a new #media query to adjust height for different screen sizes.
Also, having the .img-responsive class on that element may also be conflicting with the inline height styling.

Add the class "position-relative"
<!-- Footer Starts -->
<div class="container-fluid">
<div class="navbar fixed-bottom position-relative">
<p>You Footer Content<p>
</div>
</div>
<!-- Footer ends -->
Works in Bootstrap v4.3

Categories

Resources