We Keep Coding

Full width div triggered by onclick

My sandbox on JSFIDDLE
When 'OPEN' is clicked, the content div should expand to full width, but it ended up expanding by 100px width like on the red box. I tried to set width: 100%, in the gray box div and it didn't work.
In the .content class, I had the width set to 100vw without margin: 0 auto and it expanded 100% width to the right side, not screen-fulled size.
[]
I'm testing this function before I deploy it on my website.
jQuery -
$(".openit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});
HTML -
<div class="wrapper">
<div class="back">BG
<div class="expandBG">
<div class="openit">OPEN</div>
<div class="flex-col">
<div class="closeit">CLOSE</div>
<div class="content text" style="display: none;">
<div>(CONTENT HERE)</div>
</div>
</div>
</div>
</div>
</div>
CSS -
body {
background-color: #000;
}
.wrapper {
width: 100%;
margin: 0 auto;
text-align: center;
border: solid red 1px;
}
.back {
position: relative;
color: #fff;
width: 110px;
height: 110px;
background-color: red;
margin: 0 auto;
text-align: center;
display: block;
}
.expandBG {
display: block;
width: 100px;
height: 100px;
transition: ease 0.3s;
background-color: #192D38;
overflow: hidden;
margin: 0 auto;
bottom: 0;
text-align: center;
font-family: sans-serif;
color: #fff;
position: relative;
}
.flex-col {
flex-direction: column;
}
.openit {
display: block;
text-align: center;
height: 100%;
cursor: pointer;
margin: 0 auto;
}
.closeit {
display: block;
text-align: center;
cursor: pointer;
width: 100%;
margin: 0 auto;
z-index: 1;
position: relative;
}
.text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -25px;
}
.content {
width: 100%;
height: 50vw;
position: relative;
margin: 0 auto;
}

It's because of the div with a class name back. increase the width of that div to 100% when opneit is clicked and then back to its original size when closeit is clicked.
// add this to your CSS file
.w-full {
width: 100%
}
then include these two lines in your javaScript file
$(".openit").on("click", function() {
$(".back").addClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".back").removeClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});

Buttons and text won't stay within container

I have a container with some text and buttons that are responsive to the screen size, but they extend off the side of the container when there's not enough room. Someone helped me fix it by adding a clamp parameter to the font-size, but after I made a few adjustments to other parts of my code, now the problem is back.
Could someone help me figure out what I need to do to keep the buttons and text within the container? I thought I needed to adjust the min values of the clamp parameter, but that doesn't seem to change anything. It doesn't seem like the text and buttons even recognizes the parent container, they just kind of do what they want.
I have the btn-grid container set to 20% of the height of the chat_bubble, and I need the text to stay within that remaining 80% of the container.
Besides that, I'm getting a warning from WebStorm that several of my font-size declarations over-write each other, but I can't figure out which one is supposed to take priority to avoid being redundant.
Also I'm trying to add a 5vw or percent margin/padding to the top and right of the main container, but I notice that when I do a scrollbar appears even if I do overflow: hidden. Someone told me this is because of margin collapsing, but I can't figure out how to prevent that from happening because I don't see how the nested containers are taking up so much space.
This is the codepen:
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
And this is my code:
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 1.5rem; /* fallback */
font-size: clamp(1rem, 1.5rem, 2rem);
}
.container {
width: 90%;
height: 90%;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally */
align-items: flex-end;
padding-left: 5vw;
overflow: hidden;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
height: 70vh; /* Make chat bubble 70% of viewport height */
background: ghostwhite !important;
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 90vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}

