Center footer in a container with dynamic width - javascript

I use resizable split views with split.js
I have a very basic setup with 2 panes
How can I center bottom-footer in the right pane?
Since the width of the pain is dynamic the footer doesn't centered properly once pane resized.
I've tried all possible positioning - absolute, fixed, sticky, relative but nothing seems to be work.
JSFiddle
Split(['.split-left', '.split-right'], {
gutterSize: 10,
sizes: [33,67] // in %
})
body {
margin: 0;
height: 100vh;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-items: center;
align-items: center;
}
.split {
width:100%;
height:100%;
border: 0px solid;
overflow: hidden;
}
.split-left {
background-color: rgb(250,250,250);
padding: 20px;
padding-top: 0px;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 60px;
}
.split-right {
background-color: rgb(253,253,253);
background-color: white;
padding-top: 0px;
padding-right: 50px;
padding-left: 50px;
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
}
.gutter {
cursor: col-resize !important;
height: 100%;
background: #ddd;
}
.footer {
position: fixed;
bottom: 0;
width: 60%;
background: rgba(255,0,0,0.2);
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.11/split.min.js"></script>
<body>
<div class="content">
<div class="split split-left">
</div>
<div class="split split-right">
<div class="content"></div>
<div class="footer">Footer</div>
</div>
</div>
</body>

you can use css flexbox
.split-right {
display: flex;
justify-content: center; // center horizontally
align-items: center; // center vertically
}
css flexbox tutorial

Related

Area not clickable after using ::before

I'm trying to imitate a design where I have to add a pattern over the linear gradient. I've used ::before element to do that.
But now the hamburger icon and links are not working. When I inspect the site on the mobile viewport, it shows that body covers the whole area. I have tried messing with the z-index and pointer events but failed to meet the expectation. Is there any way to fix this?
const menuBtn = document.querySelector('.hamburger');
menuBtn.addEventListener('click',()=>{
menuBtn.parentElement.classList.toggle('open');
console.log('button clicked')
});
body{
min-height: 100vh;
font-size: 1rem;
text-align: center;
z-index: 0;
}
header{
min-height: 85vh;
background-image:linear-gradient(hsl(13, 100%, 72%),hsl(353, 100%, 62%));
border-bottom-left-radius: 6rem;
padding: 3rem 1.5rem;
position: relative;
overflow: hidden;
z-index: -2;
}
header::before{
position: absolute;
content: '';
top: 5rem;
left: 8rem;
width: 100%;
height: 100%;
background: url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg) no-repeat;
background-size: 100% 100%;
transform: scale(3);
z-index: -1;
}
header nav{
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo{
max-width: 80px;
}
nav .nav-links,nav .login-section{
display: none;
}
nav .menu{
width: 2rem;
display: flex;
align-items: center;
cursor:pointer;
}
.menu .hamburger{
max-width:40px;
cursor:pointer;
}
header .text-content{
max-width: 300px;
margin: 0 auto;
}
<header>
<nav>
<img src="https://cutt.ly/5K0WfPK" alt="Home" class="logo">
<div class="menu">
<img src="https://cutt.ly/TK0EzcH" class="hamburger">
</div>
</nav>
<div class="text-content">
<h1>A header is here</h1>
<p>lorem10</p>
<div class="header-links">
Some links
Some links
</div>
</div>
</header>
You've set property z-index: -3; to header and z-index: -1; to it's pseudo element ::before. It is clear that header has smaller z-index than it's pseudo element.
So ::before has greater stack order than that of header. Due to that reason ::before is in the front of header which has lower stack order than it's pesudo element.
const menuBtn = document.querySelector('.hamburger');
menuBtn.addEventListener('click',()=>{
menuBtn.parentElement.classList.toggle('open');
console.log('button clicked')
});
body{
min-height: 100vh;
font-size: 1rem;
text-align: center;
z-index: 0;
}
header{
min-height: 85vh;
background-image:linear-gradient(hsl(13, 100%, 72%),hsl(353, 100%, 62%));
border-bottom-left-radius: 6rem;
padding: 3rem 1.5rem;
position: relative;
overflow: hidden;
z-index: 0;
}
header::before{
position: absolute;
content: '';
top: 5rem;
left: 8rem;
width: 100%;
height: 100%;
background: url("https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg") no-repeat;
background-size: 100% 100%;
transform: scale(3);
z-index: -1;
}
header nav{
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo{
max-width: 80px;
}
nav .nav-links,nav .login-section{
display: none;
}
nav .menu{
width: 2rem;
display: flex;
align-items: center;
cursor:pointer;
}
.menu .hamburger{
max-width:40px;
cursor:pointer;
}
header .text-content{
max-width: 300px;
margin: 0 auto;
}
<header>
<nav>
<img src="https://cutt.ly/5K0WfPK" alt="Home" class="logo">
<div class="menu">
<img src="https://cutt.ly/TK0EzcH" class="hamburger">
</div>
</nav>
<div class="text-content">
<h1>A header is here</h1>
<p>lorem10</p>
<div class="header-links">
Some links
Some links
</div>
</div>
</header>
Be careful when using position: relative/absolute they are not in the normal flow so their behavior is "ghost-like". In the example:
the position properties are removed
the pseudo-element header::before is removed
the background properties of header::before has been merged with the background properties in header
background-image:
/* Top */
url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg),
/* Bottom */
linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%));
background-repeat: no-repeat, repeat;
background-size: 150% 150%, cover;
Note, the shorthand background property isn't used here. Each value is separated by a comma. See this article for details
const menuBtn = document.querySelector('.hamburger');
menuBtn.addEventListener('click', () => {
menuBtn.parentElement.classList.toggle('open');
console.log('button clicked')
});
body {
min-height: 100vh;
font-size: 1rem;
text-align: center;
}
header {
min-height: 85vh;
background-image:
url(https://blogr-landing-page-main-1.vercel.app/images/bg-pattern-intro.svg),
linear-gradient(hsl(13, 100%, 72%), hsl(353, 100%, 62%));
background-repeat: no-repeat, repeat;
background-size: 150% 150%, cover;
border-bottom-left-radius: 6rem;
padding: 3rem 1.5rem;
overflow: hidden;
}
header nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo {
max-width: 80px;
}
nav .nav-links,
nav .login-section {
display: none;
}
nav .menu {
width: 2rem;
display: flex;
align-items: center;
cursor: pointer;
}
.menu .hamburger {
max-width: 40px;
cursor: pointer;
}
header .text-content {
max-width: 300px;
margin: 0 auto;
}
<header>
<nav>
<img src="https://cutt.ly/5K0WfPK" alt="Home" class="logo">
<div class="menu">
<img src="https://cutt.ly/TK0EzcH" class="hamburger">
</div>
</nav>
<div class="text-content">
<h1>A header is here</h1>
<p>lorem10</p>
<div class="header-links">
Some links
Some links
</div>
</div>
</header>

What is wrong with adding grid area in this code?

Since products were not responsive against resizing the browser like this:
I wanted to make my grid responsive so i added grid area like this:
.grid{
display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:1em;
grid-area: 'head head head head'
'card card card card'
'foot foot foot foot' ;
}
but now footer is smaller and i have just one product instead of what should be in the body:
what is wrong with adding grid area in this code?
or if there is a better way to make them responsive what is it?
also this is the overall view of the site:
.header{
color: saddlebrown;
width: 100%;
height: 100px;
position: fixed;
background-color: burlywood;
opacity: 33px;
top: 0;
left: 0;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 1000;
grid-area: head;
}
body{
margin-top: 333px;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.footer{
color: white;
background: sandybrown;
margin-top: 100px;
height: 100px;
margin-right: 0;
width: 100%;
grid-area: foot;
}
.card {
max-width: 400px;
margin: auto ;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
position: relative;
grid-area: card ;
}
.grid{
display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:1em;
grid-area: 'head head head head'
'card card card card'
'foot foot foot foot' ;
}
.card img{
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {background-color: #f44336;
font-size:22px;
border-radius: 3px;
position: absolute;
bottom: 0px;
right: 0px;
padding: 3px;
}
.card button {
border: none;
color: white;
background-color: #000;
position: relative ;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id{
background-color: saddlebrown;
color: white;
margin: 0;
font-size: 30px;
height: 310px;
}
.number{
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
#media screen and (max-width: 1864px){
.card{
max-width: 300px;
}
.price{
font-size:20px;
}
.card img{
height: 300px;
width: 300px;
}
}
#media screen and (max-width: 1319px){
.grid{
grid-template-columns:1fr 1fr 1fr ;
}
}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
<div class="header">
<h1 >header</h1>
</div>
</head>
<body style="background-color: #36454F;">
<div class="grid">
{% for i in p%}
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
{%endfor%}
</div>
<div class="footer">
<h1 >&copy All rights reserved</h1>
</div>
</body>
</html>
You want to set grid-area with head and foot which are outside of grid itself.
My propose is to remove grid-area from grid, and just use grid-template with media queries, or simply you can add display flex with flex-wrap.

Container with Image & Image Description to be Responsive

I am trying to create this simple landing page where there is one row, which contains two <div class="image">, which are container div's which hold the image, the image title, and the image description.
I am trying to get it to be responsive so that when a user on mobile device access the page, the two images will be on one column as opposed to one row. I have started over and over adjusting CSS trying to get what I want, and the closest I have gotten is the example provided in the below snippet.
CSS Stylings I have tried but failed:
#media (min-width: ){} to change max/min size when the screen goes above/below certain pixels
Set a minimum size for the image itself
Tried the same for the container of the image
I couldn't get any of the above to make my landing page responsive.
.container1 {
display: flex;
justify-content: center;
position: relative;
margin-left: 160px;
margin-right: 180px;
}
.container1 p {
text-align: center;
margin: 0;
padding-top: -10px;
}
.container1 h3 {
margin: 10px;
padding: 0;
}
.armycontracts {
width: 100%;
text-align: center;
padding-left: 20px;
}
.armycontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts {
width: 100%;
margin: 0 auto;
text-align: center;
}
.landinghead {
text-align: center;
font-size: 25px;
font-weight: bold;
}
.projectInfo {
text-align: center;
font-size: 15px;
margin-top: 0px;
}
#contentRow {
margin-top: -50px;
}
.container {
display: flex;
justify-content: center;
position: relative;
}
.ms-core-pageTitle {
display: none;
}
.row-one {
width: 100%;
text-align: center;
padding: 20px;
}
#media (min-width: 400px) {
.row-one {
display: flex;
justify-content: center;
}
}
.image {
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
min-height: auto;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
.image__img {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
}
.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;
border-radius: 0px;
}
.image__overlay>* {
transform: translateY(20px);
transition: transform 0.25s;
}
.image__overlay:hover {
opacity: 1;
}
.image__overlay:hover>* {
transform: translateY(0);
}
.image__title {
font-size: 2em;
font-weight: bold;
}
.image__description {
font-size: 1.25em;
margin-top: 0.25em;
}
#contentRow {
overflow-y: hidden;
}
#sideNavBox {
DISPLAY: none
}
#contentBox {
margin-left: 0px
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
<h3 class="landinghead">Projects Landing Page</h3>
<p class="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="row-one">
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army" />
<div class="image__overlay">
<div class="image__title">Team 1 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3 <br>
</p>
</div>
</a>
</div>
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://media.defense.gov/2021/Feb/01/2002574582/-1/-1/0/210124-M-WH885-1032.JPG" alt="Usmc" />
<div class="image__overlay">
<div class="image__title">Team 2 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3
</p>
</div>
</a>
</div>
</div>
</body>
.row-one{
width: 80%;
text-align: center;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.image{
flex: 1 45%;
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
This works. JSFiddle
You can use 'flex-direction' to achieve what you want.
This page has pretty good information about it.
https://css-tricks.com/almanac/properties/f/flex-direction/
Apply a flex-direction to your 'row-image' class. Set it to 'column' when you want your elements to stack, set it to 'row' when the elements should flow in a line.

Placing div vertical middle with parent

I want to place a child element vertically with the parent element
<!DOCTYPE html>
<html>
<head>
<title>Jajal</title>
<style type="text/css">
#body {
font-family: sans-serif, arial, 'Roboto';
}
#outer {
width: 280px;
background-color: white;
height: 253px;
background-color: #f0f0f0;
}
.imgbox {
height: 174px;
width: 270px;
overflow: hidden;
display: table;
margin: 0 auto;
background-color: black;
text-align: center;
}
.img_content {
max-height: 174px;
max-width: 270px;
margin: 0 auto;
vertical-align: middle;
display: table-cell;
}
.titlebox {
max-width: 270px;
text-align: center;
}
.title {
font-weight: 900;
font-size: 14px;
}
</style>
</head>
<body>
<div id="outer">
<div class="imgbox">
<img class="img_content" src="http://lorempixel.com/700/100" alt="coba">
</div>
<div class="titlebox">
<p class="title">Lorem ipsum Amet</p>
</div>
</div>
</body>
</html>
Why the img_content class doesn't place verticaly middle with imgbox class when the image is to width?
Add following CSS:
.imgbox {
height: 174px;
width: 270px;
overflow: hidden;
margin: 0 auto;
background-color: black;
text-align: center;
position: relative;
}
.img_content {
max-height: 174px;
max-width: 270px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
Use css3 flexbox. Following css should be added on parent element.
.parent {
justify-content: center;
align-items: center;
display: flex;
}
#body {
font-family: sans-serif, arial, 'Roboto';
}
#outer {
width: 280px;
background-color: white;
height: 253px;
background-color: #f0f0f0;
}
.imgbox {
justify-content: center;
align-items: center;
display: flex;
height: 174px;
width: 270px;
overflow: hidden;
margin: 0 auto;
background-color: black;
text-align: center;
}
.img_content {
max-height: 174px;
max-width: 270px;
}
.titlebox {
max-width: 270px;
text-align: center;
}
.title {
font-weight: 900;
font-size: 14px;
}
<div id="outer">
<div class="imgbox">
<img class="img_content" src="http://lorempixel.com/700/100" alt="coba">
</div>
<div class="titlebox">
<p class="title">Lorem ipsum Amet</p>
</div>
</div>
There are a lo of ways you could do this. You could wrap he img tag in a div with class of say, wrapper. then the wrapper div would have styling like so :
.wrapper {
vertical-align: middle;
display: table-cell;
}
, and remove the display:table-cell, and vertical-align:middle from the image
Working fiddle using another way if you dont wan any changes in the existing CSS
https://jsfiddle.net/mfkxq728/
Also,you could use either of flex(Browser support might be a concern) or the good old relative-absolute position with a translate-Y. The translate-Y would however need browser prefixes for consistent performance.
Cheers !!

