Develop Reference

Why does my page width only stretch to 100% with "fit-content"?

I have tried looking around for this but can't seem to find a question to match my current problem. I am trying to build a mock ecommerce website to practice using React. I have a header component. I want this component to be 100% of the screen width, so that the elements inside this component shrink whenever the page shrinks. I have some global css that sets the height and width of the html and body to 100%:
html, body{
background-color: rgb(167, 72, 72);
height: 100%;
min-width: 100%;
}
I am currently facing two problems, neither of which I understand very well the causes of. When I set my header component (the outermost component) to have a width of 100%, the page shrinks correctly. But when I open up developer tools to check the responsiveness, something goes wrong so that the right side of my header is shrinking faster than the page header_shrink
I am able to fix this by setting the width of my header to "fit-content" instead of "100%". Here is what the header looks like when I shrink the page using developer tools.header_fixed But when I do it this way, the components inside of my header don't shrink correctly. For example, my search bar is supposed to decrease in width as I shrink the page, but when I use "fit-content", it just stays set to whatever size it is. search-bar-constant. When I have the width set to 100% instead of fit content, it looks the way it's supposed to search-bar-fixed.
Sorry for the long explanation, but this is the bulk of my problem. "Width: 100%" allows the items in my header component to shrink correctly, but not the component itself. And "width: fit-content" allows the outer header component to shrink correctly, but not the items inside of it.
Here is the JSX I have for reference:
import React from 'react'
import './Header.css'
import { BiSearchAlt2 as SearchIcon} from "react-icons/bi";
import {RiArrowDropDownLine as DropDownIcon} from "react-icons/ri";
import { CgProfile as Profile } from "react-icons/cg";
import { CgShoppingCart as Cart } from "react-icons/cg";
const Header = () => {
const texts = [
'ORDERS OF $5K SHIP FREE',
'FREE SHIPPING ON SELECT ITEMS: SHOP NOW',
'BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE'
];
let currentTextIndex = 0;
setInterval(() => {
const shippingDealsText = document.querySelector('.shipping-deals-text');
shippingDealsText.classList.add('out');
setTimeout(() => {
shippingDealsText.textContent = texts[currentTextIndex];
shippingDealsText.classList.remove('out');
currentTextIndex = (currentTextIndex + 1) % texts.length;
}, 1000);
}, 5000);
return (
<div className="header">
<div className="header-top">
<div className="top-logo">
<h5 className='small-logo'>LEVIATHAN</h5>
</div>
<div className="space"></div>
<div className="link-container">
<div className="link-wrap">
Gift Cards
</div>
<div className="link-wrap">
Contact Us
</div>
<div className="link-wrap">
Order Status
</div>
<div className="link-wrap">
Live Chat
</div>
</div>
</div>
<div className="header-middle">
<div className="middle-logo">
<h5 className='big-logo'>LEVIATHAN</h5>
</div>
<div className="search-container">
<div className="search-wrapper">
<input
type="text"
id="search-bar"
placeholder="Search"
className='search'
/>
<div className="search-icon-wrapper">
<SearchIcon className='search-icon'/>
</div>
</div>
</div>
<div className="shipping-deals-container">
<div className="button-container">
<div className="shipping-deals-button">
<span className="deals-text">DAILY SHIPPING DEALS </span>
</div>
</div>
<div className="text-container">
<div className="text-slideshow">
<p className="shipping-deals-text">BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE</p>
</div>
</div>
</div>
<div className="icons-right">
<Profile className='login-pic'/>
<span>Log In</span>
<Cart className='shopping-cart'/>
</div>
</div>
<div className="header-bottom">
<div className="nav-bar">
<ul className='navigation'>
<li className='menu-items'>
<a href="/" className='button drop-down red'>Shop <DropDownIcon className='drop-icon'/></a>
<a href="/" className='button'>Equipment for Crossfit</a>
<a href="/" className='button'>New Gear</a>
<a href="/" className='button'>Barbells</a>
<a href="/" className='button'>Plates</a>
<a href="/" className='button'>Rigs and Racks</a>
<a href="/" className='button'>Shoes</a>
<a href="/" className='button'>Apparel</a>
<a href="/" className='button'>3 Ships Free</a>
<a href="/" className='button'>Zeus</a>
<a href="/" className='button drop-down'>The Index</a>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Header
Here is the styling I am currently applying:
.header {
min-width: 100%;
margin: 0;
padding: 0;
}
.header-top {
background-color: white;
display: flex;
height: 2.5rem;
width: 100%;
}
.top-logo {
position: relative;
margin-left: 3rem;
}
.space {
flex-grow: 1;
}
.small-logo {
padding-top: 0.5em;
position: relative;
font-size: larger;
color: rgb(133, 133, 133)
}
.link-container {
display: flex;
/*border: 1px solid red;*/
margin-right: 3rem;
}
.link-wrap {
/*border: 1px solid green;*/
font-size: 14px;
padding-left: 1rem;
padding-top: 0.75rem;
}
.link-wrap a {
text-decoration: none;
color:#666666;
cursor: pointer;
}
/* Large section of header, black background */
.header-middle {
background-color: black;
height: 7rem;
display: flex;
}
/* Big LEVIATHAN text */
.middle-logo {
/*border: 1px solid red;*/
position: relative;
margin-left: 3rem;
display: flex;
justify-content: center;
align-items: center;
cursor: co;
}
.big-logo {
font-size: 48px;
/*padding-top: 2rem;*/
position: relative;
color: white;
}
.big-logo:hover {
color: rgb(210, 0, 0);
}
.search-container {
position: relative;
width: 40%;
display: flex;
flex-basis: 60%;
margin-left: 3rem;
align-items: center;
justify-content: center;
}
/*This is what has the appearance of the search bar*/
.search-wrapper {
min-width:100%;
height: 35%;
position: relative;
background-color: white;
display: flex;
flex-basis: 50%;
}
.search-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
}
.search-icon {
color: black;
font-size: 20px;
}
/*This is the actual search bar tucked inside*/
.search {
width: 100%;
height: 100%;
border: none;
outline: none;
margin-left: 1em;
font-size: 17px;
}
.search::placeholder {
color:rgb(94, 94, 94);
}
/* This holds onto both our daily shipping deals button */
/* and our text slideshow */
.shipping-deals-container{
width: 18em;
margin-left: 2.5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
/*border: 2px solid rgb(136, 77, 255);*/
}
.shipping-deals-button {
width: 65%;
height: 44%;
background-color: rgb(234, 2, 2);
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.5em;
}
.button-container {
width: 100%;
height: 50%;
/*border: 2px solid magenta;*/
}
.deals-text {
color: white;
font-size: 12px;
position: relative;
text-align: center;
align-items: stretch;
width: 100%;
}
.text-container {
/*border: 2px solid rgb(20, 182, 11);*/
width: 100%;
height: 50%;
}
.text-slideshow {
color: white;
width: 100%;
height: 50%;
font-size: 12px;
}
.shipping-deals-text {
transition: opacity 1s;
opacity: 1;
font-size: 13px;
}
.out {
opacity: 0;
transition: opacity 1s;
}
.shipping-deals-text-red{
color: red;
}
.navigation {
display: flex;
align-items:flex-start;
height: 3rem;
}
.menu-items {
height: 100%;
margin-left: 1.5rem;
padding-right: 1.5rem;
display: flex;
align-items: flex-start;
flex: 1;
}
ul {
list-style-type: none;
background-color: #333333;
}
.button {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-decoration: none;
color: white;
text-transform: uppercase;
white-space: nowrap;
padding: 1em;
font-weight: bold;
}
.button:hover {
color:rgb(210, 0, 0)
}
.red {
background-color: rgb(210, 0, 0);
}
.red:hover {
color: white;
}
.drop-icon {
font-size: 25px;
}
.icons-right {
height: 50%;
margin-top: 2em;
min-width: 10%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.login-pic {
color: white;
font-size: 20px;
}
.shopping-cart {
color: white;
font-size: 20px;
margin-left: 1rem;
}
.icons-right span {
color: white;
margin-left: 0.5em;
}
#media (max-width: 1025px) {
.shipping-deals-container {
display: none;
}
.header-top {
display: none;
}
.header-middle {
height: 50%;
}
.search-wrapper {
border: 2px solid white;
height: 2rem;
}
.icons-right {
margin-bottom: 2rem;
}
}
I have tried altering the width of my body, and html, but nothing seems to be giving me the solution I am looking for

With width: 100% on .header it shrinks the header the way you want it. That seems to be correct actually.
The element that prevents shrinking is <li class="menu-items"></li> because of display: flex;. Flexbox is by default not wrapping (flex-wrap: nowrap;).
Add flex-wrap. wrap; and you'll see everything will shrink with fit-content or width: 100%;
Hope this helps.
On another note: You shouldn't use <li> (List-Element) as the list. Thats what <ul> (Unsorted list) is for.
It should look more like this ->
<ul>
<li>
Shop
</li>
<li>
Equipment for Crossfit
</li>
<li>
New Gear
</li>
<!-- ... -->
</ul>

How do I make it so that my cookie consent banner pops up only one time for every user(ip)

Someone can explain to me and help me how to make my cookie button apears only once after the user accepts it. When refreshing the page i dont want the button to appear again. I cant make this code
HTML code
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies.
</p>
<a class="cookieConsentOK">Accept</a>
</div>
</div>
CSS code
#cookieConsent {
width: 100%;
background-color: #DAD9DA;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
}
.cookieContainer {
padding: 20px 15px 20px 15px;
display: flex;
align-items: center;
margin: 0;
}
.cookieConsent-txt {
text-align: left;
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
padding: 4px 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
Script
$(document).ready(function(){
setTimeout(function () {
$("#cookieConsent").fadeIn(200);
}, 2000);
$("#closeCookieConsent, .cookieConsentOK").click(function() {
$("#cookieConsent").fadeOut(200);
});
});

How can I stop my center div from changing position after I SlideUp another divs?

I'm creating simple page with a <header> and a <section>. In the section I have 3 divs and I am positioning them with display: flex; and justify-content: space-between.
The problem is that I also use JS slideToggle() on two of them (extreme ones). It is changing the layout of my center div after they are going up. How can I do it so that my center div doesn't change position after one of the others is slid up?
$(document).ready(function() {
$('#playlist').click(function() {
$('#nav').slideToggle();
});
});
$(document).ready(function() {
$('#songs').click(function() {
$('#listSongs').slideToggle();
});
});
section {
display: flex;
justify-content: space-between;
}
#listSongs {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 5px;
font-size: 25px;
width: 200px;
}
#listSongs p {
margin-top: 5px;
width: 200px;
text-align: center;
overflow: hidden;
height: 35px;
line-height: 50px;
color: white;
}
#player {
color: red;
}
#nav {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 20px;
width: 200px;
}
.hidden {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 20px;
width: 200px;
visibility: hidden;
}
#nav p {
text-align: center;
}
#nav ul {
list-style-type: none;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div id="listSongs">
<p>Authors:</p>
<div class="after"></div>
</div>
<div id="player">
<p>something</p>
</div>
<div id="nav">
<p>something</p>
</div>
</section>

