I have a layout that is utilizing flex to hold images of varying sizes together.
However, when I resize the browser in Firefox the images don't scale evenly.
I have read a lot of posts about what causes the issue, but I am having a difficult time finding the solution for my particular scenario in the sea of information. Anyone have any ideas?
Image of where the breaks are happening in firefox.
*{box-sizing: border-box;}
.container{
max-width: 1360px;
margin: 0 auto;
}
img{
border:2px solid white;
}
.flex-row {
justify-content: flex-start;
align-items: flex-start;
width: 100%;
display: flex;
flex-direction: row;
}
.flex-column{
align-items: flex-start;
height: 100%;
max-width: 1360px;
display: flex;
flex-direction: column;
}
#media (max-width: 600px) {
.flex-column, .flex-row{
display: block;
}
img{
width: 100%;
}
}
<div class="container">
<div class="flex-row row">
<div class="flex-column">
<div><img src="https://placehold.it/548x227"></div>
<div><img src="https://placehold.it/548x459"></div>
</div>
<div class="flex-column">
<div class="flex-row">
<div><img src="https://placehold.it/812x459"></div>
</div>
<div class="flex-row bug">
<div><img src="https://placehold.it/406x227"></div>
<div><img src="https://placehold.it/406x227"></div>
</div>
</div>
</div>
<div class="flex-row row">
<div><img src="https://placehold.it/812x459"></div>
<div><img src="https://placehold.it/548x459"></div>
</div>
</div>
Here is a link to the code: https://codepen.io/enigmas2/pen/zZYPJj
i'm pretty sure firefox's flex-box is bugged out. columns don't seem to work properly.
despite that, you can kind of achieve the same thing using the float property. it took more code than i expected, however.
a potential issue is that a lot of elements have fixed heights. as i mentioned before, too, another issue with doing it this way is that images will be cropped. (notice the ikea and cheerio logos. it's because their widths far outweighs their heights).
here is a codepen.
body {
margin: 0;
}
#container {
width: 75vw;
height: 1145px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#row-one {
width: 75vw;
display: block;
}
#left-column {
width: 40.294117647058823529411764705882%;
height: 686px;
float: left;
display: flex;
flex-direction: column;
}
#top-left-image {
width: 100%;
height: 227px;
background: url('https://i.ytimg.com/vi/cNGG2SswaKo/maxresdefault.jpg') center/cover;
}
#middle-left-image {
width: 100%;
height: 459px;
background: url('https://s-media-cache-ak0.pinimg.com/originals/8b/da/34/8bda3460f271a77a54b4cfc08583b1fc.jpg') center/cover;
}
#right-column {
width: 59.705882352941176470588235294118%;
height: 686px;
float: right;
display: flex;
flex-direction: column;
}
#top-right-image {
width: 100%;
height: 459px;
background: url('http://cdn.designcrowd.com.s3.amazonaws.com/blog/Famous-Purple-Logos/1-famous-purple-logos.png') center/cover;
}
#right-column-row {
width: 100%;
}
#middle-middle-image {
width: 50%;
height: 227px;
float: left;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Ikea_logo.svg/1024px-Ikea_logo.svg.png') center/cover;
}
#middle-right-image {
width: 50%;
height: 227px;
float: right;
background: url('https://s-media-cache-ak0.pinimg.com/originals/f9/bd/c8/f9bdc85df698cd33535f3517659b9c03.jpg') center/cover;
}
#row-two {
width: 75vw;
height: 459px;
display: block;
}
#bottom-left-image {
width: 59.705882352941176470588235294118%;
height: 459px;
float: left;
background: url('http://logok.org/wp-content/uploads/2014/11/Sprite-logo-2014.png') center/cover;
}
#bottom-right-image {
width: 40.294117647058823529411764705882%;
height: 459px;
float: right;
background: url('https://s-media-cache-ak0.pinimg.com/736x/58/6f/a9/586fa96b662feb46fd10d179a3f5308d.jpg') center/cover;
}
#media screen and (max-width: 768px) {
#left-column, #right-column, #right-column-row, #bottom-left-image, #bottom-right-image {
width: 100%;
float: none;
}
.some-images {
width: 100%;
}
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="a.css">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<div id="container">
<div id="row-one">
<div id="left-column">
<div class="not-all-images" id="top-left-image"></div>
<div class="not-all-images" id="middle-left-image"></div>
</div>
<div id="right-column">
<div class="not-all-images" id="top-right-image"></div>
<div id="right-column-row">
<div id="middle-middle-image"></div>
<div id="middle-right-image"></div>
</div>
</div>
<div>
<div id="row-two">
<div class="not-all-images" id="bottom-left-image"></div>
<div class="not-all-images" id="bottom-right-image"></div>
</div>
</div>
</body>
</html>
Related
My goal: A responsive navbar where the logo is always in the middle and an element
is always on the left. Depending on the context (page dependent), buttons can be
displayed in the right area or not.
My approach: I use a flexbox for the navbar. I have three divs in the flexbox. I have given all divs a fixed width. The middle box is also a flexbox. The div with a logo is located there. I position the logo on the right edge of the middle flexbox. The div with the logo has a fixed width (80px).
The problem: The approach works but I don't find this way very nice. Because the widths are dependent on each other. If you would change the logo and it would be wider or narrower then you would have to adjust the relative width of the middle and right box. The second problem is if the device smaller as 900px then this solution dont work.
Question: What other possibilities are there and what possibilities would resolve this "width" dependency?
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
width:20%;
background: green;
}
.header-middle {
width:34%;
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
width:46%;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
You can use flex-grow: 1 on the left and right elements, the middle element will be in center naturally. In this case, you don't need to set widths on elements.
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
flex-grow: 1;
background: green;
}
.header-middle {
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
flex-grow: 1;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
Since you're looking for different possibilities i'll suggest you to take the approch used by Tepken Vannkorn :
Centering brand logo in Bootstrap Navbar
Based on your comments, I would suggest the following code as a simple solution.
I have added a max-width value to your .logo CSS class and I have also moved your inline CSS from the front-end code, and created a .controller CSS class for it.
#app {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
header {
height: 80px;
display: flex;
justify-content: space-between;
}
.header-left {
width: 20%;
background: green;
}
.header-middle {
width: 34%;
background: gray;
display: flex;
justify-content: flex-end;
}
.header-right {
width: 46%;
background: green;
}
.logo {
background-color: red;
width: 80px;
height: 80px;
text-align: center;
font-size: 70px;
max-width: 80px;
}
.controller {
width: 50%;
background: black;
color: white;
text-align: center;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div class="controller">Controller Div 50%</div>
</div>
</div>
A solution would be to use a mix of flex and position: absolute. Then you need only the left and the right container. the logo you can center with position left: left: calc(50% - calc(80px / 2));. The 80px is the width from your logo.
* {
margin: 0;
padding: 0;
}
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
.header {
display: flex;
justify-content: space-between;
height: 80px;
background: yellow;
position: relative;
}
.header-left {
background-color: green;
width: 20%
}
.header-right {
background-color: green;
width: 44%;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;
font-size:70px;
position: absolute;
left: calc(50% - calc(80px / 2));
}
<div id="app">
<div class="header">
<div class="header-left">left</div>
<div class="logo">X</div>
<div class="header-right">right</div>
</div>
<div style="width:50%; background: black;">Controller Div 50%</div>
</div>
I want the divs inside content_container to be stacked vertically below each other and not overlap. Please help.
My HTML code:
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
My CSS code:
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav{
position: fixed;
width: 100%;
}
#content{
width: 100%;
}
[1]: https://i.stack.imgur.com/28184.jpg
HTML
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
CSS
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
display: flex;
flex-direction: column;
}
#sub_nav{
position: -webkit-sticky;
position: sticky;
top:0;
width: 100%;
}
#content{
width: 100%;
}
Hope this helps !!
Also, refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for full flexbox reference.
Your problem is the "position: fixed;" for the #sub_nav div.
Remove that and they should stack one on top of the other.
It will be much easily to use flex boxes:
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: red;
width: 200px;
}
#content {
flex: 1;
background: blue;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
Try This...
#content_container{
width: 100%;
height: 100%;
display: flex;
}
#sub_nav{
width: 50%;
height: 200px;
background-color: red;
}
#content{
width: 50%;
background-color: blue;
height: 200px;
}
<body>
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
<body>
Much easier to do with flex boxes.
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: white;
width: 100px;
}
#content {
flex: 1;
background: green;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
position: fixed takes the element out of the flow and make it fixed to the viewport. which leads the next element to overlap.
so you need to let fixed element sub_nav show on top. and content would show by giving it padding on top or move the top start point with relative
element{
position: relative;
top: 20px;
}
Example
#content_container {
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav {
background-color: yellow;
position: fixed;
width: 100%;
z-index: 1;
}
#content {
background-color: cyan;
width: 100%;
padding-top: 30px;
height: 100px;
}
<div id=content_container>
<div id=sub_nav>sub_nav
</div>
<div id=content>content
</div>
</div>
I have tried using overflow: hidden; for each element but it does not seem to be doing anything
The html looks like this, the display is to have the 2 divs side by side (stacks ontop for smaller screens). The left side div will also be on top of the right side div. I have a screen shot and fiddle too.
.sec {
background-color: red;
min-height: 100vh;
overflow: hidden;
}
.sec2 {
background-color: blue;
min-height: 100vh;
overflow: hidden;
}
.img1 {
max-width: 100%;
position: absolute;
}
.img1 {
z-index: 1;
}
.leftCol {
z-index: 10;
width: 50%;
}
.info-row {
display: flex;
flex-direction: row;
margin-left: 10vw;
margin-right: 200px;
}
.rightCol {
width: 50%;
}
<section class="sec">
<div class="info-row">
<div class="leftCol info-column">
<h1>haheaheh</h1>
<p>teataetetat</p>
</div>
<div class='rightCol info-column'>
<img class="img1" src='https://kasonbloom.files.wordpress.com/2017/08/lamb-2.jpg' />
</div>
</div>
</section>
<section class="sec2">
<div class="info-row">
<div class="leftCol info-column">
<h1>asdfasdfasdf</h1>
<p>basfbasdfbasdfba</p>
</div>
<div class='rightCol info-column'>
</div>
</div>
</section>
https://jsfiddle.net/gtrnrd9r/2/ keep result view at a point where the image breaks through the section
Add position:relative; to your outer section .sec and it will work fine.
.sec {
background-color: red;
min-height: 100vh;
overflow: hidden;
position:relative;
}
.sec2 {
background-color: blue;
min-height: 100vh;
overflow: hidden;
}
.img1 {
max-width: 100%;
position: absolute;
}
.img1 {
z-index: 1;
}
.leftCol {
z-index: 10;
width: 50%;
}
.info-row {
display: flex;
flex-direction: row;
margin-left: 10vw;
margin-right: 200px;
}
.rightCol {
width: 50%;
}
<section class="sec">
<div class="info-row">
<div class="leftCol info-column">
<h1>haheaheh</h1>
<p>teataetetat</p>
</div>
<div class='rightCol info-column'>
<img class="img1" src='https://kasonbloom.files.wordpress.com/2017/08/lamb-2.jpg' />
</div>
</div>
</section>
<section class="sec2">
<div class="info-row">
<div class="leftCol info-column">
<h1>asdfasdfasdf</h1>
<p>basfbasdfbasdfba</p>
</div>
<div class='rightCol info-column'>
</div>
</div>
</section>
.rightCol needs his own width and height if i'm not mistaken. overflow doesn't work with the parent element.
In our ecommerce project all photos are squares. So some products have a lot of whitespace on top and bottom. I wan't to 'cut' that space without editing the photos (thousands). I almost achieved my goal. But parent DIV stretches to basic 100% of the IMG.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
}
.landscape {
object-fit: cover;
width: 100%;
height: 60%;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
You could remove height: 60% from your image (which doesn't affect your image, but the .media's div height, since that div has no height set to it.). Now the container div resizes depending on the image's size (or the content of the other '.purchase' div in the flex-container, if that has more height).
Hope it helps, since I am really just guessing what you are trying to do here.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
}
.landscape {
object-fit: cover;
width: 100%;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
Try removing the height:60%; from .landscape and instead set a fixed height for both .media and .landscape in pixels.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
height: 600px;
width: 100%;
}
.landscape {
object-fit: cover;
width: 100%;
height: 600px;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
Ok,I've found a solution by using the Javascript. Hope I will find some day pure CSS/HTML solution.
window.onload = resizer;
window.onresize = resizer;
function resizer() {
var div = document.getElementById('media');
div.style.height = (div.offsetWidth / 1.5) + 'px';
};
div {
box-sizing: border-box;
}
.container {
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
#media {
flex: 1;
overflow: hidden;
margin-right: 20px;
background-color: grey;
}
#media > img {
object-fit: cover;
width: 100%;
height: 100%;
}
.purchase {
width: 360px;
background-color: grey;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello world!</title>
</head>
<body>
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div id="media">
<img src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
</body>
</html>
I'm currently strugging to make a node-webkit app fit the height of the current window. Below is an image of what I'm trying to achieve.
Desired result :
HTML :
<body>
<div class="header">
THIS IS A HEADER WITH LINKS AND THINGS
</div>
<div class="content">
<div class="sidebar">
SIDE BAR WITH MORE LINKS AND THINGS
</div>
<div class="mainarea">
<div class="chatbox">
SOME SORT OF BOX WITH THINGS IN
</div>
<form>
<input name="q" placeholder="type something here"/>
<input type="submit" value="Send"/>
</form>
</div>
</div>
</body>
CSS :
body {
height: 100%;
}
.header {
height: 80px;
background-color: red;
}
.content {
width: 100%;
height: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
background-color: yellow;
}
.chatbox {
width: 100%;
border-style: solid;
border-width: 1px;
}
.mainarea {
float: right;
width: 80% !important;
background-color: green;
height: 100%;
}
Demo :
JSFiddle
Instead of float:right/left for .mainarea/.sidebar use display:table-cell. Also :
body, html { height: 100%; margin:0; }
.content { width: 100%; height: calc(100% - 80px); display:table; }
JSFiddle
You could use flexbox too.
http://jsfiddle.net/tetm7/
HTML
<div class="main">
<div class="header">HEADER</div>
<div class="content">
<div class="sidebar">SIDEBAR</div>
<div class="box">TEXT BOX</div>
</div>
</div>
CSS
html, body, .main {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 100px;
background-color: red;
}
.content {
display:flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
width: 100%;
height: 100%;
background-color: yellow;
}
.sidebar {
background-color: orange;
width: 200px;
}
.box {
background-color: green;
width: 300px;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}