How to align all left floated elements in center of their parent?

.container{width:50%;padding:10px;box-sizing:border-box;background-color:#00FF00;}
.container::after {content: ''; display: table; clear: both;}
.child{width:100px;height:30px;line-height:30px;text-align:center;border-radius:2px;background-color:#FFFF00;float:left;margin:2px;}
<div class="container">
<div class="child">First</div>
<div class="child">Second</div>
<div class="child">Third</div>
<div class="child">Fourth</div>
</div>
I want to align the content of .container in center without using property display: inline-block; on .child.
see here : jsfiddle
EDITED : use display:flex with justify-content:center on the .sub-container and display:inline-block to .child
or you could use float:left on .child , it still works. but i suggest you don't use float when you want to center smth
code :
.child
{
width: 50px;
height: 30px;
text-align: center;
border-radius: 10px;
background-color: #FFFF00;
display:inline-block;
}
.sub-container
{
width: 50%;
height: auto;
padding: 10px;
box-sizing: border-box;
margin: 0px auto;
background-color: #00FF00;
float: left;
text-align: center;
position:relative;
display: flex;
justify-content: center;
}
let me know if this was what you were looking for
Add to .main-container { margin: 0 auto; display: table; } and remove width:100%;
Maybe this can help you:
Add margin 50% - half the width of the container. Just a disclaimer: this is not supported in some of the browsers.
.child {
width: 100px;
height: 30px;
margin-left: calc(50% - 50px);
text-align: center;
border-radius: 10px;
background-color: #FFFF00;
float: left;
}

Categories