The issue is because when the slideUp/slideDown/slideToggle methods complete, they set display: none on the target element. This is what causes the layout of your page to shift.
To workaround, and improve the animation, you can use CSS instead. Use the transition property to animate the height setting. Then you can toggle a class which sets height: 0 on the target element. Try this:
$(document).ready(function() {
$('#playlist').click(function() {
$('#nav').toggleClass('hide');
});
$('#songs').click(function() {
$('#listSongs').toggleClass('hide');
});
});
body { background-color: #CCC; }
section {
display: flex;
justify-content: space-between;
}
section > div.panel {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 5px;
font-size: 25px;
width: 200px;
transition: height 0.4s;
overflow: hidden;
}
section > div.panel.hide {
height: 0;
}
section > div.panel p {
margin-top: 5px;
width: 200px;
text-align: center;
overflow: hidden;
height: 35px;
line-height: 50px;
color: white;
}
#player {
color: red;
}
#nav {
border-radius: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="playlist">Playlist</button>
<button id="songs">Songs</button>
<section>
<div id="listSongs" class="panel">
<p>Authors:</p>
<p>lorem ipsum</p>
<div class="after"></div>
</div>
<div id="player">
<p>something</p>
</div>
<div id="nav" class="panel">
<p>something</p>
</div>
</section>
Note that I also rearranged some of the CSS to make it more generic with less repetition.

