Running into an issue: I have a total of five grid items, but the problem lies within two items: leftbar & rightbar - the text overflows vertically when I scale the page down. Instead, I would like for the text to remain wthin the two grid items and mold around the brand shown in the middle. I understand that I can use overflow:scroll and it would solve my issue, but that's not a solution I'm looking for. Ideally, I want the the left/rightbars to adjust around the other grid items.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<header>
<div class = "header">
Hello, World.
</div>
</header>
<div class = "container flex">
<nav class="nav">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Options</li>
<li>Contact</li>
</ul>
</nav>
<main class="logo-center">
<div class= "logo-center-grid-items">
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
</div>
</main>
<div class="leftbar">
<h3>the art.</h3><br>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nostrum facere eum laborum blanditiis exercitationem doloremque. Veritatis suscipit sunt a earum error illum quam, adipisci, fuga corporis in distinctio molestias!
</p> <br>
<div class = "creations-btn">
creations
</div><br>
</div>
<div class="rightbar">
<h3>the craft.</h3><br>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nostrum facere eum laborum blanditiis exercitationem doloremque. Veritatis suscipit sunt a earum error illum quam, adipisci, fuga corporis in distinctio molestias!
</p><br>
<div class = "order-btn">
order
</div><br>
</div>
<footer>
<div class="social-media">
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-discord"></i>
<i class="fab fa-youtube"></i>
</div>
</footer>
</div>
</body>
</html>
My CSS:
:root{
--main-radius: 25px;
--main-padding: 40px;
box-sizing: border-box;
}
.container{
display: grid;
height: 100vh;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 35% 35% auto;
grid-template-areas:
"nav nav nav nav"
"leftbar main main rightbar"
"leftbar main main rightbar"
"footer footer footer footer";
grid-gap: 1.5rem;
text-align: center;
margin: 15px;
margin-bottom: 45px;
}
/* grid items (5) */
/* nav (deleted for the sake of unimportance) */
/* logo center */
.logo-center {
grid-area: main;
display: grid;
}
.logo-center > div {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.logo-center h1 {
background-attachment: fixed;
}
/* left sidebar */
.leftbar{
grid-area: leftbar;
}
/* right sidebar*/
.rightbar{
grid-area: rightbar;
}
.rightbar > p{
margin: 20px;
}
/* footer (deleted for the sake of unimportance) */
I did find one solution that allowed the items to form around the grid like I want, adding inline-table to the parents...
display:inline-table;
width: 100%;
but ultimately this solution comes with the price of the sidebars digging into the footer.
Related
The standard Pc pixel version is working fine! Pc Version image.
The mobile version the right sidebar should go under the content but its still on the right Mobile version, and i do not know what seems to be the problem,in the home.css media query grid-template-areas i guess im missing something, im new on Css Grid
home.css
#media only screen and (min-width: 768px) {
.grid{
display: grid;
grid-template-areas:
'lsidebar content content'
'lsidebar rsidebar rsidebar'
'footer footer footer';
grid-template-columns:1fr 4fr;
}
}
.grid{
display: grid;
padding: 20px;
grid-template-areas:
'lsidebar content rsidebar'
'lsidebar content rsidebar'
'footer footer footer';
grid-template-columns:1fr 3fr 1fr;
}
.lsidebar{
grid-area:lsidebar;
}
.content{
grid-area:content;
}
.rsidebar{
grid-area:rsidebar;
}
.footer{
grid-area:footer;
}
home.blade.php:
#extends('layouts.app')
#section('content')
<link rel="stylesheet" href="{{ asset('css/home.css') }}">
<div class="grid">
<div class="lsidebar">
<ul>
<li>
Home
</li>
<li>
Messages
</li>
<li>
Games
</li>
<li>
Pages
</li>
</ul>
</div>
<div class="content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos voluptatum vitae rem harum hic. Molestias laudantium
dolore quod modi repudiandae, ullam molestiae tempore sed ratione minus nihil pariatur fugit veniam?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas ex soluta nihil molestias asperiores repudiandae. Aspernatur accusamus, enim alias quod, non neque aliquam, soluta aut autem mollitia eaque
impedit assumenda.
</div>
<div class="rsidebar">
Show Friends of this profile
</div>
<div class="footer">
<p style="text-align: center"> This is the footer copyright 2020 This is the footer copyright 2020 This is the footer copyright 2020</p>
</div>
</div>
#endsection
I made a demo of what you want in code pen.
grid demo
resize the browser to see grid changes in different media query.
.lsidebar {
grid-area: lsidebar;
background-color: red;
}
.content {
grid-area: content;
background-color: green;
}
.rsidebar {
grid-area: rsidebar;
background-color: blue;
}
.footer {
grid-area: footer;
background-color: pink;
}
.grid {
display: grid;
grid-gap: 16px;
grid-template-areas:
"lsidebar"
"content"
"rsidebar"
"footer";
}
#media (min-width: 768px) {
.grid {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"lsidebar content"
"lsidebar content"
"lsidebar rsidebar"
"footer footer";
}
}
#media (min-width: 1100px) {
.grid {
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
'lsidebar content rsidebar'
'lsidebar content rsidebar'
'footer footer footer';
}
}
How can I have this header 'full width'. So that the image is on the left side of the screen. But that the content inside (President Jean ...) is in the grid?
I was thinking about creating a new container.
.container--full { max-width: 1400px; width: 100%; }
My .container grid has a max-width of 1170px. So my new container is wider than .container.
And then set a background-image, position left and background color grey.
Inside that .container--full, create .container
<div class="container--full">
<div class="container">
</div>
</div>
Test with container-fluid.
<div class="container-fluid" style="background-image: url('<?php bloginfo('template_directory'); ?>/images/commission-header.png');">
<div class="container">
<div class="col-sm-3">
<div class="info">
President
</div>
</div>
<div class="col-sm-9">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime obcaecati consequatur illum dolor quasi labore molestiae voluptatum consectetur laborum vel, modi nulla totam blanditiis quam sapiente, suscipit laudantium. Necessitatibus, eos.
</div>
</div>
</div>
CSS
.commission-business {
.container-fluid {
background-color: $grey--lighter;
background-position: left top;
background-repeat: no-repeat;
}
.info {
background: red;
display: block;
padding: 1rem 2rem;
}
}
Just use bootstraps 'container-fluid' class. (learn more)
<div class="container-fluid">
<div class="row>
...
</div>
</div>
Can anyone tell how can I make right top container and right bottom container to have the same height and to split the red container 50-50% vertically. No matter what is the content inside. I tried stretching content and have them wrapped while keeping flex-direction: row to keep same height for items but I'm lost.
What I expect: right top container grows the same height as right bottom which also results the left container growing automatically of course.
This is what I have so far: http://jsbin.com/rozoxoneki/edit?html,css,output
.flex{
display: flex;
border: 5px solid red;
&-child{
background: green;
border: 2px solid yellow;
flex: 1;
}
}
.flex--vertical{
flex-direction: row;
flex-wrap: wrap;
> .flex-child{
min-width: 100%;
}
}
<div class="flex">
<div class="flex-child">
left
</div>
<div class="flex-child flex flex--vertical">
<div class="flex-child">
<h1>right top</h1>
</div>
<div class="flex-child">
<h1>right bottom</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p>
</div>
</div>
</div>
The accepted answer is not ideal for the use of flex properties, because it can all be done without the need for min-height or max-height
I've cleaned up the example fiddle and removed non-essential css styles to show which flex properties are being used here.
In order to get evenly spaced top/bottom divs, you need to either specify the proper value for flex-basis, or let flex work itself out. Assuming that the parent's display is set to flex with a column orientation, the combined flex style can get us there easily:
.half-containers {
flex: 1;
}
see more on flex styling and the flex-basis property
Intuitively one would expect that this would work just with a flex-direction: column for the main container and the left container's height set to 100%.
Instead all browser do this: (this is a quote from another stackoverflow question)
How is it possible that all major browsers got the flex container to
expand on wrap in row-direction but not in column-direction?
So what you can do is wrap the two right containers into a new one:
Like this HTML - schema:
<div class="main-container">
<div class="left-container">Left container</div>
<div class="right-container">
<div class="half-containers">Top right</div>
<div class="half-containers">Bottom right</div>
</div>
</div>
Here is a jsfiddle as an example how you could style it for the expected result.
In this example the 'main-container' is set to 50% width and 75% height of the body.
Building on Felipe's answer, here is an even more minimal example of how to split a single flex container in half vertically. Each of these styles has been confirmed to be significant and necessary, except for the two at the bottom marked optional.
(What got me was that every parent element needs to have a height: 100% set, or the whole thing breaks.)
HTML
<div id="container">
<div class="row">This is the top.</div>
<div class="row">This is the bottom.</div>
</div>
CSS
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
.row {
flex: 1;
}
/* optional: get rid of body margin. makes look nice. */
body {
margin: 0;
}
/* optional: shade the bottom row */
.row:nth-child(2) {
background: #bbb
}
Working CodePen here:
https://codepen.io/rbrtmrtn/pen/NyxeJE
we can use flexbox concepts to split equally between two div with the parent in the following way
* {
width: auto;
height: 100%;
}
.row {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.col {
flex: 1;
margin: 5px;
border: solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Other page</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae
expedita ipsum nobis praesentium velit animi minus amet perspiciatis
laboriosam similique debitis iste ratione nemo ea at corporis aliquam.
</div>
</div>
</body>
</html>
I am trying to create a collapsable sidebar and found an example here.
I would like to change it in order to have:
the "collapsed" sidebar to remain partially visible (in order to have
menu links reduced to buttons);
the "Collapse" button on the sidebar itself;
a fixed navbar on the main page on the right.
I can't find an example on the net, but I am trying to copy the interface in the "Windows 10 Preview" applications (take a look at the Mail or Calendar applications).
Thanks in advance for any help.
i've found this for you
Sidebar icon
You can mix with navbar top fixed
This HTML Part
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
Jquery part
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
Please see this DEMO
This may help others. It has a fixed top nav, swappable mini/full side nav.
https://codepen.io/RobertoCannella/pen/poyBJGr
HTML
<div id="grid-container">
<div id="header">Header</div>
<div id="nav-button" onclick="menu()">
Navigation Button
</div>
<div id="empty-containerOne">Empty Container
</div>
<div id="navigation-menu" id="navigation-menu">Navigation Menu
</div>
<div id="mini-menu">
Mini
</div>
<div id="content">Content Window
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusamus voluptates earum delectus. Cum, illum accusantium! Laudantium enim ullam id veniam nemo, modi alias non eos, debitis beatae maxime nisi.Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus laborum tenetur similique eligendi! Porro sunt molestias unde fugiat, delectus, tenetur aperiam itaque dolores aspernatur veritatis recusandae, ut officiis aut consequatur.<p/>
</div>
<div id="footer">Footer
</div>
</div>
CSS:
#grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: minmax(75px, auto);
border: solid 1px red;
position: relative;
}
#grid-container > div {
position: relative;
background: #ddd;
border: dotted 1px blue;
}
#header {
grid-column: 1/5;
grid-row: 1;
}
#nav-button {
grid-column: 1;
grid-row: 2;
cursor: pointer;
}
#empty-containerOne {
grid-column: 2/5;
grid-row: 2;
}
#navigation-menu {
position: absolute;
grid-column: 1;
grid-row: 3;
left: 0px;
width: 150px;
min-height: 150px;
z-index: 1;
opacity: 90%;
transition: 300ms;
display: block;
}
#mini-menu {
position: absolute;
grid-column: 1;
grid-row: 3;
left: -30px;
width: 30px;
min-height: 150px;
z-index: 1;
opacity: 90%;
transition: 450ms;
}
#content {
grid-column: 1/5;
grid-row: 3;
padding-left: 2Rem;
}
#footer {
grid-column: 1/5;
grid-row: 4;
}
JavaScript (please ignore the poor state management.)
var i=1;
function menu() {
if(i==0){
document.getElementById("navigation-menu").style.left = '0px';
document.getElementById("mini-menu").style.left = '-30px';
i=1;
document.getElementById("toggle").src = "../images/menu.svg";
// document.getElementById("icons").style.display = 'Block';
// console.log("Colapsing menu.");
}
else {
document.getElementById("navigation-menu").style.left = '-150px';
document.getElementById("mini-menu").style.left = '0px'
i=0;
document.getElementById("toggle").src = "../images/menu_open.svg";
// document.getElementById("icons").style.display = 'none';
// console.log("Expanding menu.");
}
}
I'm using Bootstrap 3.3.2 to create two columns. Each column has a heading, a bordered div with text of an unknown length, and an image. I need the bordered divs with text to be the same height, but only when the columns are side by side. If the window is narrow enough for the columns to be stacked, they should not be the same height. How can I achieve this?
I realize I could use JavaScript to set the shortest div's height to be the same as the tallest div's height, but the problem with this method is that when the user decreases the width of their browser window, the text overflows outside of the div.
Here is my code (jsFiddle demo):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.equal {
border: 3px solid #333;
padding: 8px;
}
img {
display: block;
margin: 20px auto 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Foo</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q. Eamne rationem igitur sequere, qua tecum ipse et cum tuis utare, profiteri et in medium proferre non audeas? Duo Reges: constructio interrete. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Est, ut dicis, inquit; Id enim ille summum bonum eu)qumi/an et saepe a)qambi/an appellat, id est animum terrore liberum. An est aliquid, quod te sua sponte delectet?</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
<div class="col-md-6">
<h1>Bar</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus: Prorsus, inquit, assentior; Quid, quod res alia tota est? Maximus dolor, inquit, brevis est. Nihilo beatiorem esse Metellum quam Regulum. Honesta oratio, Socratica, Platonis etiam. Duo Reges: constructio interrete.</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I know this is similar to this question, but I think it's actually different.
var equal1 = $(".equal1").height();
var equal2 = $(".equal2").height();
if(equal1 < equal2 ){
$(".equal1").height($(".equal2").height());
} else {
$(".equal2").height($(".equal1").height());
}
Please, see this
Demo result
or
Demo with code.
Just with pure CSS you can solve it with flex.
You can add another class to your row class and then apply the styles on that class.
<div class="container">
<div class="row row-eq-height">
<div class="col-xs-6">
...
In the css add:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap; /*to enable responsiveness*/
}
.row-eq-height > [class*="col-"] {
display: flex;
flex-direction: column;
border: 1px solid green;
}
You can check a demo here.
Updated !
Try DEMO
Using JavaScript
$(".equal2").height($(".equal1").height());
Do Read http://www.ejeliot.com/blog/61