We Keep Coding

Load/replace an img or video specified in a data-src

My aim is to display a different image or video displayed within a div, which changes when other elements are hovered over.
I think I have this working with just an image by checking what image file is specified in a data-src and loading that into an img tag on the page. However I need to change the markup from img to video when a movie file is specifed - that's what I need help with.
You can see the 'working' image version here (not the 3rd item has a placeholder video in the data-src so won't show):
https://codepen.io/moy/pen/BaNxzdL
So currently on the page I have this empty image tag:
<div class="carousel__bg">
<img src="" />
</div>
Image files are specified on multiple carousel items in a data-src like the example below:
<div class="carousel__item" data-src="img/content/1-wide.jpg">
<div class="carousel__content">
<h4 class="carousel__title">Behind The Scenes</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Denim Cox in Fuck Yes Dude!</h2>
Read the Article
</div>
<img src="img/content/1.jpg" class="carousel__image" />
</div>
And the javascript that gets the image URL and adds it to the page is this:
$(function() {
var overlay = $('.carousel__bg img'), cached = {};
$('.carousel__item').mouseenter(function() {
var item = $(this),
spot = $(this).index('.carousel__item'),
value = item.attr('data-src');
overlay.fadeTo(0,0).attr('src', value);
if (!overlay[0].complete && !cached[spot]) {
cached[spot] = true;
$('.carousel__bg').addClass('loading');
overlay.one('load', function() {
$('.carousel__bg').removeClass('loading');
overlay.fadeTo(300,1);
});
}
else overlay.fadeTo(300,1);
})
.mouseleave(function() {
overlay.finish();
});
});
Obviously the problem is if I specify data-src="video/safari.mp4" it isn't going to work as it's currently trying to add the video into an img element. So how would I go about switching between img/video tags? A related issue would be to be able to load both an mp4 + webm/ogg versions of the file?
So would it need to be reworked to 'inject' an img or video element onto the page depending on the extension? I tried using an if/else statement to check if the data-src contained the .mp4 extension and just hardcoded a video element on the page to text but couldn't get that to work. :/
These files can be quite large which is why I'm not loading them until they're needed.
Edit
As a bit of an aside, I decided to put these items in a carousel to see if this effect would work - and it pretty much does!
However, I noticed the way that I fade out the images in the CSS (fade all of them out when the .carousel is hovered but then target the individual item and overwrite) is now a problem when you hover over the prev/next buttons as the images don't fade back in.
Anyone got a better way of handling this? I tried a 100% CSS method but maybe added a class would be better?
Slick carousel example: https://codepen.io/moy/pen/JjdvRyG

The video element part is not two hard, the important part is getting the mime type of the video to add to the source element.
The data-src takes an array of video urls (of different types) and adds the different sources to the element after finding the type.
I updated your codepen
As for the buttons, they are inside the .carousel element so the will bubble the hover to all the elements styled based on that. I made some elements more specific so they will only change style when the list of items is hovered.
Finally, in order for the listeners to apply to the slick element, I changed them to .on.
var VIDEO_TYPES = {
'mp4': 'video/mp4',
'webm': 'video/webm',
'ogv': 'video/ogg',
}
/**
* Slick
*/
$(document).ready(function() {
$('.slick-carousel').slick({
//centerMode: true,
centerPadding: '0',
slidesToShow: 3,
arrows: true,
dots: false,
prevArrow: '<a class="slick-arrow slick-arrow--prev"><span>←</span></a>',
nextArrow: '<a class="slick-arrow slick-arrow--next"><span>→</span></a>',
responsive: [{
breakpoint: 960,
settings: {
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 600,
settings: {
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
centerMode: true,
slidesToShow: 1
}
}
]
})
.on('setPosition', function(event, slick) {
slick.$slider.find(".slick-slide .tile:not(.position-set)").addClass('position-set').css('height', slick.$slideTrack.height() - 30 + 'px');
});
/**
* Image Swap
*/
var cached = {};
var overlay_video = $(".carousel__bg video");
var overlay_img = $(".carousel__bg img");
var overlay = $(".carousel__bg");
$(".carousel__item")
.on('mouseenter', function() {
var item = $(this),
spot = $(this).index(".carousel__item"),
value = item.data("src");
overlay_video.empty();
var overlay_item;
overlay.fadeTo(0, 0);
//videos will have an array ur urls
var is_video = value instanceof Array;
if(is_video) {
overlay_item = overlay_video;
overlay_img.attr("src", '');
overlay_video.append(value.map((url) => {
var extension = url.split('.').pop();
var type = VIDEO_TYPES[extension];
return `<source src="${url}" type="${type}">`
}));
} else {
overlay_item = overlay_img;
overlay_img.attr("src", value);
}
//force the video element to reload
overlay_video.get(0).load();
if (!overlay_item.complete && !cached[spot]) {
cached[spot] = true;
overlay.addClass("loading");
overlay_item.one(is_video ? "loadeddata" : "load", function() {
overlay.removeClass("loading");
overlay.fadeTo(300, 1);
});
} else overlay.fadeTo(300, 1);
})
.on('mouseleave', function() {
overlay.finish();
});
});
/**
* Base styling.
*/
html {
background: rgb(255,255,255);
font-size: 62.5%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
}
body {
background-color: transparent;
color: rgb(0,0,0);
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.6rem;
margin: 0;
padding: 30px 0 0;
text-rendering: optimizeLegibility;
}
/**
* Carousel
*/
.carousel {
background: rgb(0,0,0);
color: rgb(255,255,255);
height: 640px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
max-width: 1200px;
}
.carousel:before,
.carousel:after {
background: rgba(255,255,255,.25);
content: "";
height: 100%;
position: absolute;
top: 0;
left: 33.33333%;
width: 1px;
z-index: 30;
}
.carousel:after {
left: 66.66666%;
}
/**
* Background (fullwidth) image
*/
.carousel__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel__bg.loading {
background: url(../img/interface/loading.gif) no-repeat center center;
}
.carousel__bg img, .carousel__bg video {
display: block;
height: 640px;
object-fit: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
}
/**
* Individual carousel item
*/
.carousel__item {
box-sizing: border-box;
float: left;
height: 640px;
position: relative;
width: 33.33333%;
}
.carousel__item:hover {
cursor: pointer;
}
/* Text Content */
.carousel__content {
background: rgba(0,0,0,.45);
box-sizing: border-box;
color: rgb(255,255,255);
height: 100%;
min-height: 100%;
padding: 30px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 15;
}
.carousel__title,
.carousel__subtitle,
.carousel__flag {
color: rgb(255,255,255);
letter-spacing: 1px;
font-family: 'Anton', sans-serif;
font-weight: 400;
line-height: 1;
margin: 0 0 5px;
padding: 0;
text-transform: uppercase;
}
.carousel__title {
font-size: 20px;
transition: all .25s;
}
.carousel__subtitle {
display: none;
font-size: 48px;
}
.carousel__flag {
color: rgb(45,190,193);
font-size: 14px;
}
/* Button */
.carousel__btn {
background: transparent;
border: 1px solid rgb(255,255,255);
box-sizing: border-box;
color: rgb(255,255,255);
display: block;
font-family: 'Anton', sans-serif;
font-size: 12px;
font-weight: 400;
height: 45px;
line-height: 45px;
letter-spacing: 1px;
opacity: 0;
position: absolute;
padding: 0 30px;
bottom: 30px;
left: 30px;
right: 30px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all .15s;
-webkit-backface-visibility: hidden;
}
.carousel__btn:visited {
background: transparent;
}
.carousel__btn:focus,
.carousel__btn:hover {
background: rgb(45,190,193);
border-color: rgb(45,190,193);
}
/* Image */
.carousel__image {
display: block;
height: 100%;
opacity: 1;
object-fit: cover;
transition: all .30s;
position: relative;
width: 100%;
max-width: 100%;
-webkit-backface-visibility: hidden;
}
/* When hovering over the carousel, fade all the titles out */
.carousel>.slick-carousel>.slick-list:hover .carousel__title {
opacity: .30;
}
/* But not the one contained without the 'item' you're hovering over */
.carousel:hover .carousel__item:hover .carousel__title {
opacity: 1;
}
/* Fade all images out so the fullwidth background image is visble */
.carousel>.slick-carousel>.slick-list:hover .carousel__image {
opacity: 0;
}
/* Hide the flag element */
.carousel>.slick-carousel>.slick-list:hover .carousel__flag {
display: none;
}
/* Show the subtitle */
.carousel:hover .carousel__item:hover .carousel__subtitle {
display: block;
}
/* Display the CTA of the active item */
.carousel:hover .carousel__item:hover .carousel__btn {
opacity: 1;
}
/* Slick Prev/Next */
.slick-carousel,
.slick-list,
.slick-track {
height: 100%;
min-height: 100%;
}
.slick-arrow {
background: transparent;
border: 1px solid rgb(255,255,255);
color: rgb(255,255,255);
display: block;
font-family: 'Anton', sans-serif;
font-size: 24px;
height: 45px;
line-height: 45px;
margin-top: -30px;
overflow: hidden;
position: absolute;
top: 50%;
left: 30px;
text-align: center;
transform: rotate(45deg);
transition: all .15s;
width: 45px;
z-index: 60;
}
.slick-arrow:hover {
background: rgb(255,255,255);
color: rgb(0,0,0);
}
.slick-arrow span {
display: block;
transform: rotate(-45deg);
}
.slick-arrow--next {
left: auto;
right: 30px;
}
/* Slick Core */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="carousel">
<div class="carousel__bg">
<img src="" />
<video autoplay muted loop></video>
</div>
<div class="slick-carousel">
<div class="carousel__item" data-src="https://www.fillmurray.com/750/550">
<div class="carousel__content">
<h4 class="carousel__title">Behind The Scenes</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
Read the Article
</div>
<img src="https://www.fillmurray.com/g/400/600" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://www.fillmurray.com/800/600">
<div class="carousel__content">
<h4 class="carousel__title">Reed Stark</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
Watch the Video
</div>
<img src="https://www.fillmurray.com/g/450/650" class="carousel__image" />
</div>
<div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>
<div class="carousel__content">
<h4 class="carousel__title">Fresh Drops</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
See The Collection
</div>
<img src="https://www.fillmurray.com/g/350/550" class="carousel__image" />
</div>
<div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>
<div class="carousel__content">
<h4 class="carousel__title">Fresh Drops</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
See The Collection
</div>
<img src="https://www.fillmurray.com/g/300/500" class="carousel__image" />
</div>
</div>
</div>

Image stretch on Macbook / Safari, all screen sizes

The page with the issue:
https://www.fastforwardcomposites.com/foiling-luxury-catamaran-eagle-class
My client is experiencing stretched images on Safari or Mac OS/Macbook only. I can't test why or fix it because I do not own a Mac. Wondering if there is anything I can do that fits within my code to prevent image stretch WHILE keeping the aspect ratio of the pictures and scaling up and down correctly on all screen sizes. I have set the width to a %, and the height to "auto". The code in question is a little long because it is housed inside a big tabbed content area, but you can safely assume any images that I've styled to be responsive within the tabs are stretching poorly on Mac (you can ignore the gallery tab, that's working fine).
Is there any way to set the images to be responsive and snap down to fit the size of the container as the screen is resized on Safari without using set px values? Or is my only option to set the images to a specific PX height and width for every single possible screen size? I'd obviously like to avoid that, as the images are already responsive and resize quite nicely on all other browsers and OS. Thanks guys!
/* ======================================================================== *
* * * * * * * * * * * * * * * * * * TABS * * * * * * * * * * * * * * * * * *
========================================================================== */
.tabs {
position: relative;
margin: 40px auto;
width: 92%;
max-width: 100%;
overflow: hidden;
padding-top: 10px;
margin-bottom: 60px;
}
.tabs input {
position: absolute;
z-index: 1000;
width: 12.4857142857%;
height: 50px;
left: 0;
top: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
cursor: pointer;
margin: 0;
}
.tabs input#tab-2 {
left: 12%;
}
.tabs input#tab-3 {
left: 24%;
}
.tabs input#tab-4 {
left: 36%;
}
.tabs input#tab-5 {
left: 48%;
}
.tabs input#tab-6 {
left: 60%;
}
.tabs input#tab-7 {
left: 72%;
}
.tabs input#tab-8 {
left: 84%;
}
.tabs label {
background: #e1e1e1;
color: #333;
font-size: 14px;
line-height: 50px;
height: 56px;
border-radius: 0;
position: relative;
top: 0;
padding: 0 20px;
float: left;
display: block;
width: 12.5%;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
box-sizing: border-box;
-webkit-transition: all 150ms ease 0s;
transition: all 150ms ease 0s;
}
.tabs label:hover {
cursor: pointer;
}
.tabs label:after {
content: '';
background: #d8d8d8;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
display: block;
}
.tabs input:hover + label {
background: #b9b9b9;
}
.tabs label:first-of-type {
z-index: 4;
}
.tab-label-2 {
z-index: 4;
}
.tab-label-3 {
z-index: 3;
}
.tab-label-4 {
z-index: 2;
}
.tabs input:checked + label {
background: #f0f0f0;
color: #1a1a1a;
z-index: 7;
}
.clear-shadow {
clear: both;
}
.content {
height: auto;
width: 100%;
float: left;
position: relative;
z-index: 7;
background: #f2f2f2;
top: -10px;
box-sizing: border-box;
}
.content div {
position: relative;
float: left;
width: 0;
height: 0;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
background: #f2f2f2;
}
.content .ec-container, .content .ec-container .gallery, .content .ec-container .gallery div {
width: 100% !important;
height: 100% !important;
opacity: 1 !important;
margin: 20px auto 0 auto;
}
.content div h2 {
margin-top: 0;
}
.tabs .tab-selector-1:checked ~ .content .content-1,
.tabs .tab-selector-2:checked ~ .content .content-2,
.tabs .tab-selector-3:checked ~ .content .content-3,
.tabs .tab-selector-4:checked ~ .content .content-4,
.tabs .tab-selector-5:checked ~ .content .content-5,
.tabs .tab-selector-6:checked ~ .content .content-6,
.tabs .tab-selector-7:checked ~ .content .content-7,
.tabs .tab-selector-8:checked ~ .content .content-8 {
z-index: 100;
opacity: 1;
//width: 100% / $numberOfTabs;
width: 100%;
height: auto;
width: 100%;
height: auto;
padding: 4.5%;
}
.content div h2 {
text-align: left;
color: #21bca9;
font-size: 25px;
text-transform: uppercase;
}
.content div p {
font-size: 14px;
line-height: 22px;
text-align: left;
margin: 0;
color: #222;
}
.content-6 {
background-image: url(https://www.lancewalker.life/images/specs/eagle-class-specs-image-4.jpg) !important;
background-position: 5% 100% !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.tabs-link {
color: #777;
text-decoration: underline !important;
}
.tabs-link:hover {
color: #9e9e9e;
}
.tab-img-lg {
display: flex;
margin: 10px auto 60px auto;
width: 100%;
}
.tab-img-vert {
margin: 0 auto;
display: flex;
width: 32% !important;
max-width: 32% !important;
justify-content: space-around;
}
.tab-img-container {
display: flex;
width: 100% !important;
flex-direction: row;
height: unset!important;
opacity: 1 !important;
margin: 60px auto 0 auto;
justify-content: center;
flex-wrap: wrap;
}
.img-tabs-container {
width: 100% !important;
opacity: 1 !important;
display: flex;
height: unset !important;
flex-wrap: wrap;
}
.tab-img-container-col {
display: flex;
width: 48% !important;
height: unset!important;
opacity: 1 !important;
margin: 0 auto 0 auto;
flex-direction: column;
}
.tabs ul li {
font-size: 14px;
line-height: 30px;
text-align: left;
margin: 0;
color: #222;
}
.img-main-tabs {
width: 100%;
}
.img-below-content-tabs-vert {
max-width: 32% !important;
margin: 10px auto;
height: auto !important;
}
.img-below-content-tabs {
max-width: 32% !important;
margin: 10px auto;
height: auto !important;
}
#media screen and (max-width: 999px) {
.img-below-content-tabs-vert {
display: none;
}
.img-below-content-tabs {
display: none;
}
.img-tabs-container {
display: none;
}
.img-below-content-tabs-mobile {
display: flex;
margin: 10px auto;
height: auto;
}
}
#media screen and (min-width: 1000px) {
.img-below-content-tabs-mobile {
display: none;
}
}
#media screen and (max-width: 800px) {
.gallery img {
max-width: ~"calc(50% - 40px)";
margin: 20px;
transition: opacity 200ms;
cursor: pointer;
}
.gallery-no-lb-2-items div {
max-width: 90%;
margin: 20px;
}
.asyncGallery__Dots {
bottom: 15px;
}
.asyncGallery__Counter {
right: 15px;
bottom: 15px;
font-size: 12px;
}
.asyncGallery__Item {
width: 100%;
}
.asyncGallery__ItemImage img {
max-height: none;
max-width: 100%;
}
.asyncGallery__ItemDescription {
padding: 0 20px;
}
.asyncGallery__Next,
.asyncGallery__Prev {
display: none;
}
.gallery {
display: inline-flex;
}
.gallery div {
max-width: 90%;
margin: 10px auto;
}
.gallery div img {
max-width: 100%;
margin: 0 auto;
}
}
/* ================================================================================= *
* * * * * * * * * * * * * * * * * * MEDIA QUERIES * * * * * * * * * * * * * * * * * *
=================================================================================== */
#media screen and (min-width: 768px) {
.tabs input:checked + label {
top: -2px;
}
}
#media screen and (max-width: 767px) {
.tabs label {
font-size: 14px;
line-height: 50px;
height: 50px;
display: flex;
width: 100%;
}
.tabs input {
display: flex;
flex-direction: column;
position: absolute;
z-index: -999;
}
.tabs {
width: 100%;
margin-top: 0;
}
.tabs input#tab-2 {
left: 0;
display: flex;
}
.tabs input#tab-3 {
left: 0;
display: flex;
}
.tabs input#tab-4 {
left: 0;
display: flex;
}
.tabs input#tab-5 {
left: 0;
display: flex;
}
.tabs input#tab-6 {
left: 0;
display: flex;
}
.tabs input#tab-7 {
left: 0;
display: flex;
}
.content {
top: 0;
}
.tab-img-lg {
margin: 20px auto;
}
.tabs .tab-selector-1:checked~.content .content-1,
.tabs .tab-selector-2:checked~.content .content-2,
.tabs .tab-selector-3:checked~.content .content-3,
.tabs .tab-selector-4:checked~.content .content-4,
.tabs .tab-selector-5:checked~.content .content-5,
.tabs .tab-selector-6:checked~.content .content-6,
.tabs .tab-selector-7:checked~.content .content-7,
.tabs .tab-selector-8:checked~.content .content-8 {
padding: 40px 15px;
}
.tab-img-container-col {
width: 100% !important;
}
}
#media screen and (min-width: 1000px) and (max-width: 1599px) {
.arrow-container {
top: 70vh;
}
.gallery div {
max-width: ~"calc(25% - 10px)";
margin: 0 5px 0 5px;
}
.tab-img-sm {
margin: 10px auto;
width: 46.1% !important;
max-width: 46.1% !important;
}
}
#media screen and (max-width: 1200px) {
.tabs-h2 {
margin-top: 20px;
}
.tab-img-sm {
width: 46% !important;
}
p {
font-size: 17px !important;
line-height: 1.9em;
}
h2 {
font-size: 22px !important;
}
.content div p {
font-size: 14px !important;
}
}
#media screen and (min-width: 1001px) and (max-width: 1200px) {
.tabs label {
font-size: 12px;
}
}
#media screen and (max-width: 1000px) {
.tabs label {
font-size: 10px;
}
}
#media screen and (max-width: 766px) {
.arrow-container {
display: none;
}
.tabs p{
line-height: 1.7em;
}
.panel {
padding: 8%;
}
.tab-img-sm {
width: 97% !important;
max-width: 97% !important;
display: flex;
}
.tab-img-vert {
margin: 10px auto;
width: 100% !important;
max-width: 100% !important;
}
}
#media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1023px) and (min-device-width: 767px) {
.arrow-container {
display: none;
}
.gallery div {
max-width: 30%;
margin: 5px 10px;
}
label {
padding: .9% 2.3%;
}
.panel {
padding: 6%;
}
.tabs h3 {
font-size: 14px;
}
.tabs p{
line-height: 1.5em;
}
.tabs input {
position: absolute;
height: 45px;
left: 0;
top: 10px;
}
.tabs {
width: 100%;
}
.tabs label {
font-size: 13px;
padding: 0 10px;
}
.tabs input#tab-2 {
left: 14.3%;
}
.tabs input#tab-3 {
left: 28.7%;
}
.tabs input#tab-4 {
left: 43%;
}
.tabs input#tab-5 {
left: 57.2%;
}
.tabs input#tab-6 {
left: 71.3%;
}
.tabs input#tab-7 {
left: 85.8%;
}
.tab-img-sm {
width: 48% !important;
}
}
#media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1330px) and (min-device-width: 1024px) {
.arrow-container {
display: none;
}
.tabs h3 {
font-size: 15px;
}
.tabs p{
line-height: 1.7em;
}
.panels {
min-height: 755px;
}
.gallery div {
max-width: 31%;
margin: 5px 10px;
}
label {
padding: .9% 2.3%;
}
.panel {
padding: 6%;
}
.tabs input {
position: absolute;
}
.tabs {
width: 100%;
}
.tabs label {
font-size: 13px;
padding: 0 10px;
}
.tabs input#tab-2 {
left: 14.3%;
}
.tabs input#tab-3 {
left: 28.7%;
}
.tabs input#tab-4 {
left: 43%;
}
.tabs input#tab-5 {
left: 57.2%;
}
.tabs input#tab-6 {
left: 71.3%;
}
.tabs input#tab-7 {
left: 85.8%;
}
.tabs input {
top: 10px;
}
}
<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">Overview</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">Design</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3"/>
<label for="tab-3" class="tab-label-3">Build</label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4"/>
<label for="tab-4" class="tab-label-4">Interior</label>
<input id="tab-5" type="radio" name="radio-set" class="tab-selector-5"/>
<label for="tab-5" class="tab-label-5">Options</label>
<input id="tab-6" type="radio" name="radio-set" class="tab-selector-6"/>
<label for="tab-6" class="tab-label-6">Specs</label>
<input id="tab-7" type="radio" name="radio-set" class="tab-selector-7"/>
<label for="tab-7" class="tab-label-7">Hybrid Wing</label>
<input id="tab-8" type="radio" name="radio-set" class="tab-selector-8"/>
<label for="tab-8" class="tab-label-8">Gallery</label>
<div class="content">
<div class="content-1">
<img class="img-main-tabs" src="http://www.lancewalker.life/images/tab-images/overview-lg-img3.jpg">
<h2 class="h2-tabs" style="margin-top: 3rem;">BORN TO PLAY - BUILT TO RACE</h2>
<p>It started with the simple vision of delivering the technology and performance of a competitive racing boat to the recreational sailor. The Eagle Class 53 was designed for cruising and racing in a range of
conditions. Constructed of all-carbon and honeycomb core, this yacht is capable of safely reaching between 25-35 knots in light wind.</p>
<p style="margin-bottom: 3rem; margin-top: 10px;">Whether you are looking for a dose of adrenaline racing around the blue waters of the Caribbean or an afternoon of ZEN sitting back in comfort in the open-air saloon, the Eagle Class 53 will take you there.</p>
<div class="img-tabs-container">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-1.jpg">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-3.jpg">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-2.jpg">
</div>
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-1.jpg">
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-3.jpg">
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-2.jpg">
</div>
<div class="content-2">
<img class="img-main-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-top-updated.jpg">
<h2 style="margin-top: 3rem;">Form and Function Perfectly Balanced</h2>
<p>Maintaining optimal performance</p>
<p>The sweep of the sheer</p>
<p style="margin: 10px 0">
Key focus was placed on weight</p>
<p style="margin-bottom: 3rem;">Bringing the Eagle Class series from design to the water is a <a class ="tabs-link" href="https://www.fastforwardcomposites.com/international-design-team-of-naval-architects-engineers-and-foil-experts">team</a> of international talent
with decades of experience in design, naval architecture, composite boatbuilding, and foil engineering. This
mosaic of talent has designed world-class racing boats for Oracle Racing, Luna Rossa, and Artemis Racing.</p>
<div class="img-tabs-container">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-1.jpg">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-2.jpg">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-3.jpg">
</div>
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-1.jpg">
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-2.jpg">
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-3.jpg">
</div>
<div class="content-3">
<img class="img-main-tabs" src="http://www.lancewalker.life/images/build/eagle-class-build-image-top.jpg">
<h2 style="margin-top: 3rem;">Experience, Process, Quality</h2>
<p>A highly-capable, world class catamaran – realized by an experienced, dedicated team.</p>
<ul>
<li>Designed by the celebrated naval architect Paul Bieker, veteran designer of multiple America’s Cup projects</li>
<li>Built by Fast Forward Composites, in Bristol, Rhode Island, by a crew of accomplished boatbuilders and seasoned composite specialists</li>
<li>Aerospace derived materials</li>
<h2 style="margin-top: 30px;">Construction</h2>
<li>Vacuum-bagged epoxy pre-preg carbon fiber skins over honeycomb and various core foams</li>
<li>All carbon spars and rig</li>
<li>High modulus carbon fiber rotating Hybrid Wing</li>
<li>Pre-preg carbon C-Foils and T-rudders</li>
<li>Assembled in our newly renovated, state-of-the art production facility. Using our strong supplier relationships, we are able to secure the best resins, adhesives and aerospace grade honeycomb core ensuring the highest quality build.</li>
</ul>
</div>
<div class="content-4">
<img class="img-main-tabs" src="https://www.lancewalker.life/images/interior/interior-main-img.jpg">
<h2 class="tabs-h2" style="margin-top: 3rem;">Open air sophistication</h2>
<p style="margin: 0 0 10px 0;">The Eagle Class 53 is unique in that it combines very lightweight structures with vast space on deck and great accommodations inside. Sail control lines are in the hardtop and are operated from the
forward part of the deck, allowing a line-free area for guests. All the systems are contained in the same area, creating an ideal weight concentration and a clean interior.</p>
<p style="margin: 0 0 10px 0;">The spacious and airy cabins in each hull have a full 6'5" of headroom. The five windows combined with a large hatch above each bunk provide ocean views, fantastic natural light, and ventilation.
Each cabin includes a Barcelona-style chair for lounging, a generous closet, and a full-length double bed at 6'8". The wet room/heads have enough room for two people, with specialized features such as a
custom carbon sink and lightweight Techma head. All interior components are ergonomically designed using modern and lightweight materials.</p>
<p style="margin-bottom: 3rem;">The main saloon features a central entertainment island. The bar contains a sink, refrigerator and additional storage and can be customized to include an ice-maker and microwave.
The island is flanked by bar stools and two luxurious leather settees.</p>
<div class="img-tabs-container">
<img class="img-below-content-tabs-vert" src="https://www.lancewalker.life/images/interior/interior-1-vert.jpg">
<img class="img-below-content-tabs-vert" src="https://www.lancewalker.life/images/interior/interior-2-vert.jpg">
<img class="img-below-content-tabs-vert" src="https://www.lancewalker.life/images/interior/interior-3-vert.jpg">
</div>
<img class="img-below-content-tabs-mobile" src="https://www.lancewalker.life/images/interior/interior-1-vert.jpg">
<img class="img-below-content-tabs-mobile" src="https://www.lancewalker.life/images/interior/interior-2-vert.jpg">
<img class="img-below-content-tabs-mobile" src="https://www.lancewalker.life/images/interior/interior-3-vert.jpg">
</div>
<div class="content-5">
<img class="img-main-tabs" src="https://www.lancewalker.life/images/options/eagle-class-options-img-main.jpg">
<h2 style="margin-top: 3rem;">Options</h2>
<p style="margin-bottom: 3rem;">Owners have the choice of a variety of performance options, including the option of a standard rig or Hybrid Wing. The Eagle Class 53T is a turbo-charged version of the Eagle Class 53.
Standard C-foils are replaced with carbon fiber T-foils creating a platform which foils at very low wind speeds and significantly increases the speed potential of the boat in medium to
heavy wind conditions. The 53T also comes equipped with our fully automated foiling control system. The possibilities are endless.
</p>
</div>
<div class="content-6">
<div class="tab-img-container" style="margin-top: 0 !important; background: none !important;">
<div class="tab-img-container-col" style="background: none !important;">
<h2>SPECS</h2>
</div>
<div class="tab-img-container-col" style="background: none !important;">
</div>
</div>
</div>
<div class="content-7">
<!--<div class="tab-img-container">
<img class="tab-img-sm" src="https://www.lancewalker.life/images/hybridwing/hw-brand-logo.jpg">
</div>-->
<h2>Hybrid-Wing</h2>
<p> </p><br>
<div style="padding:56.25% 0 0 0;position:relative; opacity: 1; width: 100%; height: 100%;">
<iframe src="https://player.vimeo.com/video/352449872?byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe></div>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
<div class="content-8">
<div class="ec-container" id="project-ec">
</div>
</div>
</section>

