Moving image to first position after hide other elements

Moving image to first position after hide other elements - javascript

I need your help. When I fillter my image gallery and choose image that is on the second, third ... etc position, image is static, doesn't change position to the first from the left dynamically. ( see screen )
My code:
product_gallery.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style_gallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/gallery/js/gallery_button.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="logo">Example Page</div>
<body>
<div class="nav_buttons">
<ul class="tabs">
<a data-filter=".group-1" href="#" class="group_link">Group 1</a>
<a data-filter=".group-2" href="#" class="group_link">Group 2</a>
<a data-filter=".group-3" href="#" class="group_link">Group 3</a>
<a data-filter=".group-4" href="#" class="group_link">Group 4</a>
<a data-filter=".group-5" href="#" class="group_link">Group 5</a>
<a data-filter=".group-6" href="#" class="group_link">Group 6</a>
<a data-filter=".group-7" href="#" class="group_link">Group 7</a>
<a data-filter=".group-8" href="#" class="group_link">Group 8</a>
</ul>
</div>
<div class="thumbnails grid" id="portfolio">
<img src="gallery/M01.jpg" alt="" class="group-1">
<img src="gallery/M01.jpg" alt="" class="group-2">
<img src="gallery/M01.jpg" alt="" class="group-3">
<img src="gallery/M01.jpg" alt="" class="group-4">
<img src="gallery/M01.jpg" alt="" class="group-5">
<img src="gallery/M01.jpg" alt="" class="group-6">
<img src="gallery/M01.jpg" alt="" class="group-7">
<img src="gallery/M01.jpg" alt="" class="group-8">
<img src="gallery/M01.jpg" alt="" class="group-1">
<img src="gallery/M01.jpg" alt="" class="group-2">
<img src="gallery/M01.jpg" alt="" class="group-3">
<img src="gallery/M01.jpg" alt="" class="group-4">
<img src="gallery/M01.jpg" alt="" class="group-5">
<img src="gallery/M01.jpg" alt="" class="group-6">
<img src="gallery/M01.jpg" alt="" class="group-7">
<img src="gallery/M01.jpg" alt="" class="group-8">
<img src="gallery/M01.jpg" alt="" class="group-1">
<img src="gallery/M01.jpg" alt="" class="group-2">
<img src="gallery/M01.jpg" alt="" class="group-3">
<img src="gallery/M01.jpg" alt="" class="group-4">
</div>
</body>
</html>
style_gallery.css
#font-face {font-family: "ISOCT3"; src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot"); src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg"); }
body {
}
/** RESET **/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
/** THUMBNAILS GLOBALS **/
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails a {
height: 300px;
margin: 2px;
border-radius: 2px;
overflow: hidden;
}
.thumbnails img {
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.thumbnails a:hover img {
transform: scale(1.05);
}
/** THUMBNAILS GRID **/
.thumbnails.grid a {
width: calc(25% - 4px);
}
.thumbnails.grid a.double{
width: calc(50% - 4px);
}
.thumbnails.grid img {
width: 100%;
}
/** RESPONSIVENESS **/
#media (max-width: 1500px) {
.thumbnails.grid a {
width: calc(33.33% - 4px);
}
}
#media (max-width: 1000px) {
.thumbnails.grid a {
width: calc(50% - 4px);
}
.thumbnails.grid a.double{
width: calc(100% - 4px);
}
}
#media (max-width: 500px) {
.thumbnails.grid a {
width: calc(100% - 4px);
}
}
.logo {
font-family: ISOCT3;
font-size: 38px;
font-weight: bolder;
margin:auto;
padding-top: 28px;
padding-bottom:20px;
max-width: 80%;
color: #b8860b;
text-align: center;
letter-spacing: 3px;
}
#media only screen and (max-width: 800px) {
.logo {
font-family: ISOCT3;
font-size: 24px;
font-weight: bolder;
display: block;
color: #b8860b;
padding-top:25px;
margin: 0px auto 15px auto;
max-width: 90%;
height: auto !important;
letter-spacing: 2px;
}
}
.logo_link {
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.group_link {
background-color: #D29990;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-shadow: 0 -1px 1px saturate( darken($pink, 20%), 20%);
text-decoration: none;
color: #fff;
padding: 5px 20px;
line-height: 50px;
#include border-radius(50%);
display: inline-block;
#include transition( all .2s ease-in-out);
&:hover {
background-color: saturate( $pink, 20%);
}
}
.nav_buttons{
margin: 0 auto;
padding-left: 20px;
}
gallery_button.js
$(document).ready( function () {
$('.tabs').find('a').click( function (e) {
var theFilter = $(this).data('filter');
e.preventDefault();
$('.tabs').find('a').removeClass('active');
$(this).addClass('active');
$('#portfolio').find('img').show(); $('#portfolio').find('img').not(theFilter).hide();
});
});
And here is the screen showing what's wrong :

Your code is pretty close to working, if I remove the grid class (on the thumbnails div) it would produce your desired behavior without any additional modifications, but you most likely want the grid behavior.
Even though you're hiding the img elements, their parent elements (a anchor elements) are not hidden. You should be able to hide/show the parent elements of the images (the a anchor elements) to get your desired behavior.
As you can see from the modified js below, it's just one extra .parent() call that was adjusted on your show/hide selectors:
$('#portfolio').find('img').parent().show();
$('#portfolio').find('img').not(theFilter).parent().hide();
Just one additional suggestion for future questions: typically it's a lot easier for people to answer you question + see what you're seeing by using the built in Javascript/HTML/CSS snippet tool built into StackOverflow (for images you can use something like the placeholder site I used below).
$(document).ready( function () {
$('.tabs').find('a').click( function (e) {
var theFilter = $(this).data('filter');
e.preventDefault();
$('.tabs').find('a').removeClass('active');
$(this).addClass('active');
$('#portfolio').find('img').parent().show();
$('#portfolio').find('img').not(theFilter).parent().hide();
});
});
#font-face {
font-family: "ISOCT3";
src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot");
src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg");
}
body {}
/** RESET **/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
/** THUMBNAILS GLOBALS **/
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails a {
height: 300px;
margin: 2px;
border-radius: 2px;
overflow: hidden;
}
.thumbnails img {
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.thumbnails a:hover img {
transform: scale(1.05);
}
/** THUMBNAILS GRID **/
.thumbnails.grid a {
width: calc(25% - 4px);
}
.thumbnails.grid a.double {
width: calc(50% - 4px);
}
.thumbnails.grid img {
width: 100%;
}
/** RESPONSIVENESS **/
#media (max-width: 1500px) {
.thumbnails.grid a {
width: calc(33.33% - 4px);
}
}
#media (max-width: 1000px) {
.thumbnails.grid a {
width: calc(50% - 4px);
}
.thumbnails.grid a.double {
width: calc(100% - 4px);
}
}
#media (max-width: 500px) {
.thumbnails.grid a {
width: calc(100% - 4px);
}
}
.logo {
font-family: ISOCT3;
font-size: 38px;
font-weight: bolder;
margin: auto;
padding-top: 28px;
padding-bottom: 20px;
max-width: 80%;
color: #b8860b;
text-align: center;
letter-spacing: 3px;
}
#media only screen and (max-width: 800px) {
.logo {
font-family: ISOCT3;
font-size: 24px;
font-weight: bolder;
display: block;
color: #b8860b;
padding-top: 25px;
margin: 0px auto 15px auto;
max-width: 90%;
height: auto !important;
letter-spacing: 2px;
}
}
.logo_link {
color: inherit;
/* blue colors for links too */
text-decoration: inherit;
/* no underline */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.group_link {
background-color: #D29990;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-shadow: 0 -1px 1px saturate(darken($pink, 20%), 20%);
text-decoration: none;
color: #fff;
padding: 5px 20px;
line-height: 50px;
#include border-radius(50%);
display: inline-block;
#include transition(all .2s ease-in-out);
&:hover {
background-color: saturate($pink, 20%);
}
}
.nav_buttons {
margin: 0 auto;
padding-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style_gallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="logo">Example Page</div>
<body>
<div class="nav_buttons">
<ul class="tabs">
<a data-filter=".group-1" href="#" class="group_link">Group 1</a>
<a data-filter=".group-2" href="#" class="group_link">Group 2</a>
<a data-filter=".group-3" href="#" class="group_link">Group 3</a>
<a data-filter=".group-4" href="#" class="group_link">Group 4</a>
<a data-filter=".group-5" href="#" class="group_link">Group 5</a>
<a data-filter=".group-6" href="#" class="group_link">Group 6</a>
<a data-filter=".group-7" href="#" class="group_link">Group 7</a>
<a data-filter=".group-8" href="#" class="group_link">Group 8</a>
</ul>
</div>
<div class="thumbnails grid" id="portfolio">
<img src="https://via.placeholder.com/150" alt="" class="group-1">
<img src="https://via.placeholder.com/150" alt="" class="group-2">
<img src="https://via.placeholder.com/150" alt="" class="group-3">
<img src="https://via.placeholder.com/150" alt="" class="group-4">
<img src="https://via.placeholder.com/150" alt="" class="group-5">
<img src="https://via.placeholder.com/150" alt="" class="group-6">
<img src="https://via.placeholder.com/150" alt="" class="group-7">
<img src="https://via.placeholder.com/150" alt="" class="group-8">
<img src="https://via.placeholder.com/150" alt="" class="group-1">
<img src="https://via.placeholder.com/150" alt="" class="group-2">
<img src="https://via.placeholder.com/150" alt="" class="group-3">
<img src="https://via.placeholder.com/150" alt="" class="group-4">
<img src="https://via.placeholder.com/150" alt="" class="group-5">
<img src="https://via.placeholder.com/150" alt="" class="group-6">
<img src="https://via.placeholder.com/150" alt="" class="group-7">
<img src="https://via.placeholder.com/150" alt="" class="group-8">
<img src="https://via.placeholder.com/150" alt="" class="group-1">
<img src="https://via.placeholder.com/150" alt="" class="group-2">
<img src="https://via.placeholder.com/150" alt="" class="group-3">
<img src="https://via.placeholder.com/150" alt="" class="group-4">
</div>
</body>
</html>

Related

How can I put 2 div classes side by side. The accordian menu (faq) and the user profile cards?

I need to put the profile cards that are in columns right now and put them beside the faq accordian menu. I also need them to stack on mobile. I'm not sure how to execute this idea. Any help is very much appreciated. I will post the HTML and the CSS below. Thank you in advance for any and all help, it is very much appreciated.
<!doctype html>
<html>
<head>
<title>SYLC</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>Merch</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
<section>
<img src="img/stars.png" id="stars">
<img src="img/moon.png" id="moon">
<img src="img/mountains_behind.png" id="mountains_behind">
<h2 id="text">Sweti Yeti</h2>
Mint Now
<img src="img/mountains_front.png" id="mountains_front">
<div class="content">
</section>
<div class="sec" id="sec">
<h2>A Collection </h2>
<p>A Colorful, Engaging and Inovating Community.</p>
<br>
<p>These</p>
<br>
<p>Yeti's</p>
<!--PicGridStart-->
<div class="image-grid">
<img class="image-grid-col-2 image-grid-row-2" src="img/PAINT-ANGEL.png" alt="architecture">
<img src="img/B-GUY-ARMOR.jpg" alt="architecture">
<img src="img/Mustard_1.jpg" alt="architecture">
<img src="img/IMG_0125.jpg" alt="architecture">
<img src="img/IMG_0060.jpg" alt="architecture">
</div>
<!--PicGridEnd-->
<!--StartofTimeline-->
<!--EndofTimeline-->
<div class="flex-container">
<div id="column_container">
<div class="column">
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Trist</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Dy</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Meg</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
</div>
<div class="column">
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Landon</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Christopher</div>
<div class="fig-author-figure-title">Artist</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Jake</div>
<div class="fig-author-figure-title">Lead Artist</div>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="accordion">
<div class="image-box">
<img src="imG/yeti.png" alt="Accordion Image">
</div>
<div class="accordion-text">
<div class="title">FAQ</div>
<ul class="faq-text">
<li>
<div class="question-arrow">
<span class="question">What is the total supply?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>A total of 9</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">How Whitelist?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Participate in our Discord Community is a supportive and consistent way.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Wen mint/presale?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Pre-pre</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">What is</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Share </p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">IMX or whatever chain stuff</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>bleh</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question"> How to bother you?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Insert contact info</p>
<span class="line"></span>
</li>
</ul>
</div>
</div>
</div class="sec">
<script type="text/javascript">
let moon = document.getElementById('moon');
let stars = document.getElementById('stars');
let mountains_behind = document.getElementById('mountains_behind');
let mountains_front = document.getElementById('mountains_front');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let header = document.querySelector('header');
window.addEventListener('scroll', function() {
var value = window.scrollY;
moon.style.top = -value * -1.05 + 'px';
stars.style.left = value * 0.25 + 'px';
mountains_behind.style.top =-value * -0.5 + 'px';
header.style.top =-value * -0.5 + 'px';
mountains_front.style.top =-value * 0 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
text.style.marginRight = value * 4 + 'px';
});
</script>
<script>
let li = document.querySelectorAll(".faq-text li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", (e)=>{
let clickedLi;
if(e.target.classList.contains("question-arrow")){
clickedLi = e.target.parentElement;
}else{
clickedLi = e.target.parentElement.parentElement;
}
clickedLi.classList.toggle("showAnswer");
});
}
</script>
<style>
/* customizable snowflake styling */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
}
#-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}#-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}#keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}#keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
</div>
</body>
</html>
CSS
#import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
body {
background: linear-gradient(#2b1055, #7597de);
cursor: url("img/cursor.png"), auto !important;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a.active,
header ul li a:hover {
background: #fff;
color: #2b1055;
}
section:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #1c0522, transparent);
z-index: 1000;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon {
mix-blend-mode: screen;
}
section img#mountains_front {
z-index: 10;
}
h2#text {
position: absolute;
color: #fff;
right: -350px;
white-space: nowrap;
font-size: 7.5vw;
transform: translateY(0px);
}
#btn {
text-decoration: none;
padding: 8px 30px;
border-radius: 40px;
background: #fff;
color: #2b1055;
transform: translateY(100px);
font-size: 1.5em;
z-index: 9;
}
.sec {
position: relative;
min-height: 500px;
padding: 100px;
background: #1c0522;
}
.sec h2 {
font-size: 4em;
margin-bottom: 10px;
color: #fff;
text-align: center;
}
.sec p {
font-size: 3em;
color: #fff;
}
::selection {
background: #7d2ae8;
color: #fff;
}
.accordion {
display: flex;
max-width: 1010px;
width: 100%;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 25px;
padding: 45px 90px 45px 60px;
margin: 0 auto;
}
.accordion .image-box {
height: 360px;
width: 300px;
}
.accordion .image-box img {
height: 100%;
width: 100%;
object-fit: contain;
}
.accordion .accordion-text {
width: 60%;
}
.accordion .accordion-text .title {
font-size: 35px;
font-weight: 600;
color: #7d2ae8;
font-family: "Fira Sans", sans-serif;
}
.accordion .accordion-text .faq-text {
margin-top: 25px;
height: 263px;
overflow-y: auto;
}
.faq-text::-webkit-scrollbar {
display: none;
}
.accordion .accordion-text li {
list-style: none;
cursor: pointer;
}
.accordion-text li .question-arrow {
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-text li .question-arrow .question {
font-size: 18px;
font-weight: 500;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li .question-arrow .arrow {
font-size: 20px;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li.showAnswer .question-arrow .arrow {
transform: rotate(-180deg);
}
.accordion-text li:hover .question-arrow .question,
.accordion-text li:hover .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li.showAnswer .question-arrow .question,
.accordion-text li.showAnswer .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li .line {
display: block;
height: 2px;
width: 100%;
margin: 10px 0;
background: rgba(0, 0, 0, 0.1);
}
.accordion-text li p {
width: 92%;
font-size: 15px;
font-weight: 500;
color: #595959;
display: none;
}
.accordion-text li.showAnswer p {
display: block;
}
#media (max-width: 994px) {
body {
padding: 40px 20px;
}
.accordion {
max-width: 100%;
padding: 45px 60px 45px 60px;
}
.accordion .image-box {
height: 360px;
width: 220px;
}
.accordion .accordion-text {
width: 63%;
}
}
#media (max-width: 820px) {
.accordion {
flex-direction: column;
}
.accordion .image-box {
height: 360px;
width: 300px;
background: #ffffff;
width: 100%;
border-radius: 25px;
padding: 30px;
}
.accordion .accordion-text {
width: 100%;
margin-top: 30px;
}
}
#media (max-width: 538px) {
.accordion {
padding: 25px;
}
.accordion-text li p {
width: 98%;
}
}
* {
box-sizing: border-box;
}
:root {
--fir-font-article: "adobe-garamond-pro", "Times New Roman", Times;
--fir-font-header: "foco", Helvetica;
--fir-blue-twitter-alpha: rgba(85, 172, 238, 0.6);
--fir-color-grey: rgba(0, 0, 0, 0.4);
}
.fir-clickcircle {
height: 80px;
width: 80px;
border-radius: 100px;
cursor: pointer;
}
.fir-image-figure {
margin: 0;
display: flex;
align-items: center;
margin-bottom: 40px;
position: relative;
text-decoration: none;
}
.fir-image-figure .caption,
.fir-image-figure figcaption {
padding-left: 15px;
}
html.wf-active .fir-image-figure .fig-author-figure-title {
font-family: var(--fir-font-header);
font-size: 16px;
}
.fir-image-figure .fig-author-figure-title {
color: var(--fir-color-grey);
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 15px;
margin-top: 2px;
color: #fff;
}
.fir-imageover {
position: relative;
display: flex;
}
.fir-imageover-color {
height: 80px;
width: 80px;
position: absolute;
background: var(--fir-blue-twitter-alpha);
background-image: none;
border-radius: 100px;
cursor: pointer;
transition: background 0.3s ease-in-out;
animation: fadeInFadeOut 4s infinite;
top: 0;
left: 0;
}
.fir-imageover-image {
position: absolute;
top: 0;
left: 0;
animation: fadeInFadeOut 4s infinite;
}
#keyframes fadeInFadeOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
}
#column_container {
width: 959px;
margin: 0 auto;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.image-grid {
--gap: 16px;
--num-cols: 4;
--row-height: 300px;
box-sizing: border-box;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: var(--row-height);
gap: var(--gap);
}
.image-grid > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-grid-col-2 {
grid-column: span 2;
}
.image-grid-row-2 {
grid-row: span 2;
}
/* Anything udner 1024px */
#media screen and (max-width: 1024px) {
.image-grid {
--num-cols: 2;
--row-height: 200px;
}
}

