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>

Why is the closing X not displayed if the navbar is opened?

I've tried now quite a time to figure out, why the closing symbol (X) is not displayed if I open my navbar.
If it is closed, everything seems fine.
In the Google Chrome dev tools the icon is still on the page, but in front-end it is not visible.
My environment:
macOS Monterey
VS Code with Live Preview extension
Google Chrome
Is there something I don't see?
Here is my index.html file (I know, the JavaScript should be in an own file ;-P):
section {
background-color: blue;
padding: 20px;
/* height: 40px; */
display: flex;
justify-content: space-between;
align-items: center;
}
img {
height: 30px;
width: auto;
}
.toggle-box a img {
filter: invert(1);
}
.img.menu.hide {
display: none;
}
img.close {
display: none;
}
img.close.show {
display: flex;
/* z-index: 9999; */
}
nav.navigation {
display: none;
}
nav.navigation.active {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
/* z-index: 1111; */
}
nav.navigation.active a {
padding: 20px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.phone-logo a img {
filter: invert(1);
}
<section>
<div class="toggle-box">
<a onclick="showMenu()" href="#">
<img class="menu" src="menu-outline.svg" />
<img class="close" src="close-outline.svg" />
</a>
</div>
<nav class="navigation">
Sec 1
Sec 2
Sec 3
Sec 4
</nav>
<div class="phone-logo">
<a href="#">
<img src="call-outline.svg" />
</a>
</div>
</section>
<script>
function showMenu() {
document.querySelector(".menu").classList.toggle("hide");
document.querySelector(".close").classList.toggle("show");
document.querySelector(".navigation").classList.toggle("active");
}
</script>
</body>

Elements which fall later in the document have a higher stacking order, meaning that they're layered over earlier elements. You can rearrange your markup to resolve that.
section {
background-color: blue;
padding: 20px;
/* height: 40px; */
display: flex;
justify-content: space-between;
align-items: center;
}
img {
height: 30px;
width: auto;
}
.toggle-box a img {
filter: invert(1);
}
.img.menu.hide {
display: none;
}
img.close {
display: none;
}
img.close.show {
display: flex;
/* z-index: 9999; */
}
nav.navigation {
display: none;
}
nav.navigation.active {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
/* z-index: 1111; */
}
nav.navigation.active a {
padding: 20px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.phone-logo a img {
filter: invert(1);
}
<section>
<nav class="navigation">
Sec 1
Sec 2
Sec 3
Sec 4
</nav>
<div class="toggle-box">
<a onclick="showMenu()" href="#">
<img class="menu" src="menu-outline.svg" />
<img class="close" src="close-outline.svg" />
</a>
</div>
<div class="phone-logo">
<a href="#">
<img src="call-outline.svg" />
</a>
</div>
</section>
<script>
function showMenu() {
document.querySelector(".menu").classList.toggle("hide");
document.querySelector(".close").classList.toggle("show");
document.querySelector(".navigation").classList.toggle("active");
}
</script>
</body>

It's just a matter of z-index for the .toggle-box.
section {
background-color: blue;
padding: 20px;
/* height: 40px; */
display: flex;
justify-content: space-between;
align-items: center;
}
img {
height: 30px;
width: auto;
}
.toggle-box a img {
filter: invert(1);
}
.img.menu.hide {
display: none;
}
img.close {
display: none;
}
img.close.show {
display: flex;
/* z-index: 9999; */
}
nav.navigation {
display: none;
}
nav.navigation.active {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
/* z-index: 1111; */
}
nav.navigation.active a {
padding: 20px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.phone-logo a img {
filter: invert(1);
}
.toggle-box {
z-index: 1;
}
<section>
<div class="toggle-box">
<a onclick="showMenu()" href="#">
<img class="menu" src="menu-outline.svg" />
<img class="close" src="close-outline.svg" />
</a>
</div>
<nav class="navigation">
Sec 1
Sec 2
Sec 3
Sec 4
</nav>
<div class="phone-logo">
<a href="#">
<img src="call-outline.svg" />
</a>
</div>
</section>
<script>
function showMenu() {
document.querySelector(".menu").classList.toggle("hide");
// document.querySelector(".close").classList.toggle("show");
document.querySelector(".navigation").classList.toggle("active");
}
</script>
</body>

disable left or right arrow at the last item

Just made a simple div slider with navigation arrows. The div slider works just fine, except, I want some sort of CSS styling to be applied to the arrows.
That is, when a user clicks the left or right arrow, up to the last item, apply CSS styling telling the user they've reached the end of the slider.
let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
buttonLeft.addEventListener('click', function() {
container.scrollLeft -= 90
})
buttonRight.addEventListener('click', function() {
container.scrollLeft += 90
})
body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail:nth-child(1) {
background-color: darkturquoise;
}
div.thumbnail:nth-child(2) {
background-color: goldenrod;
}
div.thumbnail:nth-child(3) {
background-color: rebeccapurple;
}
div.thumbnail:nth-child(4) {
background-color: powderblue;
}
div.thumbnail:nth-child(5) {
background-color: firebrick;
}
div.thumbnail:nth-child(6) {
background-color: sienna;
}
div.thumbnail:nth-child(7) {
background-color: bisque;
}
div.thumbnail:nth-child(8) {
background-color: navy;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}
<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">❮</button>
<div id="slider">
<div class="thumbnail active">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<button id="slide_right" class="slide_arrow">❯</button>
</div>

Simply check to see if you need to disable each button based on the position of the scroll. Then if there is a need to disable a button, add the disabled class to the button, otherwise remove it.
Future enhancements.
Remove the hardcoded 360 value for the scroll end. This should be calculated from the size of the carousel items and the width of the viewport.
Allow more than one carousel to work with the same code. This could be achieved by using a javascript class that would hold the elements inside an object, separate from other carousels.
See the demo:
let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
let checkScroll = function() {
if (container.scrollLeft <= 0)
buttonLeft.classList.add("disabled");
else
buttonLeft.classList.remove("disabled");
if (container.scrollLeft >= 360)
buttonRight.classList.add("disabled");
else
buttonRight.classList.remove("disabled");
}
checkScroll();
buttonLeft.addEventListener('click', function() {
container.scrollLeft -= 90;
checkScroll();
})
buttonRight.addEventListener('click', function() {
container.scrollLeft += 90;
checkScroll();
})
body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail:nth-child(1) {
background-color: darkturquoise;
}
div.thumbnail:nth-child(2) {
background-color: goldenrod;
}
div.thumbnail:nth-child(3) {
background-color: rebeccapurple;
}
div.thumbnail:nth-child(4) {
background-color: powderblue;
}
div.thumbnail:nth-child(5) {
background-color: firebrick;
}
div.thumbnail:nth-child(6) {
background-color: sienna;
}
div.thumbnail:nth-child(7) {
background-color: bisque;
}
div.thumbnail:nth-child(8) {
background-color: navy;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}
.slide_arrow.disabled {
opacity: 0.2;
cursor: auto !important;
}
<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">❮</button>
<div id="slider">
<div class="thumbnail active">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<button id="slide_right" class="slide_arrow">❯</button>
</div>

a simple solution to this is to actually create a css class that defines the style of arrows when there are no more items and then just add/remove class based on current index of items

React.js Setting State Modifies Website scale

when my component re-renders itself after setState(); it seems to set the wrong scale for the page and all the content seems to fall off the side, it looks like the HTML and CSS has got the wrong screen size, and therefore the images, text, and boxes don't fit the screen, this isn't an issue with my CSS breakpoints or anything but I don't understand what I need to do since i've never seen this before
Before re-render:
after re-render:
MoviesHome.js
constructor(props){
super(props)
this.state = {
slideUpClass: ['movieFullTabContainer', 'movieFullTabContainerClosed'],
isOpen: 0,
};
handleMovieClick = () => {
if(this.state.isOpen === 0){
this.setState({isOpen: 1});
}else{
this.setState({isOpen: 0});
}
}
...
<div className='rowsContainer'>
<div className='rowContent'>
{this.state.Trending != null ? <MoviesRow clickHandler={this.handleMovieClick} name={'For You'} index={0} movies={this.state.Trending}/> : ''}
{this.state.Trending != null ? <MoviesRow clickHandler={this.handleMovieClick} name={'Trending'} index={1} movies={this.state.Trending}/> : ''}
</div>
</div>
<MovieSlideUp clickHandler={this.handleMovieClick} slideupClass={this.state.slideUpClass[this.state.isOpen]}/>
MoviesRow.js
<div key={Math.random(0, 1000)} onClick={() => this.props.clickHandler()} className='sliderItem'>
<img className='sliderImg' src={`https://image.tmdb.org/t/p/w1280/${this.props.movies[i].poster_path}`} alt=''></img>
<div className='movieOverlayContainer'>
<div className='movieOverlayContainerContent'>
<p className='movieTitle'>{this.props.movies[i].title}</p>
<p>{this.props.movies[i].release_date.substring(0,4)}</p>
</div>
</div>
</div>
MovieFullTab.js
import CircleSVG from './SVG/Circle-Solid.svg';
import StarSVG from './SVG/Star-Solid.svg';
import HeartSVG from './SVG/Heart-Solid.svg';
import PlaySVG from './SVG/Play-Solid.svg';
...
<div id={this.props.slideupClass}>
<div onClick={() => this.props.clickHandler()} id='fullscreenTabContainer'>
<div id='fullscreenSurroundingContainer'>
<div id='fullscreenContent'>
<div id='movieInfoContainer'>
<div id='movieImageContainer'>
<img src='https://image.tmdb.org/t/p/w1280/jTswp6KyDYKtvC52GbHagrZbGvD.jpg'></img>
</div>
<div id='movieFullInfoContainer'>
<p id='movieFullInfoTitle'>Luca</p>
<p className='movieFullInfoText'>15</p>
<p className='movieFullInfoText'>2021</p>
<div id='fullGenreContainer'>
<p>Adventure</p>
<img alt='' className='seperator-side' src={CircleSVG}></img>
<p id='secondGenre'>Comedy</p>
</div>
<div id='movieFullRatingsContainer'>
<img id='featuredStarIcon' alt='' src={StarSVG}></img>
<p>8.6</p>
</div>
<div id='fullMovieInfoOverviewContainer'>
<p>Luca and his best friend Alberto experience an unforgettable summer on the Italian Riviera.
But all the fun is threatened by a deeply-held secret: they are sea monsters from another
world just below the water’s surface</p>
</div>
<div id='movieFullInfoButtonsContainer'>
<div id='movieFullInfoLikeButton'>
<img alt='' src={HeartSVG}></img>
</div>
<div id='movieFullInfoPlayButton'>
<p>Watch</p>
<img alt='' src={PlaySVG}></img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
MoviesRow.css
.rowTopContainer{
display: flex;
align-items: baseline;
}
.ArrowButtonImage{
filter: invert(65%) sepia(5%) saturate(170%) hue-rotate(169deg) brightness(84%) contrast(82%);
}
.flippedArrow{
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.buttonSlideContainer{
display: flex;
margin-left: auto;
}
.ButtonSlide:first-child{
margin-right: 35px;
}
.ButtonSlide{
width: 30px;
height: 25px;
cursor: pointer;
}
.movieRowTitleContainer{
margin-right: 20px;
}
.movieRowTitle{
color: white;
font-family: Bold;
font-size: 23px;
margin-bottom: 25px;
}
.viewAllButtonContainer {
cursor: pointer;
}
.viewAllButtonContainer:hover p {
text-decoration: underline;
}
.viewAllButtonContainer p {
color: white;
font-size: 0.9em;
}
.moviesRowSliderContainer{
display: flex;
overflow-x: hidden;
overflow: hidden;
width: 100%;
scroll-behavior: smooth;
}
.sliderItemContent:hover .movieOverlayContainer{
opacity: 1;
background-color: rgba(0, 0, 0, 0.61);
}
.sliderImg{
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: cover;
}
.movieOverlayContainerContent{
position: relative;
top: 0;
left: 0;
text-align: center;
justify-content: flex-start;
display: flex;
flex-direction: column;
height: 90%;
width: 100%;
}
.movieOverlayContainerContent p:nth-child(2){
font-size: 1vw;
}
.movieTitle{
font-size: 1.4vw;
width: 80%;
margin-bottom: 5px;
margin: 0 auto;
margin-top: 5px;
font-family: Bold;
}
.movieShortInfoContainer{
margin-top: auto;
}
.movieShortInfoContent{
justify-content: center;
display: flex;
text-align: center;
margin-top: auto;
}
.movieShortInfoContent p:not(:first-child) {
/* margin-left: 15px; */
font-size: 0.9vw;
}
.movieShortInfoContent p:nth-child(3){
margin-left: 0;
}
.movieShortInfoContent p:nth-child(2){
margin-right: 15px;
}
.movieStarIcon{
height: 15px;
filter: invert(68%) sepia(95%) saturate(406%) hue-rotate(359deg) brightness(104%) contrast(88%);
}
.userRatingsContainer{
display: flex;
align-items: center;
}
.movieOverlayContainer {
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-color: rgba(0, 0, 0, 0);
border-radius: 5px;
opacity: 0;
color: white;
transition: all 0.1s ease;
}
.sliderItem{
width: 19%;
height: auto;
flex:none;
position: relative;
}
.sliderItemContent{
height: 100%;
width: 80%;
cursor: pointer;
}
#media only screen and (max-width: 1400px) {
.sliderItem{
width: 18%;
}
}
#media only screen and (max-width: 650px) {
.sliderItem{
width: 38%;
}
.movieOverlayContainerContent p:nth-child(2){
font-size: 1.8vw;
}
}
#media only screen and (max-width: 550px) {
.movieTitle{
font-size: 3vw;
}
}
I Hope the code helps :)

It was simply the display: flex; container pushing the container, props to Drew Reese for helping resolve the issue... Thanks :)

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();
}
};