Try experimenting with percent instead of PX or a combination and position:absolute. Apply margins using percent etc. Might have to re-arrange things slightly but might work. Combinations also include using left and margin-left, for example, positive and negative.

Text always moving behind slider

I'm having an issue with some text that I want to put in a container below a slider always appearing behind the slider. I've tried different options in CSS but I can't seem to get the text moving.
Here is the example of the project: Example
Below you can find the html/css on jsfiddle
The text should appear in the div A3L_slogan. I've tried using margins, but that doesn't make it responsive am I right?
To say it in short. The text should appear below the carousel in the center of the page.
Hope anyone can point me in the right direction or help me out
body {
width: 100%;
margin: 0;
font-family: 'open sans', sans-serif;
zoom: 1;
}
header {
padding: 20px 0;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
padding: 0 20px;
margin: 0 auto;
}
.logo-box {
float: left;
margin-right: 20px;
}
.logo-box a {
outline: none;
display: block;
}
.logo-box img {display: block;}
nav {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
float: right;
}
nav li {
display: inline-block;
margin-left: 25px;
height: 70px;
line-height: 70px;
transition: .5s linear;
}
nav a {
text-decoration: none;
display: block;
position: relative;
color: #868686;
text-transform: uppercase;
}
nav a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 15px;
background: #868686;
transition: width .5s linear;
}
nav a:hover:after {width: 100%;}
#media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 16px 0;
}
ul {float: none;}
nav li:first-of-type {margin-left: 0;}
}
#media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
#slide {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
height:600px;
}
.slide1 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg) no-repeat center center fixed;
}
.slide2 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png) no-repeat center center fixed;
}
.slide3 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg) no-repeat center center fixed;
}
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
$('.fadein div:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('div').fadeIn().end().appendTo('.fadein');
}, 3500);
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo-box">
<a href="/">
<img src="images/logo.png">
</a>
</div>
<nav>
<ul>
<li>Forums</li>
<li>Rules</li>
<li>Monetization</li>
<li>Sign-up</li>
<li>Staff</li>
</ul>
</nav>
</div>
</header>
<div class="fadein">
<div id="slide"class="slide1"></div>
<div id="slide"class="slide2"></div>
<div id="slide"class="slide3"></div>
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
</div>
</body>
</html>

