jQuery Finding Position Of Element Relative to Container - javascript

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>

Related

My hamburger menu isn't displaying correctly

Hello I'm working on a frontend mentor challenge and encountered a bug when I click my hamburger menu it seems to remove the middle bar, my intentions were to make an X appear and have the li's come easing in from the left, can anyone tell me what I did wrong? I'm teaching myself how to develop and maintain sites.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Angel News</title>
</head>
<body>
<div id="con">
<nav class="navbar">
W.
<ul class="nav-menu">
<li class="nav-menu">
Home
</li>
<li class="nav-menu">
News
</li>
<li class="nav-menu">
Popular
</li>
<li class="nav-menu">
Trending
</li>
<li class="nav-menu">
Catergories
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
<div class="section1">
<img src="" alt="">
<h2 class="section1-h2">The Bright Future of Web 3.0?</h2>
<p class="section1-p">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people. But is it really fulfilling it's promise?</p>
Read More
</div>
<div class="section2">
<div class="section2-inside">
<h3 class="section2-h3">New</h3>
<div class="insidesection2-1">
<h4>Hydrogen VS Electric Cars</h4>
<p>Will hydrogen-fueled cars ever catch up to EV's?</p>
</div>
<div class="insidesection2-2">
<h4>The Downsides og AI Artistry</h4>
<p>What are the possible adverse effects of on-demand AI image generation?</p>
</div>
<div class="insidesection2-3">
<h4>Is VC Funding Drying Up?</h4>
<p>Private funding by VC firms is down 50% YOY. We take a look at what that means.</p>
</div>
</div>
</div>
<div class="section3">
<div class="section3-1">
<img src="" alt="">
<div class="insidesection3-1">
<h4 class="insidesection3-1-h4">01</h4>
<h5 class="insidesection3-1-h5">Reviving Retro PCs</h5>
<p>What happens when old PCs are given modern upgrades?</p>
</div>
</div>
<div class="section3-2">
<img src="" alt="">
<div class="insidesection3-2">
<h4 class="insidesection3-2-h4">02</h4>
<h5 class="insidesection3-2-h5">Top 10 Laptops of 2023</h5>
<p>Our best picks for various needs and budgets.</p>
</div>
</div>
<div class="section3-3">
<img src="" alt="">
<div class="insidesection3-3">
<h4 class="insidesection3-3-h4">03</h4>
<h5 class="insidesection3-3-h5">The Growth of Gaming</h5>
<p>How the pandemic has sparked fresh opportunities.</p>
</div>
</div>
</div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.navbar {
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.nav-branding {
font-size: 2rem;
}
.nav-link {
transition: 0.7s ease;
}
.nav-link:hover {
color: hsl(35deg, 77%, 62%);
}
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 768px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: rotateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: rotateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
gap: 0;
flex-direction: column;
width: 100%;
background-color: black;
text-align: center;
transition: 0.3s;
}
.nav-item {
margin: 16px 0;
}
.nav-menu.active {
left: 0;
}
}
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active')
navMenu.classList.toggle('active')
})

Please try to use translateY instead of RotateY in your css #media tag as follows:
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

Why are my modal button images showing on top of my modal boxes?