This will do what you are asking. Keep in mind it will look a bit a mess because your images won't resolve in my snippet.
Basically all that is changed is that I added to #column_container a grid layout supporting two columns, then closed the two columns in a new div, and then the second column is populated by accordion, and then I added a media query that changes from grid to flex for viewports of 720px or less, so the columns become stacked.
Run snippet then 'full page' and scale browser and everything should work as expected.
#import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
body {
background: linear-gradient(#2b1055, #7597de);
cursor: url("img/cursor.png"), auto !important;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a.active,
header ul li a:hover {
background: #fff;
color: #2b1055;
}
section:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #1c0522, transparent);
z-index: 1000;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon {
mix-blend-mode: screen;
}
section img#mountains_front {
z-index: 10;
}
h2#text {
position: absolute;
color: #fff;
right: -350px;
white-space: nowrap;
font-size: 7.5vw;
transform: translateY(0px);
}
#btn {
text-decoration: none;
padding: 8px 30px;
border-radius: 40px;
background: #fff;
color: #2b1055;
transform: translateY(100px);
font-size: 1.5em;
z-index: 9;
}
.sec {
position: relative;
min-height: 500px;
padding: 100px;
background: #1c0522;
}
.sec h2 {
font-size: 4em;
margin-bottom: 10px;
color: #fff;
text-align: center;
}
.sec p {
font-size: 3em;
color: #fff;
}
::selection {
background: #7d2ae8;
color: #fff;
}
.accordion {
display: flex;
max-width: 1010px;
width: 100%;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 25px;
padding: 45px 90px 45px 60px;
margin: 0 auto;
}
.accordion .image-box {
height: 360px;
width: 300px;
}
.accordion .image-box img {
height: 100%;
width: 100%;
object-fit: contain;
}
.accordion .accordion-text {
width: 60%;
}
.accordion .accordion-text .title {
font-size: 35px;
font-weight: 600;
color: #7d2ae8;
font-family: "Fira Sans", sans-serif;
}
.accordion .accordion-text .faq-text {
margin-top: 25px;
height: 263px;
overflow-y: auto;
}
.faq-text::-webkit-scrollbar {
display: none;
}
.accordion .accordion-text li {
list-style: none;
cursor: pointer;
}
.accordion-text li .question-arrow {
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-text li .question-arrow .question {
font-size: 18px;
font-weight: 500;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li .question-arrow .arrow {
font-size: 20px;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li.showAnswer .question-arrow .arrow {
transform: rotate(-180deg);
}
.accordion-text li:hover .question-arrow .question,
.accordion-text li:hover .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li.showAnswer .question-arrow .question,
.accordion-text li.showAnswer .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li .line {
display: block;
height: 2px;
width: 100%;
margin: 10px 0;
background: rgba(0, 0, 0, 0.1);
}
.accordion-text li p {
width: 92%;
font-size: 15px;
font-weight: 500;
color: #595959;
display: none;
}
.accordion-text li.showAnswer p {
display: block;
}
#media (max-width: 994px) {
body {
padding: 40px 20px;
}
.accordion {
max-width: 100%;
padding: 45px 60px 45px 60px;
}
.accordion .image-box {
height: 360px;
width: 220px;
}
.accordion .accordion-text {
width: 63%;
}
}
#media (max-width: 820px) {
.accordion {
flex-direction: column;
}
.accordion .image-box {
height: 360px;
width: 300px;
background: #ffffff;
width: 100%;
border-radius: 25px;
padding: 30px;
}
.accordion .accordion-text {
width: 100%;
margin-top: 30px;
}
}
#media (max-width: 538px) {
.accordion {
padding: 25px;
}
.accordion-text li p {
width: 98%;
}
}
* {
box-sizing: border-box;
}
:root {
--fir-font-article: "adobe-garamond-pro", "Times New Roman", Times;
--fir-font-header: "foco", Helvetica;
--fir-blue-twitter-alpha: rgba(85, 172, 238, 0.6);
--fir-color-grey: rgba(0, 0, 0, 0.4);
}
.fir-clickcircle {
height: 80px;
width: 80px;
border-radius: 100px;
cursor: pointer;
}
.fir-image-figure {
margin: 0;
display: flex;
align-items: center;
margin-bottom: 40px;
position: relative;
text-decoration: none;
}
.fir-image-figure .caption,
.fir-image-figure figcaption {
padding-left: 15px;
}
html.wf-active .fir-image-figure .fig-author-figure-title {
font-family: var(--fir-font-header);
font-size: 16px;
}
.fir-image-figure .fig-author-figure-title {
color: var(--fir-color-grey);
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 15px;
margin-top: 2px;
color: #fff;
}
.fir-imageover {
position: relative;
display: flex;
}
.fir-imageover-color {
height: 80px;
width: 80px;
position: absolute;
background: var(--fir-blue-twitter-alpha);
background-image: none;
border-radius: 100px;
cursor: pointer;
transition: background 0.3s ease-in-out;
animation: fadeInFadeOut 4s infinite;
top: 0;
left: 0;
}
.fir-imageover-image {
position: absolute;
top: 0;
left: 0;
animation: fadeInFadeOut 4s infinite;
}
#keyframes fadeInFadeOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
}
#column_container {
/* width: 959px; */
margin: 0 auto;
grid-column: 1 / -1;
grid-gap: 48px;
display: grid;
grid-template-columns: auto auto;
align-items: flex-start;
flex-direction: column;
}
#media (max-width:720px) {
#column_container {
width: 100%;
margin: 0 auto;
display: flex;
}
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.image-grid {
--gap: 16px;
--num-cols: 4;
--row-height: 300px;
box-sizing: border-box;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: var(--row-height);
gap: var(--gap);
}
.image-grid>img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-grid-col-2 {
grid-column: span 2;
}
.image-grid-row-2 {
grid-row: span 2;
}
/* Anything udner 1024px */
#media screen and (max-width: 1024px) {
.image-grid {
--num-cols: 2;
--row-height: 200px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<title>SYLC</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>Merch</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
<section>
<img src="img/stars.png" id="stars">
<img src="img/moon.png" id="moon">
<img src="img/mountains_behind.png" id="mountains_behind">
<h2 id="text">Sweti Yeti</h2>
Mint Now
<img src="img/mountains_front.png" id="mountains_front">
<div class="content">
</section>
<div class="sec" id="sec">
<h2>A Collection </h2>
<p>A Colorful, Engaging and Inovating Community.</p>
<br>
<p>These</p>
<br>
<p>Yeti's</p>
<!--PicGridStart-->
<div class="image-grid">
<img class="image-grid-col-2 image-grid-row-2" src="img/PAINT-ANGEL.png" alt="architecture">
<img src="img/B-GUY-ARMOR.jpg" alt="architecture">
<img src="img/Mustard_1.jpg" alt="architecture">
<img src="img/IMG_0125.jpg" alt="architecture">
<img src="img/IMG_0060.jpg" alt="architecture">
</div>
<!--PicGridEnd-->
<!--StartofTimeline-->
<!--EndofTimeline-->
<div class="flex-container">
<div id="column_container">
<div>
<div class="column">
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Trist</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Dy</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Meg</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
</div>
<div class="column">
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Landon</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Christopher</div>
<div class="fig-author-figure-title">Artist</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle"
src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Jake</div>
<div class="fig-author-figure-title">Lead Artist</div>
</figcaption>
</figure>
</div>
</div>
<div class="accordion">
<div class="image-box">
<img src="imG/yeti.png" alt="Accordion Image">
</div>
<div class="accordion-text">
<div class="title">FAQ</div>
<ul class="faq-text">
<li>
<div class="question-arrow">
<span class="question">What is the total supply?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>A total of 9</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">How Whitelist?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Participate in our Discord Community is a supportive and consistent way.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Wen mint/presale?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Pre-pre</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">What is</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Share </p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">IMX or whatever chain stuff</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>bleh</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question"> How to bother you?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Insert contact info</p>
<span class="line"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div class="sec">
<script type="text/javascript">
let moon = document.getElementById('moon');
let stars = document.getElementById('stars');
let mountains_behind = document.getElementById('mountains_behind');
let mountains_front = document.getElementById('mountains_front');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let header = document.querySelector('header');
window.addEventListener('scroll', function () {
var value = window.scrollY;
moon.style.top = -value * -1.05 + 'px';
stars.style.left = value * 0.25 + 'px';
mountains_behind.style.top = -value * -0.5 + 'px';
header.style.top = -value * -0.5 + 'px';
mountains_front.style.top = -value * 0 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
text.style.marginRight = value * 4 + 'px';
});
</script>
<script>
let li = document.querySelectorAll(".faq-text li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", (e) => {
let clickedLi;
if (e.target.classList.contains("question-arrow")) {
clickedLi = e.target.parentElement;
} else {
clickedLi = e.target.parentElement.parentElement;
}
clickedLi.classList.toggle("showAnswer");
});
}
</script>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
</div>
</body>
</html>