#slide {
position: fixed;
}
to
#slide{
position: relative;
}
and the flow of the markup styling will be fixed. and you shouldn't use multiple ids slide with the same name in your markup it's very bad and will cause a hell of problems in the nearest future.
update:
As discussed in the comments, a better solution is to remove the duplicated divs and using img tags plus applying changes on js and css to avoid flickering and overflow-x. https://codepen.io/anon/pen/eeymgo

Responsive Navigation Not Showing All Items

Hello I am currently learning responsive design and I am trying to make a responsive navigation bar which turns in to a menu when visited on a phone or mobile device! Everything works except not all the navigation items show on the mobile device and I am not sure why! This is the code:
<div class="container">
<div class="navbar">
<ul style="padding-left: 0px;">
<li class="logo"> RONNIE<b>GURR</b></li>
<section class="div_navbar_items">
<li class="navbar_items"> HOME </li>
<li class="navbar_items"> ABOUT US </li>
<li class="navbar_items"> GALLERY </li>
<li class="navbar_items"> SHOP </li>
<li class="navbar_items"> CONTACT </li>
</section>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<script src="js/responsive.js"></script>
Here is the CSS:
.container {
margin: auto;
width: 90%;
}
.navbar {
position: fixed;
z-index: 100;
overflow: hidden;
margin: auto;
width: 100%;
left:0;
top:0;
}
.navbar li.logo,
.navbar li.navbar_items {
list-style-type: none;
display: inline-block;
}
.navbar li a {
margin-top: 50px;
font-family: 'Cabin', sans-serif;
font-size: 1.3em;
color: white;
font-weight: 700px;
display: inline-block;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.navbar li.navbar_items a:hover {
border-bottom-style: solid;
border-bottom-color: white;
/* padding-bottom: 5px; */
}
.navbar li.icon {
display: none;
}
.div_navbar_items {
float: right;
padding-right:1%;
}
/*Start of mobile nav*/
#media screen and (max-width:875px) {
.navbar li.navbar_items {
display: none;
}
.navbar li.icon {
float: right;
display: inline-block;
position: absolute;
right: 0;
top: 19px;
}
}
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
}
.navbar.responsive li.logo {
floatL: left;
display: block;
}
.navbar.responsive .div_navbar_items {
float: none;
padding-right:0;
}
.navbar.responsive li.navbar_items {
display: block;
padding: 50px;
font-size: 25px;
}
.navbar.responsive li.navbar_items a {
display: block;
text-align: center;
}
.navbar.responsive li.navbar_items a:hover{
color:#17171e;
border-bottom-color: transparent;
}
}
/*End of mobile nav*/
And here is the JS:
function navBarFunction() {
document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}
codepen: https://codepen.io/anon/pen/JyEoWY