So here's the thing: A project I'm doing for film school involves making a website. I am in absolutely no way supposed to be a professional (or even a good) programmer (in fact I'm pretty bad), but I wanted to make an old school 90s/2000s styled website.
I modified some code for modal boxes from https://www.w3schools.com/howto/howto_css_modals.asp and it worked out fine until I needed more modal boxes, because now, when I open the modal boxes, the one which is written first in the code shows up with the backdrop and everything, but the clickable image buttons for the subsequent modal boxes show up on top of the box and its backdrop. I'm not sure what's going on. I tried putting all the code in a single <script> tag and all the css in one <style> tag too, but it did nothing. I think I just don't know what I'm doing.
Sorry for the variable, id and class names being in Portuguese, I am Brazilian and this is for Brazilian college.
PS.: I realize there are like a trillion other huge HTML, CSS and JS sins in my code (such as all CSS and JSS being inline), so it's understandable if you cringe or puke instantly by looking at my code. This is because I hadn't coded in years and didn't have time to relearn the real logic behind everything, and also I am using a terrible sitebuilder which barely lets me use HTML, so I had to trick the site by writing all the code inside an HTML box widget. I think you have to pay for premium to actually use different CSS and JS files. So this is all workarounds on top of workarounds on top of workarounds.
<html>
<head>
</head>
<body bgcolor="#FF6842">
<style>
.container {
position: fixed;
top:150px;
}
.container2 {
position:relative;
right:20px;
}
.container3 {
position:relative;
}
#intro-j {
position:fixed;
top:196px;
left:44px;
color:#ffff00;
}
#balao {
position:fixed;
top:370px;
left:966px;
}
#bem-vindo {
position:fixed;
top:100px;
left:423px;
}
#logoblog {
position:fixed;
top:-2px;
left:51px;
}
#gaiola {
position:fixed;
top:450px;
left:330px;
}
#lona {
position:fixed;
left:248px;
top:15px;
}
#counter {
position:fixed;
top:540px;
left:170px;
}
#janela {
position:fixed;
top:170px;
left:15px;
}
#circo-gif-j {
position:fixed;
top:370px;
left:47px;
}
#menu {
position:fixed;
top:550px;
left:44px;
color:#00ff00;
}
#lc {
color:#00ff00;
}
#mesabolo {
position:fixed;
top:540px;
left:960px;
}
#bolo {
position:fixed;
top:470px;
left:1018px;
}
#computador {
position:fixed;
top:394px;
left:700px;
}
</style>
<div class="container">
<img src="https://i.imgur.com/0uGRDgL.png" alt="Cortinas" height="600px" width="1250px" id="bg">
<div id="mesabolo" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/MKP2Ezx.png" height="170px">
<div id="janela" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/TEFvChC.png">
<div id="intro-j" class="container">text</div>
<div id="circo-gif-j" class="container">
<img src="https://www.gif.ovh/portuguese-gif/Palha%C3%A7o%20Gif/Palha%C3%A7o%20Gif%20(21).gif">
</div>
<div id="menu" class="container"><b>• Cartas<br>• Contato</b></div>
</div>
<div id="lona" class="container" class="container2">
<img src="https://i.imgur.com/ZHX8oEe.png" height="700px">
<div id="counter" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/pGkiIuH.png" height="200px" width="850px">
<div id="bem-vindo" class="container">
<img src="https://gifimage.net/wp-content/uploads/2018/05/seja-bem-vindo-gif-6.gif">
<div id="balao" class="container">
<img src="https://i.imgur.com/pcJDYM7.gif" height="90px">
</div>
<div id="logoblog" class="container">
<img src="https://i.imgur.com/CLC5YzA.gif">
<!--GAIOLA-->
<div id="gaiola" class="container">
<img src="https://i.imgur.com/zlmgazC.gif">
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: fixed;
background-color: #ffe38a;
height: 310px;
margin:auto;
left:210px;
top:190px;
}
.modal-body {padding: 2px 16px;}
#modal-text {
color:#c83434;
}
</style>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 1</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("gaiola");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal) {
modal.style.display = "none";
modal2.style.display = "none";
}
});
</script>
</div>
<!--BOLO-->
<div id="bolo" class="container">
<img src="https://i.imgur.com/RjoYsYb.gif" height="90px">
<style>
/* The Modal (background) */
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content2 {
position: fixed;
background-color: #ffe38a;
height: 350px;
margin:auto;
left:210px;
top:190px;
}
.modal-body2 {padding: 2px 16px;}
#modal-text2 {
color:#c83434;
}
</style>
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content2">
<div class="modal-body2">
<p id="modal-text2">modal text 2<br></p>
</div>
</div>
</div>
<script>
// Get the modal
var modal2 = document.getElementById("myModal2");
// Get the button that opens the modal
var btn2 = document.getElementById("bolo");
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
modal.style.display = "none";
}
});
</script>
</div>
<!--COMPUTADOR-->
<div id="computador" class="container">
<img src="https://i.imgur.com/s4sHQ1V.gif" height="200px">
<style>
/* The Modal (background) */
.modal3 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content3 {
position: fixed;
background-color: #ffe38a;
height: 350px;
margin:auto;
left:210px;
top:190px;
}
.modal-body3 {padding: 2px 16px;}
#modal-text3 {
color:#c83434;
}
</style>
<div id="myModal3" class="modal3">
<!-- Modal content -->
<div class="modal-content3">
<div class="modal-body3">
<p id="modal-text3">modal text 3</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal3 = document.getElementById("myModal3");
// Get the button that opens the modal
var btn3 = document.getElementById("computador");
// When the user clicks the button, open the modal
btn3.onclick = function() {
modal3.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal3) {
modal3.style.display = "none";
}
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I am not 100% sure if I understood what you wanted to implement. However, The cause of the problem here might be from the complexity of how everything is in one place which leaves large room for mistakes.
Please try to
Place all your CSS should be placed in the head section if you won't use an external file.
Place your JavaScript properly in the head/before end of the body tag based on what it does. if you won't use an external file.
You don't need to duplicate CSS more than once if the group of elements will share the same style. just use the same class across those elements.
The modal should be pushed down to the bottom of the page to make it easier for your to modify your HTML file.
In cases like this one you should use loops and arrays to minimize the repition of actions (I do understand that you are completely new to it, this is why I am trying to tell you what you can look up.)
I modified your code and applied some changes now all you need to do if you will add a new modal is add a new line to the Array with both the modal's id and its container's id.
Your full page code be found at the bottom of my answer, the following is a snippet for you to preview the code. if this not what you needed can you please explain further maybe I can help?
//Array with a list of the modal id and conatiner id
var modalsArray = [
["modal1", "gaiola"],
["modal2", "bolo"],
["modal3", "computador"],
];
//stores the currently visible modal
var visibleModal;
// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", function(e) {
if (e.target == visibleModal) {
visibleModal.classList.remove("visible");
visibleModal = "";
document.getElementById('overlay').style.display = 'none';
}
});
//Iterate through the modalsArray and add a click event listener
for (let modal = 0; modal < modalsArray.length; modal++) {
document
.getElementById(modalsArray[modal][1])
.addEventListener("click", function(e) {
for (let mod = 0; mod < modalsArray.length; mod++) {
if (
e.target.offsetParent ==
document.getElementById(modalsArray[mod][1])
) {
//add the visible class to show the modal
document
.getElementById(modalsArray[mod][0])
.classList.add("visible");
//store the currently visible modal in the visible modal variable
visibleModal = document.getElementById(modalsArray[mod][0]);
// stops the click event from propagating up which would hide the modal again
document.getElementById('overlay').style.display = 'block';
e.stopPropagation();
}
}
});
}
.container {
position: fixed;
top: 150px;
}
.container2 {
position: relative;
right: 20px;
}
.container3 {
position: relative;
}
#intro-j {
position: fixed;
top: 196px;
left: 44px;
color: #ffff00;
}
#balao {
position: fixed;
top: 370px;
left: 966px;
}
#bem-vindo {
position: fixed;
top: 100px;
left: 423px;
}
#logoblog {
position: fixed;
top: -2px;
left: 51px;
}
#gaiola {
position: fixed;
top: 450px;
left: 330px;
}
#lona {
position: fixed;
left: 248px;
top: 15px;
}
#counter {
position: fixed;
top: 540px;
left: 170px;
}
#janela {
position: fixed;
top: 170px;
left: 15px;
}
#circo-gif-j {
position: fixed;
top: 370px;
left: 47px;
}
#menu {
position: fixed;
top: 550px;
left: 44px;
color: #00ff00;
}
#lc {
color: #00ff00;
}
#mesabolo {
position: fixed;
top: 540px;
left: 960px;
}
#bolo {
position: fixed;
top: 470px;
left: 1018px;
}
#computador {
position: fixed;
top: 394px;
left: 700px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: fixed;
background-color: #ffe38a;
height: 50%;
width: 50%;
margin: auto;
left: 25%;
top: 25%;
}
.modal-body {
padding: 2px 16px;
}
#modal-text {
color: #c83434;
}
.visible {
display: block !important;
z-index: 3;
}
#overlay {
position: fixed;
/* Sit on top of the page content */
display: none;
/* Hidden by default */
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
/* Black background with opacity */
z-index: 2;
/* Specify a stack order in case you're using a different order for other elements */
cursor: pointer;
/* Add a pointer on hover */
}
<body bgcolor="#FF6842">
<div class="container">
<img src="https://i.imgur.com/0uGRDgL.png" alt="Cortinas" height="600px" width="1250px" id="bg" />
<div id="mesabolo" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/MKP2Ezx.png" height="170px" />
<div id="janela" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/TEFvChC.png" />
<div id="intro-j" class="container">text</div>
<div id="circo-gif-j" class="container">
<img src="https://www.gif.ovh/portuguese-gif/Palha%C3%A7o%20Gif/Palha%C3%A7o%20Gif%20(21).gif" />
</div>
<div id="menu" class="container">
<b>• Cartas<br />• Contato</b>
</div>
</div>
<div id="lona" class="container" class="container2">
<img src="https://i.imgur.com/ZHX8oEe.png" height="700px" />
<div id="counter" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/pGkiIuH.png" height="200px" width="850px" />
<div id="bem-vindo" class="container">
<img src="https://gifimage.net/wp-content/uploads/2018/05/seja-bem-vindo-gif-6.gif" />
<div id="balao" class="container">
<img src="https://i.imgur.com/pcJDYM7.gif" height="90px" />
</div>
<div id="logoblog" class="container">
<img src="https://i.imgur.com/CLC5YzA.gif" />
<!--GAIOLA-->
<div id="gaiola" class="container">
<img src="https://i.imgur.com/zlmgazC.gif" />
</div>
<!--BOLO-->
<div id="bolo" class="container">
<img src="https://i.imgur.com/RjoYsYb.gif" height="90px" />
</div>
<!--COMPUTADOR-->
<div id="computador" class="container">
<img src="https://i.imgur.com/s4sHQ1V.gif" height="200px" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 1 - GAIOLA-->
<div id="modal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 1</p>
</div>
</div>
</div>
<!-- Modal 2 - Computador-->
<div id="modal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 2</p>
</div>
</div>
</div>
<!-- Modal 3 - Computador-->
<div id="modal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 3</p>
</div>
</div>
</div>
<div id="overlay"></div>
<html>
<head>
<style>
.container {
position: fixed;
top: 150px;
}
.container2 {
position: relative;
right: 20px;
}
.container3 {
position: relative;
}
#intro-j {
position: fixed;
top: 196px;
left: 44px;
color: #ffff00;
}
#balao {
position: fixed;
top: 370px;
left: 966px;
}
#bem-vindo {
position: fixed;
top: 100px;
left: 423px;
}
#logoblog {
position: fixed;
top: -2px;
left: 51px;
}
#gaiola {
position: fixed;
top: 450px;
left: 330px;
}
#lona {
position: fixed;
left: 248px;
top: 15px;
}
#counter {
position: fixed;
top: 540px;
left: 170px;
}
#janela {
position: fixed;
top: 170px;
left: 15px;
}
#circo-gif-j {
position: fixed;
top: 370px;
left: 47px;
}
#menu {
position: fixed;
top: 550px;
left: 44px;
color: #00ff00;
}
#lc {
color: #00ff00;
}
#mesabolo {
position: fixed;
top: 540px;
left: 960px;
}
#bolo {
position: fixed;
top: 470px;
left: 1018px;
}
#computador {
position: fixed;
top: 394px;
left: 700px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: fixed;
background-color: #ffe38a;
height: 50%;
width: 50%;
margin: auto;
left: 25%;
top: 25%;
}
.modal-body {
padding: 2px 16px;
}
#modal-text {
color: #c83434;
}
.visible {
display: block !important;
z-index: 3;
}
#overlay {
position: fixed;
/* Sit on top of the page content */
display: none;
/* Hidden by default */
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
/* Black background with opacity */
z-index: 2;
/* Specify a stack order in case you're using a different order for other elements */
cursor: pointer;
/* Add a pointer on hover */
}
</style>
</head>
<body bgcolor="#FF6842">
<div class="container">
<img src="https://i.imgur.com/0uGRDgL.png" alt="Cortinas" height="600px" width="1250px" id="bg" />
<div id="mesabolo" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/MKP2Ezx.png" height="170px" />
<div id="janela" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/TEFvChC.png" />
<div id="intro-j" class="container">text</div>
<div id="circo-gif-j" class="container">
<img src="https://www.gif.ovh/portuguese-gif/Palha%C3%A7o%20Gif/Palha%C3%A7o%20Gif%20(21).gif" />
</div>
<div id="menu" class="container">
<b>• Cartas<br />• Contato</b>
</div>
</div>
<div id="lona" class="container" class="container2">
<img src="https://i.imgur.com/ZHX8oEe.png" height="700px" />
<div id="counter" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/pGkiIuH.png" height="200px" width="850px" />
<div id="bem-vindo" class="container">
<img src="https://gifimage.net/wp-content/uploads/2018/05/seja-bem-vindo-gif-6.gif" />
<div id="balao" class="container">
<a href="javascript:alert('---');"><img src="https://i.imgur.com/pcJDYM7.gif"
height="90px" /></a>
</div>
<div id="logoblog" class="container">
<img src="https://i.imgur.com/CLC5YzA.gif" />
<!--GAIOLA-->
<div id="gaiola" class="container">
<img src="https://i.imgur.com/zlmgazC.gif" />
</div>
<!--BOLO-->
<div id="bolo" class="container">
<img src="https://i.imgur.com/RjoYsYb.gif" height="90px" />
</div>
<!--COMPUTADOR-->
<div id="computador" class="container">
<img src="https://i.imgur.com/s4sHQ1V.gif" height="200px" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 1 - GAIOLA-->
<div id="modal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 1</p>
</div>
</div>
</div>
<!-- Modal 2 - Computador-->
<div id="modal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 2</p>
</div>
</div>
</div>
<!-- Modal 3 - Computador-->
<div id="modal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 3</p>
</div>
</div>
</div>
<div id="overlay"></div>
<!--Scripts start-->
<script>
//Array with a list of the modal id and conatiner id
var modalsArray = [
["modal1", "gaiola"],
["modal2", "bolo"],
["modal3", "computador"],
];
//stores the currently visible modal
var visibleModal;
// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", function (e) {
if (e.target == visibleModal) {
visibleModal.classList.remove("visible");
visibleModal = "";
document.getElementById('overlay').style.display = 'none';
}
});
//Iterate through the modalsArray and add a click event listener
for (let modal = 0; modal < modalsArray.length; modal++) {
document
.getElementById(modalsArray[modal][1])
.addEventListener("click", function (e) {
for (let mod = 0; mod < modalsArray.length; mod++) {
if (
e.target.offsetParent ==
document.getElementById(modalsArray[mod][1])
) {
//add the visible class to show the modal
document
.getElementById(modalsArray[mod][0])
.classList.add("visible");
//store the currently visible modal in the visible modal variable
visibleModal = document.getElementById(modalsArray[mod][0]);
// stops the click event from propagating up which would hide the modal again
document.getElementById('overlay').style.display = 'block';
e.stopPropagation();
}
}
});
}
</script>
</body>
</html>