If you remove the explicit height: 70vh declaration on #chat_bubble and instead use min-height: 70vh to ensure that the height is at minimum 70% of the viewport height, the content wont overflow. Now, the text and buttons won't ever overflow the parent container as there isn't an explicit height set on the parent #chat_bubble. The reason the buttons overflow before this change is because the explicit width of 70vh is set on #chat_bubble and any nested content that is long enough to extend outside of the parent container will do so. I added a top/bottom margin of 5vw and auto left/right margins, you can adjust these as you see fit.
After reading your comments below, the clamp() usage is part of the problem for the text taking up so much space on the screen and forcing the #chat_bubble to have a large height. The syntax is clamp(min, flex unit, max) and your using 1.5rem for the 2nd arg, instead use a viewport unit like 3vw or anything with vw as the middle argument which is the "scale" or "flex-unit" so to speak.
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const emailContainerElement = document.getElementById('email-container')
const submitEmailButton = document.getElementById('submit-email-btn')
const email = document.getElementById('email')
const chartContainer = document.getElementById('chart')
startButton.classList.add('hide')
emailContainerElement.classList.add('hide')
questionContainerElement.classList.remove('hide')
questionElement.innerText = 'The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.'
const button_no = document.createElement('button')
button_no.innerText = 'No'
button_no.classList.add('btn')
answerButtonsElement.appendChild(button_no)
const button_yes = document.createElement('button')
button_yes.innerText = 'No'
button_yes.classList.add('btn')
answerButtonsElement.appendChild(button_yes)
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 1.5rem; /* fallback */
font-size: clamp(1rem, 3vw, 2rem);
}
.container {
width: 90%;
height: auto;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally (this is default flex-direction)*/
align-items: flex-end;
margin: 5vw auto;
overflow: hidden;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
min-height: 70vh; /* Make chat bubble 70% of viewport height at minimum*/
background: ghostwhite !important;
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 90vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test title</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Benne&family=Fjalla+One&display=swap" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="chat_bubble" class="container">
<div id="email-container" class="hide">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit-email-btn" class="btn">Submit</button>
</div>
<div id="question-container" class="hide">
<div id="question" class="question-text">Question</div>
<div id="answer-buttons" class="btn-grid">
</div>
</div>
<div id="chart" class="hide"></div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
</div>
</div>
<div id="character_image">
<img id="char_1" src="https://i.imgur.com/7eYWqqo.png" alt=""></img>
<img id="char_2" src="https://i.imgur.com/ixM8TtU.png" alt=""></img>
</div>
</div>
<link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
</body>
</html>

Responsively change div size while aligning with another div

For the last couple days I've been trying to get my CSS to work, but whenever I fix one thing I seem to break another. I have this codepen with a main div containing chat_bubble and character_image.
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
Here's what I'm trying to do:
chat_bubble should fill 70% of the vertical and horizontal space within main.
When screen width is over 700px:
character_image should be to the right of chat_bubble, bottom-left aligned.
character_image should not be cropped or extend off the screen.
character_image should scale maintaining aspect ratio filling up to 100% of the height of chat_bubble without extending past it or shrinking the size of chat_bubble.
When screen width is under 700px:
character_image should change to another image (I tried to use background-image to do this but couldn't get it to show, I'm thinking of using multiple image tags in the html and hiding/showing them individually).
character_image should be below chat_bubble, upper-right aligned.
character_image should take up 30% of the vertical height within main.
chat_bubble should take up the remaining vertical space, and 100% of the horizontal space within main.
I know I need to use media queries to do it, but I am struggling to think about the logic and what options each div container needs. Right now character_image is a fixed size and creates a scroll bar when the screen isn't large enough. And when I do fix one of the above requirements, I always cause something else to break.
Here's my CSS so far:
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 10vh;
font-size: 16px;
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 16px; /* fallback */
font-size: clamp(1em, 5vw, 10vh);
}
.container {
width: 90%;
height: 90%;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 5vh;
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
width: 90%;
height: 90%;
overflow: hidden;
}
#chat_bubble {
width: 70%;
height: 70%;
background: ghostwhite !important;
float: left;
}
#character_image {
max-height: 100%;
object-fit: cover;
background: #ffffff;
float: right;
overflow: hidden;
}
#question-text {
height:50%;
}

Add a second <img> tag inside character image, give one id="char_1", and the other id="char_2" and try this css:
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally */
align-items: flex-end;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
height: 70vh; /* Make chat bubble 70% of viewport height */
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 100vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}

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.

Responsive elements hidden when no space