Add and align text to custom Electron Menu bar CSS

So I have the following CSS and HTML for a menu bar:
<header>
<div id="name">Unnamed Masterpiece</div>
<div id="close" onclick="closeWindow()">✕</div>
<div id="min" onclick="minWindow()">―</div>
</header>
header {
display: flex;
justify-content: flex-start;
-webkit-app-region: drag;
background: #292929;
flex-direction: row-reverse;
}
Which, with the close and minimize sign individually styled gives me the following:
However I would like the title to be on the far left and centered.
How would I do this?

Without changing the HTML or CSS you already have, you can add this to you CSS:
#name {
flex: 1;
text-align: center;
order: 1;
}
#close, #min {
order: 0;
}
It will change the order of elements, make the text grow and also center it.

You can try this:
header {
display: flex;
justify-content: flex-start;
-webkit-app-region: drag;
background: #292929;
align-items: center;
}
<header>
<div id="name" style="width: 100%;">Unnamed Masterpiece</div>
<div id="min" onclick="minWindow()" style="">―</div>
<div id="close" onclick="closeWindow()">✕</div>
</header>

Hi You can use like this. I suggest you don't use inline style and by the id style.
<div className="window-header">
<div className="left-side">
Logo - icon
</div>
<div className="draggable-bar" id="titleBar">
Title name or names
</div>
<div className="right-side">
<div id="min-btn" className="btn-box">
<div className="min"></div>
</div>
<div id="max-btn" className="btn-box max">
<div className="maxmize"></div>
</div>
<div id="close-btn" className="btn-box">
<div className="close"></div>
</div>
</div>
</div>
Style codes =>
.window-header {
display: flex;
}
.window-header .left-side, .window-header .draggable-bar, .window-header .right-side {
display: flex;
flex: 1;
}
.window-header .draggable-bar {
-webkit-app-region: drag;
flex-grow: 34;
flex-basis: 0;
align-items: center;
justify-content: center;
color: #c3c3c3;
}
.window-header .draggable-bar:hover {
cursor: move;
}
.window-header .left-side img {
display: flex;
width: 15px;
height: 24px;
margin-top: 3px;
margin-left: 4px;
}
.window-header .left-side .title {
align-items: center;
display: flex;
color: #999;
padding-left: 5px;
user-select: none;
}
.window-header .right-side {
justify-items: flex-end;
justify-content: flex-end;
display: flex;
}
.window-header .right-side .btn-box {
display: inline-flex;
justify-content: center;
width: 30px;
height: 30px;
}
.window-header .right-side .btn-box:hover {
background-color: #797979;
}
.window-header .right-side .btn-box:last-child:hover {
background-color: red;
}
.window-header .right-side .btn-box .min {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAyIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZDNkM2QzO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS13aWR0aDoycHg7fTwvc3R5bGU+PC9kZWZzPjxsaW5lIGNsYXNzPSJhIiB4Mj0iMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiLz48L3N2Zz4=);
width: 15px;
height: 15px;
background-repeat: no-repeat;
position: relative;
top: 50%;
}
.window-header .right-side .btn-box.max .maxmize {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PGRlZnM+PHN0eWxlPi5hLC5je2ZpbGw6bm9uZTt9LmF7c3Ryb2tlOiNkM2QzZDM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDoycHg7fS5ie3N0cm9rZTpub25lO308L3N0eWxlPjwvZGVmcz48ZyBjbGFzcz0iYSI+PHJlY3QgY2xhc3M9ImIiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgcng9IjUiLz48cmVjdCBjbGFzcz0iYyIgeD0iMSIgeT0iMSIgd2lkdGg9IjI4IiBoZWlnaHQ9IjI4IiByeD0iNCIvPjwvZz48L3N2Zz4=);
width: 13px;
height: 13px;
background-repeat: no-repeat;
position: relative;
top: 25%;
}
.window-header .right-side .btn-box.unmax .maxmize {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSA0MyI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2UtbGluZWNhcDpyb3VuZDt9LmIsLmN7c3Ryb2tlOm5vbmU7fS5je2ZpbGw6I2QzZDNkMzt9PC9zdHlsZT48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMwOCAtMTkyKSI+PGcgY2xhc3M9ImEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxNyAxOTIpIj48cGF0aCBjbGFzcz0iYiIgZD0iTTUsMEgyNWE1LDUsMCwwLDEsNSw1VjI1YTUsNSwwLDAsMS01LDVIMTlWMTguMzMzYTQuMTA2LDQuMTA2LDAsMCwwLS4yLTEuNTU5LDIuMjUzLDIuMjUzLDAsMCwwLS44NTgtLjk3Nyw0LjQzNyw0LjQzNywwLDAsMC0yLjYzNC0uOEgwVjVBNSw1LDAsMCwxLDUsMFoiLz48cGF0aCBjbGFzcz0iYyIgZD0iTSA1IDIgQyAzLjM0NTc5MDg2MzAzNzEwOSAyIDIgMy4zNDU3OTA4NjMwMzcxMDkgMiA1IEwgMiAxMi45OTg2NTkxMzM5MTExMyBMIDE1LjI5NzA5NTI5ODc2NzA5IDEyLjk5ODY1OTEzMzkxMTEzIEMgMTUuMzA4MDE4Njg0Mzg3MjEgMTIuOTk4NTUwNDE1MDM5MDYgMTUuMzIyMjcwMzkzMzcxNTggMTIuOTk4NDYwNzY5NjUzMzIgMTUuMzM5Njk5NzQ1MTc4MjIgMTIuOTk4NDYwNzY5NjUzMzIgQyAxNS45MDQxNzA5ODk5OTAyMyAxMi45OTg0NjA3Njk2NTMzMiAxNy44MDA2MDE5NTkyMjg1MiAxMy4wODcwNzgwOTQ0ODI0MiAxOS4xNDYzMDEyNjk1MzEyNSAxNC4xOTM2OTEyNTM2NjIxMSBDIDE5LjUyMDg4MTY1MjgzMjAzIDE0LjQ1MDA5NjEzMDM3MTA5IDIwLjI0OTQ0ODc3NjI0NTEyIDE1LjA0NDU4OTk5NjMzNzg5IDIwLjY0OTU1OTAyMDk5NjA5IDE2LjAwNjAzMTAzNjM3Njk1IEMgMjEuMDM0MzEzMjAxOTA0MyAxNi45MzA1NjI5NzMwMjI0NiAyMS4wMjI2MjQ5Njk0ODI0MiAxNy45ODcwMTY2Nzc4NTY0NSAyMSAxOC4zOTU1MzgzMzAwNzgxMyBMIDIxIDI4IEwgMjUgMjggQyAyNi42NTQyMDkxMzY5NjI4OSAyOCAyOCAyNi42NTQyMDkxMzY5NjI4OSAyOCAyNSBMIDI4IDUgQyAyOCAzLjM0NTc5MDg2MzAzNzEwOSAyNi42NTQyMDkxMzY5NjI4OSAyIDI1IDIgTCA1IDIgTSA1IDAgTCAyNSAwIEMgMjcuNzYxNDE5Mjk2MjY0NjUgMCAzMCAyLjIzODU4MDcwMzczNTM1MiAzMCA1IEwgMzAgMjUgQyAzMCAyNy43NjE0MTkyOTYyNjQ2NSAyNy43NjE0MTkyOTYyNjQ2NSAzMCAyNSAzMCBMIDE5IDMwIEwgMTkgMTguMzMzMzMwMTU0NDE4OTUgQyAxOSAxOC4zMzMzMzAxNTQ0MTg5NSAxOS4wNjY4Njk3MzU3MTc3NyAxNy40MDgzNDk5OTA4NDQ3MyAxOC44MDMwNzAwNjgzNTkzOCAxNi43NzQ0NTk4Mzg4NjcxOSBDIDE4LjUzOTI3MDQwMTAwMDk4IDE2LjE0MDU2OTY4Njg4OTY1IDE3Ljk0NDc4OTg4NjQ3NDYxIDE1Ljc5Nzc2MDAwOTc2NTYzIDE3Ljk0NDc4OTg4NjQ3NDYxIDE1Ljc5Nzc2MDAwOTc2NTYzIEMgMTcuMDkzMTE4NjY3NjAyNTQgMTUuMDI3OTQ4Mzc5NTE2NiAxNS41NjgyOTY0MzI0OTUxMiAxNC45OTg0NTY5NTQ5NTYwNSAxNS4zMzk2OTQ5NzY4MDY2NCAxNC45OTg0NTY5NTQ5NTYwNSBDIDE1LjMyMDczMjExNjY5OTIyIDE0Ljk5ODQ1Njk1NDk1NjA1IDE1LjMxMDcwMDQxNjU2NDk0IDE0Ljk5ODY2MDA4NzU4NTQ1IDE1LjMxMDcwMDQxNjU2NDk0IDE0Ljk5ODY2MDA4NzU4NTQ1IEwgMCAxNC45OTg2NjAwODc1ODU0NSBDIDAgMTQuOTk4NjYwMDg3NTg1NDUgMCAxMS40Njc5NTA4MjA5MjI4NSAwIDUgQyAwIDIuMjM4NTgwNzAzNzM1MzUyIDIuMjM4NTgwNzAzNzM1MzUyIDAgNSAwIFoiLz48L2c+PGcgY2xhc3M9ImEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwOCAyMDUpIj48cGF0aCBjbGFzcz0iYiIgZD0iTTUsMEgyNWE1LDUsMCwwLDEsNSw1VjI1YTUsNSwwLDAsMS01LDVINWE1LDUsMCwwLDEtNS01VjVBNSw1LDAsMCwxLDUsMFoiLz48cGF0aCBjbGFzcz0iYyIgZD0iTSA1IDIgQyAzLjM0NTc5MDg2MzAzNzEwOSAyIDIgMy4zNDU3OTA4NjMwMzcxMDkgMiA1IEwgMiAyNSBDIDIgMjYuNjU0MjA5MTM2OTYyODkgMy4zNDU3OTA4NjMwMzcxMDkgMjggNSAyOCBMIDI1IDI4IEMgMjYuNjU0MjA5MTM2OTYyODkgMjggMjggMjYuNjU0MjA5MTM2OTYyODkgMjggMjUgTCAyOCA1IEMgMjggMy4zNDU3OTA4NjMwMzcxMDkgMjYuNjU0MjA5MTM2OTYyODkgMiAyNSAyIEwgNSAyIE0gNSAwIEwgMjUgMCBDIDI3Ljc2MTQxOTI5NjI2NDY1IDAgMzAgMi4yMzg1ODA3MDM3MzUzNTIgMzAgNSBMIDMwIDI1IEMgMzAgMjcuNzYxNDE5Mjk2MjY0NjUgMjcuNzYxNDE5Mjk2MjY0NjUgMzAgMjUgMzAgTCA1IDMwIEMgMi4yMzg1ODA3MDM3MzUzNTIgMzAgMCAyNy43NjE0MTkyOTYyNjQ2NSAwIDI1IEwgMCA1IEMgMCAyLjIzODU4MDcwMzczNTM1MiAyLjIzODU4MDcwMzczNTM1MiAwIDUgMCBaIi8+PC9nPjwvZz48L3N2Zz4=);
width: 15px;
height: 15px;
background-repeat: no-repeat;
position: relative;
top: 25%;
}
.window-header .right-side .btn-box .close {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMy40MTQgMTMuNDE0Ij48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZDNkM2QzO3N0cm9rZS1saW5lY2FwOnJvdW5kO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjQyLjc5MyAtMTgyLjc5MykiPjxsaW5lIGNsYXNzPSJhIiB4Mj0iMTIiIHkyPSIxMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQzLjUgMTgzLjUpIi8+PGxpbmUgY2xhc3M9ImEiIHgxPSIxMiIgeTI9IjEyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNDMuNSAxODMuNSkiLz48L2c+PC9zdmc+);
width: 12px;
height: 12px;
background-repeat: no-repeat;
position: relative;
position: relative;
top: 30%;
}
This is JS code
function init() {
const window = remote.getCurrentWindow();
document.getElementById("min-btn").addEventListener("click", function (e) {
window.minimize();
});
document.getElementById("max-btn").addEventListener("click", function (e) {
if (!window.isMaximized()) {
this.classList.remove('max')
this.classList.add('unmax')
window.maximize();
} else {
this.classList.remove('unmax')
this.classList.add('max')
window.unmaximize();
}
});
document.getElementById("close-btn").addEventListener("click", function (e) {
window.close();
});
//Listened to the application window sizes and if sizes changed, size icon is changed.
if (remote.getCurrentWindow().isMaximized()) {
document.getElementById("max-btn").classList.remove('max')
document.getElementById("max-btn").classList.add('unmax')
} else {
document.getElementById("max-btn").classList.remove('unmax')
document.getElementById("max-btn").classList.add('max')
}
remote.getCurrentWindow().on('resize', _.debounce(function () {
if (remote.getCurrentWindow().isMaximized()) {
document.getElementById("max-btn").classList.remove('max')
document.getElementById("max-btn").classList.add('unmax')
} else {
document.getElementById("max-btn").classList.remove('unmax')
document.getElementById("max-btn").classList.add('max')
}
}, 100))
};
document.onreadystatechange = function () {
if (document.readyState == "complete") {
init();
}
};