Print thorugh css/html/js in preivew/pdf mixed pages layout

Refer css Landscape printing
and below edited code
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
body {
margin: 0;
background: #CCCCCC;
}
div.A4 {
margin: 10px auto;
border: solid 1px black;
display: block;
page-break-after: always;
width: 209mm;
height: 296mm;
overflow: hidden;
background: white;
}
div.A3 {
margin: 10px auto;
border: solid 1px black;
display: block;
page-break-after: always;
width: 297mm;
height: 420mm;
overflow: hidden;
background: white;
}
div.A4landscape-parent {
width: 296mm;
height: 209mm;
}
div.A3landscape-parent {
width: 420mm;
height: 297mm;
}
div.A4landscape {
width: 296mm;
height: 209mm;
}
div.A3landscape {
width: 420mm;
height: 297mm;
}
div.content {
padding: 10mm;
}
body,
div,
td {
font-size: 13px;
font-family: Verdana;
}
#media print {
body {
background: none;
}
div.A4 {
width: 209mm;
height: 296mm;
}
div.A3 {
width: 297mm;
height: 420mm;
}
div.A4landscape {
transform: rotate(270deg) translate(-296mm, 0);
transform-origin: 0 0;
}
div.A3landscape {
transform: rotate(270deg) translate(-296mm, 0);
transform-origin: 0 0;
}
div.A4portrait,
div.A4landscape,
div.A4 {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.A3portrait,
div.A3landscape,
div.A3 {
margin: 0;
padding: 0;
border: none;
background: none;
}
}
</style>
</head>
<body>
<div class="A4">
<div class="content">
A4 page in Portrait mode
</div>
</div>
<div class="A4 A4landscape-parent">
<div class="A4landscape">
<div class="content">
A4 page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="A4">
<div class="content">
A4 page in Portrait mode
</div>
</div>
<div class="A3">
<div class="content">
A3 page in Portrait mode
</div>
</div>
<div class="A3 A3landscape-parent">
<div class="A3landscape">
<div class="content">
A3 page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="A3">
<div class="content">
A3 page in Portrait mode
</div>
</div>
<div class="A4">
<div class="content">
A4 page in Portrait mode
</div>
</div>
<div class="A4 A4landscape-parent">
<div class="A4landscape">
<div class="content">
A4 page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="A4">
<div class="content">
A4 page in Portrait mode
</div>
</div>
</body>
</html>
I need A3 in print/pdf. But in preview it split in two pages.
Can somebody tell me, how to print/pdf mixed pages through css/html/js.
In a likely scenario on print, pages mostly are A4.
But if we need to print in a mixed layout through css div. then let suppose use above mentioned code,
it will split the A3 pages into two ( check chrome display/preview ).
How to print correctly in the same layout format, which is mentioned in the css.
any idea.
Thanks.