I dont really know what exacly write.
I have 4 boxes with width 300px, if document width is (I dont know maybe) 600px then 2 boxes should stay at page and others should be hide.
Is there a way to make it dynamic? Maybe js or jquery? Hope you can help me with this! ^^
Here is what I have now.
HTML
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<article class='Conteiner' id='howItWorks'>
<section class='Conteiner-Highlight howItWorks-Highlight'>Jak to działa?</section>
<section class='Steps'>
<section class='step'><div class='digit'>1</div><span class='digit-description'>Analizujemy <br> potrzeby klienta</span></section>
<section class='step_hidden'><div class='digit'>2</div><span class='digit-description'>Tworzymy <br> projekt graficzny</span></section>
<section class='step_hidden'><div class='digit'>3</div><span class='digit-description'>Przedstawiamy <br> propozycję klientowi</span></section>
<section class='step_hidden'><div class='digit'>4</div><span class='digit-description'>Przystępujemy <br> do pisania strony</span></section>
</section>
<section class='steps-Controls'>
<span class='steps_check'>
<i class='material-icons'>radio_button_checked</i>
<i class='material-icons'>radio_button_unchecked</i>
<i class='material-icons'>radio_button_unchecked</i>
<i class='material-icons'>radio_button_unchecked</i>
</span>
<span class='steps_arrows'>
<span class='step_arrow' id='step_arrow_left'><i class='material-icons'>keyboard_arrow_left</i></span>
<span class='step_arrow' id='step_arrow_right'><i class='material-icons'>keyboard_arrow_right</i></span>
</span>
</section>
</article>
</body>
</html>
SCSS
:root{
--red: rgb(231,76,77);
--white: rgb(242,241,244);
--darker-blue: rgb(14,60,91);
}
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100vh;
color: #0E3C5B;
font-size: 16px;
}
/* Modern browsers */
#media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
/* Safari <8 and IE <11 */
#media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
#media screen and (min-width: 50em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
.Conteiner-Highlight{
width: 100%;
height: 100px;
font-family: Roboto;
font-weight: 900;
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto;
font-size: 1.2rem;
}
.Conteiner{
width: 100%;
min-height: 1000px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-bottom: 1px solid rgb(14,60,91);
}
#howItWorks{
.Steps{
width: 80%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row;
.step , .step_hidden{
max-width: 300px;
width: 80%;
max-height: 500px;
height: 60vh;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0px 4px 10px rgba(144,144,144,.5);
margin: 0 50px;
border-bottom: 10px solid rgb(231,76,77);
padding: 10px;
transition: all .3s ease-in-out;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.digit{
height: 40%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
font-family: Roboto;
font-weight: 900;
color: rgb(231,76,77);
}
.digit-description{
height: 30%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: .5rem;
font-family: Raleway;
font-weight: 400;
}
}
.step_hidden{
opacity: .3;
}
.arrow{
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
}
.steps-Controls{
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
margin: 50px 0;
.steps_arrows{
display: flex;
flex-flow: row;
margin: 10px 0;
cursor:pointer;
.step_arrow{
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
margin: 0 10px;
background-color: var(--red);
i{
color: var(--white);
}
}
}
.steps_check{
display: flex;
flex-flow: row;
cursor:pointer;
i{
font-size: .4rem;
}
}
}
}
CodePen

There are several ways to do this.
You could just make the css-container of those elements non-wrapping, so if there isn't enough space, they are just not visisble by window-size.
In this scenario it is possible to see 2 + 1/2 Elements when you resize the window because they "disappear" gradualy.
The other solution is just to use javascript. You could write a function that is fired on each resize-event and write an if-condition where those elements' visibility is hidden when the window-size gets too small.
For both solutions there are plenty of examples and documentation out there, so i would just suggest you search for those and pick one that is easy to understand for you and fit's your situation.
edit: Since other comments on your question came up: If you only make your decision based on the whole viewport-size, then you can use #media-queries. You can't use them if you are depending not on the viewport but some outer html-element and layouting.

You can achive this by media queries. if you expand the snippet you can see all other hidden boxes.
.container{
display: flex;
flex-direction : row;
}
.container .box{
margin: 5px;
background-color : #333;
width : 50px;
height: 50px;
}
#media screen and ( max-width: 982px ) {
.container .box:not(:first-of-type){
display:none;
}
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
example according to you code :
https://codepen.io/anon/pen/EeOgxE

I don't really know what exactly (to) reply ;)
You could skip script entirely and go with CSS, assuming that each box is 300px wide and 600px combined, you could do something like this:
/* Showing 2 */
#media (min-width: 600px)
{
.my-container-with-four-boxes {
width: 600px;
height: 300px;
overflow: hidden;
}
}
/* Showing 3 */
#media (min-width: 900px)
{
.my-container-with-four-boxes {
width: 900px;
height: 300px;
overflow: hidden;
}
}
/* Showing 4 */
#media (min-width: 1200px)
{
.my-container-with-four-boxes {
width: 1200px;
height: 300px;
}
}
You'd probably have to adjust the screen limitations and container sizes with padding or something else not mentioned here ;)