I think this will get you in the right direction, then you can decide upon what you'd like to do from here. You are setting your navbar to be 100vh, which is 100% height of the screen, so you need to make sure your padding and margin on your nav elements aren't so much. Try removing any margin and padding from these two styles, then adapt it on your own from here. If you don't want to change this stuff, refer to the second part of my answer, and just make the nav scrollable.
.navbar li a {
margin-top: 0px;
}
#media screen and (max-width: 875px) {
.navbar.responsive li.navbar_items {
display: block;
padding: 0px;
font-size: 25px;
}
}
Also, if you look in .navbar styling (line 8 of your codepen) you have it set to overflow: hidden. You can update your .navbar.responsive class with overflow of scroll to get it to work.
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
overflow: scroll; // Set overflow to scroll
}
}

I guess this happenes because you make .navbar.responsive {
position:fixed;
And you just can't watch all content of block, because it's not allow to scroll. When i change this property to absolute, i looked all items of menu.
By the way, you write CSS property font-weight with px, font-weight: 700px, but it shouldn't be px, it's relative value: font-weight: 700

Can't get rid of white margin on div's

So, I have tried everything I can think of to get rid of the white margins around everything on my page.
I have put: margin: 0; on everything I can think of and it still does not get rid of it. Any help would be great!
I apologize for the giant wall of code.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* global */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Tahoma", sans-serif;
font-size: 16px;
color: #454545;
background-color: #fff;
}
div {
margin: 0;
}
/* end global */
/* custom */
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.footer {
padding: 5px 10px;
background-color: #428cd9;
}
/* end custom */
/* custom responsive */
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
/*end custom responsive */
/* navbar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #428cd9;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
height: 55px;
display: inline-block;
color: #454545;
padding: 0px 16px;
line-height: 3.0;
text-decoration: none;
text-align: center;
font-size: 17px;
transition: 0.3s;
}
ul.topnav li a:hover {
background-color: #2162a6;
color: #757575;
}
ul.topnav li.icon {
display: none;
}
/* end navbar */
/* responsive navbar */
#media screen and (max-width:680px) {
ul.topnav li:not(: first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* end responsive navbar */
#media screen and (max-width:680px) {
.nomobile {
display: none;
}
.yesmobile {
width: 100%;
}
}
.header-img {
min-height: 300px;
background-image: url(http://thirdshiftdesigns.net/images/cabheader2.png);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center top;
/*padding: 40px; (If don't want to set min-height or some image content is there) */
}
.end-header {
width: 100%;
height: 15px;
background-color: #428cd9;
}
<body>
<div class="col-12">
<ul class="topnav" id="myTopnav">
<li>Logo</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="icon">
☰</li>
</ul>
<div class="row">
<div class="col-12">
<div class="header-img">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="end-header">
</div>
</div>
</div>
</div>
<!-- end header -->
<!-- footer -->
<div class="col-12">
</div>
</body>

If you inspect the element, you can find that the unwanted space is because of the following style which applies padding to all elements with the class value containing col-.
[class*="col-"] {
float: left;
padding: 15px;
}
Override the style and you can get rid of the unwanted space. Note that this will set the padding to 0 for all the classes whose value contains col-.
[class*="col-"] {
padding: 0;
}
Or you can only override the padding of .col-12 which will apply padding of 0 to .col-12 while the other classes containing col- will still get a padding of 15px.
.col-12 {
padding: 0;
}

You're wrapping many elements in a .col-12 class. All .col- elements are set in your CSS to contain 15px of padding around the edges. Here's a screenshot from inspecting the page in Chrome Developer Tools where you can see the element highlighted:

You need to set padding to 0 on the col-12 element.
change the following in your CSS
.col-12 {
width: 100%;
}
to
.col-12 {
width: 100%;
padding: 0px;
}
fiddle example here