Margin auto doesn't work even if I have width and height defined

I want to make the hero title even with the navbar. However, I ran into some responsive issues. Right now I'm doing frontend mentor challenges and they advised that the max width for desktop should be 1440px. Here's where I'm not sure how to do it correctly.
I need the hero title and the logo be in one line.
I want to apply margin auto to navbar but that doesn't seem to work at all.
Any idea how to fix this? My idea is to set the width of the container and navbar both to 1440px= 90em but not sure if that's a right way.
header {
position: absolute;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 90em;
width: 100%;
padding: 2em;
min-height: 8vh;
top: 0;
left: 0;
margin: 0 auto;
}
header img {
width: 10em;
height: 2em;
}
header ul {
list-style: none;
}
header ul a {
text-decoration: none;
}
header ul a li {
display: inline-block;
padding: 2em;
color: white;
}
header ul a li:hover {
color: #000;
}
header .burger {
display: none;
}
#media only screen and (max-width: 996px) {
header {
padding: 2.5em;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
header ul {
display: none;
}
header .burger {
display: block;
}
header .burger img {
width: 3em;
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Alata;
}
.container {
min-height: 100vh;
width: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: -ms-grid;
display: grid;
place-items: center;
background-image: url("../images/desktop/image-hero.jpg");
-webkit-box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
}
.container__intro {
max-width: 90em;
padding: 2em;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container__intro__desc {
padding: 2em 5em 2em 2em;
border: 1px solid white;
}
.container__intro__desc p {
color: white;
font-size: 4rem;
font-family: Josefin Sans;
}
img {
width: 100%;
height: auto;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing page</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a href="">
<img src="images/logo.svg" alt="logo">
</a>
<nav>
<ul>
<a href="">
<li>About</li>
</a>
<a href="">
<li>Careers</li>
</a>
<a href="">
<li>Events</li>
</a>
<a href="">
<li>Products</li>
</a>
<a href="">
<li>Support</li>
</a>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="">
</div>
</nav>
</header>
<div class="container">
<div class="container__intro">
<div class="container__intro__desc">
<p>
Immersive
</p>
<p>
Experiences
</p>
<p>
That Deliver
</p>
</div>
</div>
</div>
<div class="container">
<div class="img-container">
</div>
<div class="__desc">
</div>
</div>
<div class="container">
<div class="__top">
<p>Our Creations</p>
See All
</div>
<div class="__grid">
<div class="item">
<img src="" alt="">
<p>Deep</p>
<p>Earth</p>
</div>
<div class="item">
<img src="" alt="">
<p>Night</p>
<p>Arcade</p>
</div>
<div class="item">
<img src="" alt="">
<p>Soccer</p>
<p>Team VR</p>
</div>
<div class="item">
<img src="" alt="">
<p>The</p>
<p>Grid</p>
</div>
<div class="item">
<img src="" alt="">
<p>From Up</p>
<p>Above VR</p>
</div>
<div class="item">
<img src="" alt="">
<p>Pocket </p>
<p>Borealis</p>
</div>
<div class="item">
<img src="" alt="">
<p>The</p>
<p>Curiosity</p>
</div>
<div class="item">
<img src="" alt="">
<p>Make It</p>
<p>Fisheye</p>
</div>
</div>
</div>
</body>
</html>

flexbox, flexbox, flexbox!
#container{
max-width:1440px;
display:flex;
margin:0 auto;
}
#header{
border:solid 2px black;
flex-grow:1;
text-align:center;
}
<div id='container'>
<img src='https://via.placeholder.com/160x32.png' alt='log'>
<div id='header'>
here's to all the girls I...</div>
</div>

Highlight a text when clicking in another text

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 highlight (as it highlights green when clicking in it) the "filter tab" (All, Mix1, Mix2...) when clicking on the text (Mix1, Mix2...) that appears when hovering each image.
Code
$(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;
}
.project-wrapper {
text-align: center;
}
.work-item {
float: none;
width: 30%;
position: relative;
}
.work-item>img {
display: block;
height: 100%;
width: 100%;
}
.overlay {
background-color: rgba(31, 107, 76, .9);
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
}
.work-item:hover .overlay {
opacity: 1;
}
.work-item .overlay a {
font-size: 30px;
display: inline-block;
margin-top: 34%
}
.work-item .overlay a:hover {
color: #fff;
}
/*=========================================
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="">
<figcaption class="overlay">
Mix1
</figcaption>
</figure>
<figure class="mix work-item mix2">
<img src="http://imgur.com/GB54YZR.jpg" alt="">
<figcaption class="overlay">
Mix2
</figcaption>
</figure>
<figure class="mix work-item mix3">
<img src="http://imgur.com/afatbzS.jpg" alt="">
<figcaption class="overlay">
Mix3
</figcaption>
</figure>
<figure class="mix work-item mix4">
<img src="http://imgur.com/GvjT75d.jpg" alt="">
<figcaption class="overlay">
Mix4
</figcaption>
</figure>
<figure class="mix work-item mix5">
<img src="http://imgur.com/KJ9MaK6.jpg" alt="">
<figcaption class="overlay">
Mix5
</figcaption>
</figure>
<figure class="mix work-item mix6">
<img src="http://imgur.com/w3ZFVnq.jpg" alt="">
<figcaption class="overlay">
Mix6
</figcaption>
</figure>
</div>
</section>
</body>
</html>
Thanks in advance,
Luiz.

You can achieve the desired like below.
Add the event on filter class and check for the element with the same data-filter attribute in the tab context.
$(document).ready(function() {
/* ========================================================================= */
/* Filtering
/* ========================================================================= */
$(".project-wrapper").mixItUp();
$(".filter").on("click",function()
{
var dFilter = $(this).attr("data-filter");
var tabContext = $(".work-filter");
$( "a[data-filter='"+dFilter+"']",tabContext ).addClass("active");
})
});
/*=========================================
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;
}
.project-wrapper {
text-align: center;
}
.work-item {
float: none;
width: 30%;
position: relative;
}
.work-item>img {
display: block;
height: 100%;
width: 100%;
}
.overlay {
background-color: rgba(31, 107, 76, .9);
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
}
.work-item:hover .overlay {
opacity: 1;
}
.work-item .overlay a {
font-size: 30px;
display: inline-block;
margin-top: 34%
}
.work-item .overlay a:hover {
color: #fff;
}
/*=========================================
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="https://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="">
<figcaption class="overlay">
Mix1
</figcaption>
</figure>
<figure class="mix work-item mix2">
<img src="http://imgur.com/GB54YZR.jpg" alt="">
<figcaption class="overlay">
Mix2
</figcaption>
</figure>
<figure class="mix work-item mix3">
<img src="http://imgur.com/afatbzS.jpg" alt="">
<figcaption class="overlay">
Mix3
</figcaption>
</figure>
<figure class="mix work-item mix4">
<img src="http://imgur.com/GvjT75d.jpg" alt="">
<figcaption class="overlay">
Mix4
</figcaption>
</figure>
<figure class="mix work-item mix5">
<img src="http://imgur.com/KJ9MaK6.jpg" alt="">
<figcaption class="overlay">
Mix5
</figcaption>
</figure>
<figure class="mix work-item mix6">
<img src="http://imgur.com/w3ZFVnq.jpg" alt="">
<figcaption class="overlay">
Mix6
</figcaption>
</figure>
</div>
</section>
</body>
</html>

jQuery slider doesn't work in Safari desktop

i have created a jquery carousel, which has only a next/prev functionality, everything is working fine in Chrome whereas there are problems in safari. Thus the images that should be hidden in the slider are appearing at the bottom (visually hidden, i have checked with firebug).
This happens only in Safari.
<div class="slider">
<a class="prev-arrow arrow"></a>
<div class="image-container">
<img alt="" src="http://bit.ly/1Icor0I" class="active">
<img alt="" src="http://bit.ly/1Ubvzly">
<img alt="" src="http://bit.ly/1KDjkg6">
<img alt="" src="http://smu.gs/1IwVgJp">
<img alt="" src="http://bit.ly/1JV31pa">
<img alt="" src="http://bit.ly/1eFfcNZ">
<img alt="" src="http://bit.ly/1DdSEjq">
<img alt="" src="http://bit.ly/1SQshBK">
<img alt="" src="http://bit.ly/1LUnGxU">
<img alt="" src="http://bit.ly/1fO17ic">
<img alt="" src="http://bit.ly/1ha0UHb">
<img alt="" src="http://bit.ly/1IOce80">
<img alt="" src="http://bit.ly/1gsBwwf">
<img alt="" src="http://bit.ly/1LUnHBZ">
</div>
<a class="next-arrow arrow"></a>
</div>
$(document).on("click", ".prev-arrow", function () {
var imageContainer = $(this).next();
imageContainer.animate({"scrollLeft":imageContainer.scrollLeft() - 300}, 200);
});
$(document).on("click", ".next-arrow", function () {
var imageContainer = $(this).prev();
imageContainer.animate({"scrollLeft":imageContainer.scrollLeft() + 300}, 200);
});
and css
.slider .image-container {
overflow: hidden;
width:500px;
display: inline-flex;
margin-left: 25px;
height: 120px;
}
.slider .image-container img {
display: inline-block;
width:200px;
margin-left: 2px;
}
.slider .image-container img.active {
border: 6px solid #007aff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider {
display: inline-block;
position: relative;
width: 800px;
}
.prev-arrow {
width: 13px;
height: 23px;
display: inline-block;
position: absolute;
margin-top: 50px;
cursor: pointer;
background-image: url("/images/agency/left-arrow.jpg");
background-color:red;
}
.next-arrow {
width: 13px;
height: 23px;
display: inline-block;
position: absolute;
margin-top: 50px;
margin-left: 15px;
cursor: pointer;
background-image: url("/images/agency/right-arrow.jpg");
background-color:red;
}
https://jsfiddle.net/zzLf1pL3/
I don't want to make many changes my HTML code. Because it will make me to re-write a lot of other stuff.
Thanks for help!

How to change the width of this Image Gallery?

I'm trying to add this gallery to my blogger blog and I'm not sure how to change the width. I'm using the following code. My blog's width is 980px. I tried to change 550 into a smaller size, but the images went below!
<style type="text/css">
div.ccontent {
/* The display of ccontent is enabled using jQuery so that the slideshow ccontent won't display unless javascript is enabled. */
display: none;
float: right;
width: 550px;
}
div.ccontent a, div.navigation a {
text-decoration: none;
color: #777;
}
div.ccontent a:focus, div.ccontent a:hover, div.ccontent a:active {
text-decoration: underline;
}
div.controls {
margin-top: 5px;
height: 23px;
}
div.controls a {
padding: 5px;
}
div.ss-controls {
float: left;
}
div.nav-controls {
float: right;
}
div.slideshow-container {
position: relative;
clear: both;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-image: url('http://img707.imageshack.us/img707/6035/loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 550px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.slideshow a.advance-link {
display: block;
width: 550px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow img {
vertical-align: middle;
border: 1px solid #ccc;
}
div.download {
float: right;
}
div.caption-container {
}
span.image-caption {
display: block;
position: absolute;
}
div.caption {
background-color: #000;
padding: 12px;
color: #ccc;
}
div.caption a {
color: #fff;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0;
}
ul.thumbs li {
float: none;
padding: 0;
margin: 0;
list-style: none;
}
a.thumb {
padding: 0;
display: inline;
border: none;
}
ul.thumbs li.selected a.thumb {
color: #000;
font-weight: bold;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
margin-bottom: 12px;
height: 11px;
}
div.navigation div.bottom {
margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
margin-right: 2px;
padding: 4px 7px 2px 7px;
border: 1px solid #ccc;
}
div.pagination a:hover {
background-color: #eee;
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
background-color: #000;
border-color: #000;
color: #fff;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}
#captionToggle a {
float: right;
display: block;
background-image: url('http://img94.imageshack.us/img94/2515/captionj.png');
background-repeat: no-repeat;
background-position: right;
margin-top: 5px;
padding: 5px 30px 5px 5px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://galleriffic.googlecode.com/svn/trunk/example/js/jquery.galleriffic.js"></script>
<div id="page">
<div id="container">
<h1>Galleriffic</h1>
<h2>Minimal implementation</h2>
<!-- Start Minimal Gallery Html Containers -->
<div id="gallery" class="ccontent">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">Title #0</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">Title #1</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">Title #2</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">Title #3</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">Title #4</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">Title #5</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">Title #6</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">Title #7</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">Title #8</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">Title #9</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">Title #10</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">Title #11</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">Title #12</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">Title #13</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">Title #14</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">Title #15</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">Title #16</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">Title #17</a>
</li>
<li>
<a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">Title #18</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">Title #19</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">Title #20</a>
</li>
<li>
<a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">Title #21</a>
</li>
<li>
<a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">Title #22</a>
</li>
<li>
<a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">Title #23</a>
</li>
</ul>
</div>
<!-- End Minimal Gallery Html Containers -->
<div style="clear: both;"></div>
</div>
</div>
<div id="footer">© 2009 Trent Foley</div>
<script type="text/javascript">
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.ccontent').css('display', 'block');
$(document).ready(function() {
// Initialize Minimal Galleriffic Gallery
$('#thumbs').galleriffic({
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls'
});
});
</script>

You don't even need any scripting for this. div.slideshow-container{margin-left:-25px} works just fine.

document.getElementById("thumbs").style.width = "123px";

Develop Reference

JavaScript is the programming language of the Web.

Moving image to first position after hide other elements - javascript

Related

How can I put 2 div classes side by side. The accordian menu (faq) and the user profile cards?

Margin auto doesn't work even if I have width and height defined

Highlight a text when clicking in another text

jQuery slider doesn't work in Safari desktop

How to change the width of this Image Gallery?

Categories

Resources