Make 2 divs overlaping 2 other divs responsively

So,I don't know how to make divs overlap eachother in such a way and I'm curious to find out if it's even possible. If it is, is it also possible to make something like that responsive too, using bootstrap or some other library? If yes, wouldn't it be needed for the divs to completely change configuration so the content still makes sense? (like in the pic below)
If something like that can't happen (referring to the responsiveness) is there a way to make the entire thing disappear and show something else instead?

This might give you somewhere to start?
You'll need to use a combination of #media queries and flex.
Look into #media queries here: CSS #media Rule
Look into flex box here: A Complete Guide to Flexbox
This code might be of some help! (Resize the output window to see the results)
See here: JSFiddle
.panel-container {
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.panel {
}
.col {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#a1 {
background-color: blue;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#a2 {
background-color: blue;
height: 100px;
width: 100px;
border-radius: 50%;
line-height: 100px;
text-align: center;
}
#a3 {
background-color: blue;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#b1 {
background-color: red;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#b2 {
background-color: red;
height: 100px;
width: 100px;
border-radius: 50%;
line-height: 100px;
text-align: center;
}
#b3 {
background-color: red;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#media only screen and (max-width: 600px) {
.container {
display: flex;
flex-direction: column;
}
.col {
display: flex;
flex-direction: column;
}
}
<div class="container">
<div class="col">
<div id="a1">A1</div>
<div id="a2">A2</div>
<div id="a3">A3</div>
</div>
<div class="col">
<div id="b1">B1</div>
<div id="b2">B2</div>
<div id="b3">B3</div>
</div>
</div>
<div class="panel-container">
<div id="lhs" class="panel"></div>
<div id="rhs" class="panel"></div>
</div>

its possible. use CSS flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
youll want to switch the flex direction of the container element with a css media query and so on... this is a more html/css related problem than javascript