Sticky Navbar not working with Perspective css Property in Paralax Scrolling

I figured out that the Perspective CSS property I have listed in my div for a parallax scrolling is causing my sticky navbar function to not work at all.
Does anyone have suggestions?
Here's a link to my code: https://jsbin.com/luresosone/edit?html,css,js,output
$('.navbar').affix({
offset: {
top: function() {
return (this.top = $('.navbar').offset().top)
}
}
});
#media (max-width: 600px) {
.carousel-caption {
display: none;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
}
.row.content {
height: 450px
}
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
}
#media (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
.panel-footer.panel-custom {
background: red;
color: white;
}
.navbar.navbar-default.affix {
top: 0;
width: 100%;
}
.jumbotron {
margin-bottom: 0;
}
/* Parllax scrolling styling starts */
.parallax {
height: 100vh;
overflow-x: auto;
/* I believe this is causing the issue */
-webkit-perspective: 300px;
perspective: 300px;
/* I believe this is causing the issue */
}
.parallax__group {
position: relative;
height: 500px;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#group1 {
z-index: 5;
/* Slide over group 2 */
background-color: transparent
}
#group1 .parallax__layer--base {
background: red;
height: 65%
}
#group1 .parallax__layer--fore {
background: yellow left:27%;
top: 20%
}
#group2 {
z-index: 3;
/* Slide under groups 1 and 3 */
}
#group2 .parallax__layer--back {
background: green;
background-size: cover;
height: 616px;
padding-top: 140px;
padding-bottom: 140px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="parallax">
<div class="jumbotron">
<div class="container text-center">
<p>fdsfdsfsdfdsfsd</p>
</div>
</div>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">sadsadasd</a>
</div>
<div id="myNavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>hgfgfsf</li>
<li>dsasafew</li>
<li>dsadsaf</li>
<li>dsadasd</li>
<li>Cdas</li>
</ul>
</div>
</div>
</nav>
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--base"></div>
<div class="parallax__layer parallax__layer--fore"></div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--back"></div>
</div>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
<p style="font-size: 20px">Some code to waste space to make the sticky navbar work</p>
</body>
</html>

Why don't you keep navbar outside of parallax? This will solve your problem. Reference
Fiddle demo

Center images filtered with MixItUp plugin

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;
}

Categories

Resources