Develop Reference

Issue with button on swappable gallery in mobile view

I am trying to add a button on the cards in my swipeable gallery, which is made using the Swiper API. However, when I remove the overlay on the cards to make the button visible, the slider starts to behave erratically and does not work properly. I am new to coding and apologize if this is a simple issue, but I would appreciate any help or suggestions.
To make the button functional, I need to remove the "content: ''" property from the ".gallery-cards" class in the CSS. However, when I do this, the slider starts to glitch in the mobile view. The ".gallery-cards" class is only used in the JS code to make the cards swipeable. I have included the CSS, JS, and HTML code below. Thank you for any assistance.
My JS Code
/*=============== SWIPER JS GALLERY ===============*/
let swiperCards = new Swiper(".gallery-cards", {
loop: true,
loopedSlides: 5,
cssMode: true,
effect: 'fade',
});
let swiperThumbs = new Swiper(".gallery-thumbs", {
loop: true,
loopedSlides: 5,
slidesPerView: 3,
centeredSlides: true,
slideToClickedSlide: true,
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
swiperThumbs.controller.control = swiperCards;
My CSS Code
.gallery {
height: 100vh;
display: grid;
align-content: center;
justify-content: center;
}
.gallery__card {
position: relative;
width: 228px;
height: 288px;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.gallery__img,
.gallery__card::after,
.gallery__data {
position: absolute;
}
.gallery__img {
inset: 0;
margin: auto;
transition: transform .3s;
}
.gallery__button {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button:hover {
background-color: #074bb1;
color: white;
transition: .6s;
}
.gallery__button-pink {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button-pink:hover {
background-color: #ff66c4;
color: white;
transition: .6s;
}
.gallery__card::after {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 32%, hsla(0, 0%, 0%, .3) 100%);
top: 0;
z-index: 1;
}
.gallery__data {
bottom: 1.5rem;
left: 1.75rem;
z-index: 10;
}
.gallery__title,
.gallery__subtitle {
color: #fff;
font-weight: 500;
}
.gallery__title {
font-size: 1rem;
}
.gallery__subtitle {
font-size: .75rem;
}
.gallery__overflow {
position: relative;
}
.gallery__thumbnail {
position: relative;
width: 60px;
height: 60px;
border-radius: 1.5rem;
overflow: hidden;
cursor: pointer;
margin-left: auto;
margin-right: auto;
transition: transform .3s;
}
.gallery__thumbnail-img {
position: absolute;
inset: 0;
margin: auto;
}
/* Swiper class */
.gallery-cards,
.gallery-thumbs {
width: 260px;
}
.gallery-cards:hover .gallery__img {
transform: scale(1.1);
}
.gallery .swiper-wrapper {
padding: 2.5rem 0;
}
.gallery-thumbs {
height: 132px;
}
/* Active thumbnail */
.swiper-slide-active .gallery__thumbnail {
transform: translateY(-1.25rem) scale(1.2);
}
/* Rotate thumbnail */
.swiper-slide-next .gallery__thumbnail {
transform: rotate(15deg);
}
.swiper-slide-prev .gallery__thumbnail {
transform: rotate(-15deg);
}
/* Sliding numbers */
.swiper-pagination-fraction {
font-size: .813rem;
letter-spacing: -1px;
font-weight: 500;
color: hsl(30, 16%, 50%);
bottom: 0;
}
/* Arrow buttons */
.swiper-button-next::after,
.swiper-button-prev::after {
content: '';
}
.swiper-button-next,
.swiper-button-prev {
font-size: 1.5rem;
color: hsl(30, 8%, 15%);
top: 5.5rem;
}
.swiper-button-next {
right: -1.5rem;
transform: rotate(15deg);
}
.swiper-button-prev {
left: -1.5rem;
transform: rotate(-15deg);
}
/* Other swiper settings */
.gallery-cards::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
scroll-snap-type: initial;
}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
#media screen and (max-width: 320px) {
.swiper-button-next,
.swiper-button-prev {
display: none;
}
}
/* For medium devices */
#media screen and (min-width: 1024px) {
.gallery__card {
width: 290px;
height: 370px;
}
.gallery__thumbnail {
width: 65px;
height: 65px;
}
.gallery-cards,
.gallery-thumbs {
width: 290px;
}
}
My HTML Code
<div class="swiper-slide">
<article class="gallery__card">
<img src="../assets/img/hfsimageslider.png" alt="image gallery" class="gallery__img">
<div class="gallery__data">
<button class="gallery__button">More Info</button>
</div>
</article>
</div>

When classname on `html` is toggled to a certain value, update (Swiper) JS settings so carousel behaves differently

I'm using document.documentElement.classList.contains to check and apply different settings to Swiper JS depending on the class set on the html. So when retro is added the effect and loop settings are different.
...this works when the class is already on the page when loaded. But I have a toggle that when clicked applies classes to the html and alters the styling.
And adjusting the settings like so:
effect: hasClassRetro ? 'slide' : 'fade',
loop: hasClassRetro ? false : true
Is there away when this happens, the JS checks if the class on html has updated and updates 'live'? Likewise when the class is removed?
/* FADE IN WHEN CONTENT LOADED */
window.addEventListener("DOMContentLoaded", function() {
document.body.className = "visible";
});
/* TOGGLE */
const html = document.querySelector('html');
const button = document.querySelector('.contrast__link');
button.addEventListener('click', e => {
e.preventDefault();
if (html.classList.contains('dark-mode')) {
html.classList.remove('dark-mode');
html.classList.add('retro');
} else if (html.classList.contains('retro')) {
html.classList.remove('retro');
} else {
html.classList.add('dark-mode');
}
});
/* CAROUSEL */
const hasClassRetro = document.documentElement.classList.contains('retro')
var caption = document.querySelector('.swiper-caption span');
const swiper = new Swiper('.swiper', {
// Disable preloading of all images
preloadImages: true,
// Enable lazy loading
lazy: false,
effect: hasClassRetro ? 'slide' : 'fade',
fadeEffect: {
crossFade: true
},
loop: hasClassRetro ? false : true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
on: {
init: function() {
updateCaptionText(this);
},
activeIndexChange: function() {
updateCaptionText(this);
}
}
});
function updateCaptionText(slider) {
caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}
swiper.autoplay.stop();
window.addEventListener("DOMContentLoaded", () => {
document.body.className = "visible";
setTimeout(() => swiper.autoplay.start(), 640); // 1000 means 1s, it's in ms here.
});
/* #GLOBAL */
body.hidden {
opacity: 0;
}
body.visible {
opacity: 1;
transition: opacity 0.48s ease-out;
}
html {
background: white;
font-size: 62.5%;
height: 100vh;
height: var(--app-height);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}
.dark-mode {
background: yellow;
}
.retro {
background: blue;
color: white;
}
/**
* Base `body` styling.
*/
body {
background-color: transparent;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
font-size: 16px;
height: 100vh;
height: var(--app-height);
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
}
h1,
p {
margin: 0 0 24px;
padding: 0;
}
/* #HEAD (left column) */
.page-head {
border-bottom: 2px solid black;
box-sizing: border-box;
display: flex;
align-items: center;
height: 64px;
padding: 0 24px;
position: fixed;
bottom: -64px;
left: 0;
transform: rotate(-90deg);
transform-origin: top left;
width: 100vh;
}
.site-logo {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
order: 1;
stroke: black;
transform: rotate(90deg);
width: 32px;
svg {
overflow: visible;
}
}
.contrast {
display: flex;
align-items: center;
flex: 1 1 0%;
margin-bottom: 0;
justify-content: flex-start;
}
/* #GRID */
.grid {
display: flex;
flex-direction: column;
height: 100vh;
}
.grid__item {
box-sizing: border-box;
padding: 24px 24px 0;
margin-left: 64px;
}
.gallery {
box-sizing: border-box;
flex: 1;
overflow: hidden;
position: relative;
padding: 0 24px 24px;
text-align: center;
}
.gallery img {
border: 2px solid black;
box-sizing: border-box;
height: 100%;
max-height: 100%;
object-fit: cover;
object-position: top center;
width: 100%;
max-width: 100%;
}
/**
* Side-by-side view for wider devices.
*/
.grid {
display: flex;
flex-direction: column;
height: 100vh;
height: var(--app-height);
}
/**
* Grid Cells.
*/
.grid__item {
box-sizing: border-box;
padding: 48px 48px 0;
margin-left: 48px;
#media only screen and (min-width: 1000px) {
margin-left: 0;
}
}
.gallery {
box-sizing: border-box;
flex: 1;
overflow: hidden;
position: relative;
padding: 0 24px 24px;
text-align: center;
}
.gallery img {
border: 2px solid black;
box-sizing: border-box;
height: 100%;
max-height: 100%;
object-fit: cover;
object-position: top center;
width: 100%;
max-width: 100%;
#media only screen and (min-width: 1000px) {
width: auto;
}
}
/**
* Side-by-side view for wider devices.
*/
#media only screen and (min-width: 1000px) {
.grid {
background-color: black;
flex-direction: row;
column-gap: 2px;
height: 100vh;
margin: 0 48px;
}
.grid__item {
background-color: white;
transition: width 0.12s;
width: 33.333333%;
height: 100vh;
}
.gallery {
padding-top: 24px;
}
.gallery img {
height: 100%; // Was Auto to keep aspect-ratio
max-height: 100%;
//object-fit: initial;
width: auto;
max-width: 100%;
}
}
#media only screen and (min-width: 1000px) {
.grid__item {
width: 50%;
}
}
#media screen and (max-height: 600px) {
.grid {
height: auto;
}
.grid__item {
height: auto;
}
}
/* #FOOTER (right column) */
.page-foot {
margin-left: 64px;
padding: 0 24px;
}
.swiper-pagination {
display: none;
}
#media only screen and (min-width: 1000px) {
.page-foot {
border-bottom: 2px solid black;
box-sizing: border-box;
display: flex;
height: 64px;
padding: 0 24px;
position: fixed;
bottom: -64px;
left: 0;
transform: rotate(-90deg);
transform-origin: top left;
width: 100vh;
left: auto;
right: 0;
transform: rotate(90deg);
transform-origin: top right;
p {
display: flex;
align-items: center;
margin-bottom: 0;
}
}
.swiper-caption {
flex: 1 1 0%;
}
}
/* CURSOR */
* {
//cursor: none !important;
}
body:hover {
.cursor-trail {
border-color: black;
}
.cursor span {
background-color: black;
}
}
.cursor {
position: fixed;
z-index: 1000;
}
.cursor span {
background-color: transparent;
border-radius: 100%;
display: block;
height: 4px;
margin: 0;
pointer-events: none;
transition: background-color 0.12s ease-out, height 0.12s, opacity 0.12s, width 0.12s;
position: fixed;
width: 4px;
}
.cursor--click span {
height: 0;
margin: 2px 0 0 2px;
width: 0;
}
.cursor-trail {
border: 2px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 32px;
margin: 0;
pointer-events: none;
position: fixed;
transform-origin: center center;
transition: border-color 0.12s ease-out, height 0.12s ease-out, margin 0.12s ease-out, opacity 0.12s ease-out, transform 0.24s cubic-bezier(0, 0.5, 1, 1), width 0.12s ease-out;
width: 32px;
z-index: 1000;
}
.cursor-trail--hover {
height: 4px;
margin: 16px 0 0 16px;
opacity: 0;
width: 4px;
}
/* Prev */
.cursor-prev span,
.cursor-next span {
border-radius: 0;
height: 2px;
transition: height 0.12s, opacity 0.12s, transform 0.12s, width 0.12s;
transform-origin: center center;
left: -16px;
width: 32px;
&:before,
&:after {
background: black;
content: "";
display: block;
height: 2px;
opacity: 0;
width: 16px;
position: absolute;
transform-origin: center left;
}
&:before {
animation: cursor-prev 0.12s ease-in-out 0.32s forwards;
}
&:after {
animation: cursor-next 0.12s ease-in-out 0.32s forwards;
}
}
.cursor-next span {
transform: rotate(-180deg);
}
#keyframes cursor-prev {
0% {
transform: rotate(0);
}
100% {
opacity: 1;
transform: rotate(-45deg);
}
}
#keyframes cursor-next {
0% {
transform: rotate(0);
}
100% {
opacity: 1;
transform: rotate(45deg);
}
}
/* SWIPER */
.swiper {
height: 100%; // Fits image in viewport
position: relative;
//overflow: hidden; // Removed which seems to help border getting cut off
touch-action: pan-y;
z-index: 1; // Fix of Webkit flickering
-webkit-user-select: none; // Fixes issue in Safari when clicking carousel quickly, page is highlighted black.
}
.swiper-wrapper {
box-sizing: border-box;
display: flex;
height: 100%;
position: relative;
width: 100%;
z-index: 1;
}
.swiper-slide {
backface-visibility: hidden;
flex-shrink: 0;
height: 100%;
max-height: 100%; // Added myself
pointer-events: none;
position: relative;
transform: translateZ(0);
transition: opacity 12ms ease-out !important;
width: 100%;
}
.swiper-slide-active {
pointer-events: auto;
}
.swiper-button-prev,
.swiper-button-next {
background: none;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: absolute;
top: 0;
width: 50%;
z-index: 10;
&:focus {
outline: 0;
}
}
.swiper-button-prev {
left: 0;
}
.swiper-button-next {
right: 0;
}
.swiper-pagination-current {
margin-right: 4px;
}
.swiper-pagination-total {
margin-left: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.2/swiper-bundle.min.js"></script>
<script>
document.body.className = 'hidden';
</script>
<div class="cursor"><span></span></div>
<div class="cursor-trail"></div>
<div class="page-head" role="banner">
<div class="site-logo">
M
</div>
<p class="contrast"><span class="contrast__switch"></span><span class="contrast__label">Contrast</span></p>
</div>
<div class="grid" role="main">
<div class="grid__item finder">
<div class="hgroup title-bar">
<h1 class="brand-name">Name of Page</h1>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="grid__item gallery">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" data-caption="1 Caption that is really, really, really, really long">
<img src="https://www.fillmurray.com/700/1000" />
</div>
<div class="swiper-slide" data-caption="2 Caption that is really, really, really, really long">
<img src="https://www.fillmurray.com/700/1100" />
</div>
<div class="swiper-slide" data-caption="3 Caption that is really, really, really, really long">
<img src="https://www.fillmurray.com/700/1200" />
</div>
</div>
<a class="swiper-button-prev" data-interaction="cursor-prev"></a>
<a class="swiper-button-next" data-interaction="cursor-next"></a>
</div>
</div>
<div class="page-foot" role="contentinfo">
<p class="swiper-caption">Caption that is really, really, really, really long...</p>
<p class="swiper-pagination"></p>
</div>
</div>
const hasClassRetro = document.documentElement.classList.contains('retro')
var caption = document.querySelector('.swiper-caption span');
const swiper = new Swiper('.swiper', {
// Disable preloading of all images
preloadImages: true,
// Enable lazy loading
lazy: false,
effect: hasClassRetro ? 'slide' : 'fade',
fadeEffect: {
crossFade: true
},
loop: hasClassRetro ? false : true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
on: {
init: function() {
updateCaptionText(this);
},
activeIndexChange: function() {
updateCaptionText(this);
}
}
});
function updateCaptionText(slider) {
caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}
swiper.autoplay.stop();
window.addEventListener("DOMContentLoaded", () => {
document.body.className = "visible";
setTimeout(() => swiper.autoplay.start(), 640); // 1000 means 1s, it's in ms here.
});

Hamburger button is not on the right place

I made a website, which is mobile responsive with a sticky header. But on Iphones the hamburger button is not in the right place, and also doesn't move with the sticky header perfectly. I don't know it is because of the Safari, however, I did not meet with this problem on other tools, only on iPhones. If I change the place of the Hamburger button in one place it won't look good on another phone.
I don't use Bootstrap.
My question is, how could I make my hamburger button to look good on every mobile?
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: 20%;
transform: translate(-5%, -280%); /*this was 200 with absolute*/
z-index: 2;
}
.nav-links
{ margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
transform: translate(0%, -285%); /*this was 200 with absolute*/
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
transform: translate(0%, -330%);
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
transform: translate(0%, -300%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
transform: translate(0%, -320%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
transform: translate(0%, -270%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
transform: translate(0%, -245%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="./img/logo.png" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>

First Method
add align-items: center; to nav tag. that is
nav{align-items: center;}
Also remove top:20%; in hamburger class. That is
.hamburger{top:20%}
position:fixed element having atleast assign one of the top, left, bottom, right.
So, here right:5% is only enough.
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
align-items: center;
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>
Second Method
We can align Hamburger icon to center by without translate
instead of adding
top:20%;
to calculated by
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>

Why isn't the background-size or background-repeat property working on my image slider?

I'm making an image slider in my JS and right now I'm just working on the right arrow button and having it cycle up through images in my img folder when that button is clicked. However when I click the arrow to go to the next image, the new image loses a couple properties I have set on it in the CSS; the background size and repeat properties. The fix I found was just adding them back on in the JS.
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat'; // Have to add this property back on even though its already in the CSS
img.style.backgroundSize = 'cover'; // Have to add this property back on even though its already in the CSS
})
I don't want to do this though. Why do these properties stop working when I change the image?? Also I can't post my full code here because its too long and and the fiddle link won't be much help because you can't see the images
https://jsfiddle.net/yat5ncmk/3/
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
let num = 1;
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
leftArrow.addEventListener('click', function() {
})
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat';
img.style.backgroundSize = 'cover';
})
// window.sr = ScrollReveal();
// sr.reveal('.logo-wrap', {
// duration: 2000,
// origin: 'left',
// });
// sr.reveal('.w1', {
// duration: 2000,
// origin: 'bottom'
// });
// sr.reveal('.w2', {
// duration: 3000,
// origin: 'bottom'
// });
// sr.reveal('.w3', {
// duration: 4000,
// origin: 'bottom'
// });
// sr.reveal('.b1', {
// duration: 2000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('.b2', {
// duration: 1500,
// origin: 'top',
// distance: '75px'
// });
// sr.reveal('.b3', {
// duration: 1000,
// origin: 'top',
// distance: '100px'
// });
// sr.reveal('#left', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('#right', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
let num = 1;
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
leftArrow.addEventListener('click', function() {
})
rightArrow.addEventListener('click', function() {
num++;
img.style.background = 'url(img/fam-' + num + '.jpeg)';
img.style.backgroundRepeat = 'no-repeat'; // Have to add this property back on even though its already in the CSS
img.style.backgroundSize = 'cover'; // Have to add this property back on even though its already in the CSS
})
// window.sr = ScrollReveal();
// sr.reveal('.logo-wrap', {
// duration: 2000,
// origin: 'left',
// });
// sr.reveal('.w1', {
// duration: 2000,
// origin: 'bottom'
// });
// sr.reveal('.w2', {
// duration: 3000,
// origin: 'bottom'
// });
// sr.reveal('.w3', {
// duration: 4000,
// origin: 'bottom'
// });
// sr.reveal('.b1', {
// duration: 2000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('.b2', {
// duration: 1500,
// origin: 'top',
// distance: '75px'
// });
// sr.reveal('.b3', {
// duration: 1000,
// origin: 'top',
// distance: '100px'
// });
// sr.reveal('#left', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
// sr.reveal('#right', {
// duration: 1000,
// origin: 'top',
// distance: '50px'
// });
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url(img/mex-9.jpg);
width: 100%;
height: 100vh;
background-size: cover;
background-attachment: fixed;
background-position: center;
display: flex;
}
.nav-wrap {
flex-basis: 40%;
}
.nav-wrap i {
color: white;
font-size: 2rem;
position: absolute;
right: -33px;
top: 0px;
transition: all .1s ease;
}
.nav-wrap i:hover {
cursor: pointer;
transform: scale(1.15);
}
.nav-box {
margin-left: 50px;
margin-top: 100px;
max-width: 70px;
cursor: pointer;
position: fixed;
z-index: 10;
}
.b1, .b2, .b3 {
width: 70px;
height: 8.5px;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: all .15s ease;
}
.b1 {
background-color: #56ff47;
}
.b3 {
background-color: #ff4c4c;
}
.ham-open .b1 {
background-color: #56ff47;
transform: translateY(100px);
position: relative;
z-index: 1;
}
.ham-open .b2 {
transform: translateY(81.5px);
width: 110px;
position: relative;
left: 60px;
z-index: 0;
}
.ham-open .b3 {
background-color: #ff4c4c;
transform: translateY(63px);
width: 140px;
position: relative;
left: 160px;
z-index: 2;
}
.menu {
display: flex;
border-left: 8px solid #56ff47;
flex-direction: column;
background-color: #fff;
margin-left: -700px;
width: 292px;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
border-radius: 5px;
top: 225px;
transition: all .15s;
z-index: 10;
}
.menu a {
text-decoration: none;
color: limegreen;
font-family: 'Kumar One Outline';
font-size: 2.3rem;
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
transition: all .5s ease;
}
a:hover {
color: #007001;
}
.info-wrap {
flex-basis: 60%;
}
.info {
font-family: 'Cedarville Cursive';
color: white;
font-weight: bold;
font-size: 4.5rem;
text-align: center;
margin-top: 60px;
}
.logo-wrap {
display: flex;
justify-content: center;
flex-direction: column;
}
.logo-wrap div {
font-family: 'Staatliches';
color: white;
font-size: 13rem;
font-weight: bold;
letter-spacing: 10px;
margin-bottom: -5rem;
position: relative;
margin-left: auto;
margin-right: auto;
}
/*---------------ABOUT---------------*/
.about-section {
background-color: #17a832;
width: 100%;
position: relative;
}
.about-section h1 {
text-align: center;
font-size: 4.5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.about-line {
width: 350px;
height: 5px;
background-color: #ddae1a;
border-radius: 4px;
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.about-wrap {
display: flex;
padding-bottom: 150px;
}
.about-info, .image-slider-wrap {
flex-basis: 50%;
}
.about-info p {
color: white;
font-family: 'Josefin Sans';
font-size: 2rem;
margin-left: 100px;
margin-bottom: 0;
margin-top: 0;
}
.image-slider {
width: 650px;
height: 400px;
background: url(img/fam-1.jpeg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 13px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.image-slider i {
color: white;
font-size: 5rem;
position: absolute;
top: 50%;
margin-top: -40px;
transition: all .1s ease;
cursor: pointer;
}
#left {
transform: rotate(-90deg);
left: -30px;
max-width: 50px;
}
#right {
transform: rotate(90deg);
right: -30px;
}
#left:hover {
transform: rotate(-90deg) scale(1.3);
}
#right:hover {
transform: rotate(90deg) scale(1.3);
}
.burrito, .taco, .guac, .nachos, .hot {
position: absolute;
transform: rotate(-45deg);
bottom: -130px;
right: 200px;
width: 300px;
height: 300px;
z-index: 3;
background-repeat: none;
}
.hot {
right: 345px;
width: 240px;
height: 240px;
z-index: 2;
transform: rotate(0deg);
}
.burrito {
bottom: -140px;
right: 180px;
z-index: 1;
}
.nachos {
transform: rotate(0deg);
right: 380px;
width: 165px;
height: 165px;
bottom: -170px;
}
.taco {
transform: rotate(0deg);
width: 220px;
height: 220px;
bottom: -180px;
right: 460px;
}
.guac {
transform: rotate(0deg);
right: 140px;
bottom: -180px;
width: 250px;
height: 250px;
}
.food-wrap {
position: relative;
right: 20px;
}
/*---------------MENU---------------*/
.menu-section {
background-color: #ddae1a;
display: flex;
width: 100%;
top: -100px;
position: relative;
clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
/*background-image: linear-gradient(4deg, #edb12f 92%, #17a832 92%, #17a832);*/
}
.menu-section h1 {
font-size: 9.5rem;
position: absolute;
top: 30px;
left: 230px;
margin-top: -30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.menu-line {
width: 450px;
height: 5px;
background-color: #17a832;
border-radius: 4px;
position: absolute;
top: 220px;
left: 225px;
}
.column-left, .column-right, .column-middle {
flex-basis: 33.33%;
margin-top: 230px;
padding-bottom: 120px;
}
.column-left {
display: flex;
justify-content: flex-end;
}
.column-left #combo-platter:after {
display: block;
content: "beans and rice included";
color: white;
font-size: 1.5rem;
font-family: 'Josefin Sans';
margin-top: -25px;
}
.column-left h2:not(#combo-platter):after, .column-middle h2:after, .column-right h2:after {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: white;
border-radius: 3px;
margin-top: -25px;
}
.column-middle {
display: flex;
justify-content: center;
}
.column-right {
display: flex;
justify-content: flex-start;
}
.column {
min-width: 420px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.column h2 {
display: inline-block;
align-self: center;
font-family: 'Cedarville Cursive';
color: #17a832;
font-size: 3rem;
}
.row {
font-family: 'Josefin Sans';
font-size: 1.5rem;
}
.row div {
display: flex;
justify-content: space-between;
}
.row div:after {
display: inline-block;
position: absolute;
content: "";
width: 100%;
margin-top: 33px;
border-top: 4px dotted black;
}
.row div p {
background: #ddae1a;
overflow: hidden;
position: relative;
z-index: 1;
padding: 0 6px;
}
.menu-h2 {
text-align: center;
}
.design-left, .design-right {
position: absolute;
}
.design-right {
right: 0;
transform: rotate(180deg);
}
.arrow-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid green;
position: relative;
top: -10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right:60px solid limegreen;
position: relative;
top: 20px;
}
.arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #20a04b;
position: relative;
top: -100px;
left: 60px;
}
.top-middle {
position: relative;
top: -110px;
}
.bottom-middle .arrow-left {
top: -40px;
}
.bottom-middle .move {
top: -70px;
}
.bottom {
position: relative;
top: -48px;
}
.bottom .arrow-left {
top: -40px;
}
/*---------------HOURS---------------*/
.hours-section {
background-color: #17a832;
margin-top: -155px;
clip-path: polygon(0% 5%, 4.8% 0%, 95% 0%, 100% 4.8%, 100% 100%, 0% 100%);
position: relative;
}
.hours-section h1 {
text-align: center;
font-size: 5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.hours-line-left {
width: 750px;
height: 10px;
border-radius: 4px;
background-color: #ff4c4c;
position: absolute;
top: 10%;
left: 50px;
}
.hours-line-right {
width: 750px;
height: 10px;
border-radius: 4px;
background-color: #56ff47;
position: absolute;
top: 10%;
right: 50px;
}
.hours-wrap {
display: flex;
justify-content: center;
padding-bottom: 100px;
}
.hours {
display: flex;
border: 7px solid green;
padding: 25px;
}
.hours div div {
background-color: white;
color: black;
margin-bottom: 20px;
padding: 8px;
font-size: 3rem;
font-family: 'Josefin Sans';
border-right: 10px solid #56ff47;
}
.hours div div:last-child {
margin-bottom: 0;
}
.hours p {
margin: 0;
text-align: center;
}
.hours-open div {
margin-left: 30px;
}
.hours .hours-open p {
padding: 0 5px;
}
.design-wrap-left-side {
position: absolute;
left: 0;
top: 29.8%;
}
.hex-left, .hex-right {
-webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
width: 165px;
height: 165px;
background-color: limegreen;
top: 152px;
left: -16.5px;
position: absolute;
}
.hex-right {
top: 152px;
right: -16.5px;
}
.hex-inner {
-webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
width: 135px;
height: 135px;
background-color: #17a832;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.hex-arrow-left, .hex-arrow-right {
width: 0;
height: 0;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 70px solid limegreen;
position: absolute;
top: 200px;
right: -150px;
}
.design-wrap-right-side {
transform: rotate(180deg);
position: absolute;
right: 0;
bottom: 19.4%;
}
.hours-wrap .design-wrap-left {
transform: rotate(180deg);
position: relative;
top: -80px;
}
.hours-wrap .design-wrap-right {
position: relative;
top: 80px;
}
.design-wrap-left .arrow-top,
.design-wrap-right .arrow-top,
.design-wrap-left-side .arrow-top,
.design-wrap-right-side .arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid limegreen;
position: relative;
top: -100px;
left: 60px;
}
.change-color {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #6acc66;
position: absolute;
top: -10px;
}
/*---------------FOOTER---------------*/
.contact-section-background {
background-color: #666;
height: 300px;
clip-path: polygon(0% 0%, 10% 30%, 90% 30%, 100% 0%, 100% 100%, 0% 100%);
margin-top: -100px;
}
.contact-section {
display: flex;
background-color: #595959;
margin-top: -225px;
position: relative;
padding-bottom: 18px;
z-index: 1;
}
.contact, .location {
flex-basis: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.contact h1, .location h1 {
margin: 0;
font-family: 'Cedarville Cursive';
color: white;
font-size: 7rem;
}
.hex {
-webkit-clip-path: polygon(25% 60%, 75% 60%, 100% 100%, 0% 100%);
background-color: #17a832;
transform: rotate(180deg);
width: 300px;
height: 150px;
margin: 0 auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.rhombus {
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #17a832;
width: 80px;
height: 80px;
position: absolute;
margin: 0 auto;
top: 60px;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.contact p {
font-family: 'Josefin Sans';
font-size: 2rem;
margin-top: 0;
margin-bottom: 10px;
color: white;
}
.textarea {
position: relative;
min-width: 500px;
}
.contact textarea {
resize: none;
width: 100%;
color: #595959;
margin: 10px;
min-height: 150px;
font-family: 'Josefin Sans';
font-size: 1.5rem;
padding: 5px;
outline: none;
border: none;
background: #474646;
border-radius: 4px;
}
.contact button {
font-size: 1.5rem;
font-family: 'Josefin Sans';
background: darkgrey;
color: #595959;
padding: 4px;
padding-right: 6px;
padding-left: 6px;
border: none;
border-radius: 4px;
cursor: pointer;
position: absolute;
bottom: 10px;
right: -20px;
transition: all .4s ease;
}
.contact button:hover {
color: #ddae1a;
}
.contact-line {
margin-top: 170px;
margin-bottom: 30px;
width: 5px;
border-radius: 3px;
height: 350px;
background: #ddae1a;
position: relative;
}
.links {
display: flex;
position: relative;
max-width: 400px;
top: -5px;
left: 7px;
}
.links i {
font-size: 2.5rem;
margin-right: 15px;
}
.links p {
font-size: 1.5rem;
margin-right: 30px;
margin-top: 8px;
}
#facebook {
color: #3b64ed;
cursor: pointer;
}
#twitter {
color: #5effeb;
cursor: pointer;
}
#yelp {
color: red;
cursor: pointer;
}
.contact-design-wrap-left {
position: absolute;
left: 0;
top: 40px;
max-height: 500px;
}
.contact-design-wrap-right {
position: absolute;
bottom: 40px;
right: 0;
transform: rotate(180deg);
}
.contact-design-wrap-left .bottom {
height: 0;
}
#align {
position: absolute;
left: 70px;
top: -15px;
}
#align2 {
position: absolute;
left: 68px;
top: -5px;
}
.grey {
border-left: 60px solid #666;
}
.light-grey {
border-right: 60px solid #848484;
}
.same {
border-left: 60px solid #848484;
}
.lighter {
border-right: 60px solid #a8a3a3;
}
.map {
position: relative;
top: 50px;
}
.map i {
position: absolute;
color: #ddae1a;
font-size: 4rem;
left: 50%;
margin-left: -24px;
}
.location .map .street-1 {
width: 300px;
position: relative;
top: 80px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-2 {
width: 300px;
height: 15px;
position: relative;
top: 65px;
left: 300px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-3 {
margin-top: 40px;
width: 600px;
position: relative;
top: 30px;
height: 18px;
background-color: #848484;
border-radius: 8px;
}
.street-info {
color: white;
position: absolute;
font-family: 'Josefin Sans';
font-size: 1.2rem;
left: 20px;
padding-top: 3px;
}
.address {
position: absolute;
left: 50%;
top: 75px;
margin-left: -68.5px;
color: #ddae1a;
text-decoration: none;
font-family: 'Josefin Sans';
font-size: 1.2rem;
text-align: center;
}
.address:hover {
color: #ddae1a;
text-decoration: underline;
}
.copyright {
position: absolute;
bottom: 0;
left: 50%;
font-family: 'Josefin Sans';
color: #a8a3a3;
font-size: 1.8rem;
padding-bottom: 5px;
margin: 0 0 0 -253.89px;
}

when you reset the background-image via background, you reset also every other properties.
first thing to do is to reset only background-image not background which is the shorthand for most of the bg properties.
then, you might not need to reset background-size
rightArrow.addEventListener('click', function() {
num++;
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
})
fiddle uses lorempixel image for demo https://jsfiddle.net/rnxwsf2q/

The background property contains ALL of the background-x subproperties in it.
Just set background-image instead.

Automatic resize photo issue

I've found this amazing plugin called Flickity, passing through the styling options I've managed to create synced carousel with images.
The issue I can't resolve is how to make images to resize according to device width. I am implementing it to work with kind of horizontal scrolling page. How should I go about this?
Codepen link
HTML
<div class="gallery gallery-nav js-flickity gallerysub"
data-flickity-options='{ "asNavFor": ".gallery-main", "contain": true, "pageDots": false, "imagesLoaded": true, "percentPosition": false, "prevNextButtons": false, "cellAlign": "left"}'>
<div class="nav" > <img src="http://s27.postimg.org/u7fo6xssj/image.jpg"></div>
<div class="nav" > <img src="http://s27.postimg.org/z8n28b08z/image.jpg"></div>
<div class="nav" > <img src="http://s27.postimg.org/4sh5a6epv/image.jpg"></div>
<div class="nav" > <img src="http://s27.postimg.org/52ontitc3/image.jpg"></div>
</div>
<div class="gallery gallery-main js-flickity gallerymain" data-flickity-options='{"freeScroll": true, "wrapAround": true, "prevNextButtons": false, "pageDots": false, "imagesLoaded": true, "percentPosition": false}'>
<div class="for" > <img src="http://s27.postimg.org/u7fo6xssj/image.jpg"></div>
<div class="for" > <img src="http://s27.postimg.org/z8n28b08z/image.jpg"></div>
<div class="for" > <img src="http://s27.postimg.org/4sh5a6epv/image.jpg"></div>
<div class="for" > <img src="http://s27.postimg.org/52ontitc3/image.jpg"></div>
</div>
CSS
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus { outline: none; }
.flickity-viewport {
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: white;
background: hsla(0, 0%, 100%, 0.75);
cursor: pointer;
/* vertically center */
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.flickity-prev-next-button:hover { background: white; }
.flickity-prev-next-button:focus {
outline: none;
box-shadow: 0 0 0 5px #09F;
}
.flickity-prev-next-button:active {
filter: alpha(opacity=60); /* IE8 */
opacity: 0.6;
}
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button:disabled {
filter: alpha(opacity=30); /* IE8 */
opacity: 0.3;
cursor: auto;
}
.flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-prev-next-button .arrow {
fill: #333;
}
/* color & size if no SVG - IE8 and Android 2.3 */
.flickity-prev-next-button.no-svg {
color: #333;
font-size: 26px;
}
/* ---- page dots ---- */
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
filter: alpha(opacity=25); /* IE8 */
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
filter: alpha(opacity=100); /* IE8 */
opacity: 1;
}
/* external css: flickity.css */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
.gallery-main img {
display: block;
height: 600px;
}
.gallery-nav img {
display: block;
height: 93px;
}
div.for {
margin-right: 30px;
}
.gallerymain {
margin-top: 30px;
}
.gallerysub {
margin-top: 30px;
}