Posts

Showing posts with the label flexbox

flexbox columns and IE

flexbox columns and IE Everything works fine in Chrome and Firefox but guess what, I have a problem in IE! (IE11) In my responsive layout I want to menu to be horizontal in pc mode and vertical in tablet/mobile mode. It does just that, but in IE the menu items have no height. They all collapse to 0 height if inspected with the developer tool. I can't find why. Anyone would have an idea? I made a codepen for it: http://codepen.io/Reblutus/pen/qjacv Here is the code <style> header { background: cyan;} nav { background: bisque;} .main-a { background: tomato;} .main-b { background: lightblue;} footer { background: lightpink;} .headerContainer nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: column nowrap; flex-direction: column; } .headerContainer nav > a { padding: 5px 10px; text-align: center; background: #fcd113; border: #6eac2c solid 1px; border-width: 0 0 1px; -webk...
-
Read more

How to create an empty div flex? [on hold]

How to create an empty div flex? [on hold] I'm currently writing a website where I want a particular section to start 15% down the page and fill the remaining 85%. I want the top 15% of the page to be totally empty. The only way I can think of doing this is to create an empty div styled with flex: 0.15 . This seems really nasty but does what I want it to do. Is there a better approach for this that doesn't involve using an empty div? div flex: 0.15 Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question. Please provide a Minimal, Complete, and Verifiable example. Please look at guide how do I ask a good question? – Andrzej Ziółek Jun 30 at 14:38 ...
-
Read more

Flexbox div is hidden on a small screen

Flexbox div is hidden on a small screen I have the following code which uses Bootstrap 4. My CSS is basically a copy of Bootstrap Sign In Form Example. The main difference is that I have a video element in a div that provides border and 1:1 ratio. The issue is that on small displays (e.g. on mobile) the first div is not shown at all, and at least half of the second div with video is hidden too. You can resize your browser window to see it. How can I fix it? I have margin: auto but seems that it doesn't help at all. margin: auto :root { --input-padding-x: .75rem; --input-padding-y: .75rem; } html, body { height: 100%; } body { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; } .form-ordercode { width: 100%; max-width: 420px; padding: 15px; margin: auto; } .form-ordercode .form-control { position: relative; box-sizing: border-box; height: auto; pad...
-
Read more

Flexbox align div in center [duplicate]

Flexbox align div in center [duplicate] This question already has an answer here: I'm using flex and I want to align the div filho in the center of div pai , I try use justify-content: center , but don't work because there insn't space left, and I can't set a with to each div. div filho div pai justify-content: center .pai { display: block; background-color: #f3f5fd; margin: 0 15px 15px; } .filho { padding: 10px 50px; width: 100%; display: flex; justify-content: center; align-items: center; height: 100%; } .item1 { min-width: 210px; } .item2 { height: 100%; display: flex; align-items: center; flex: 2; } .item2 img { max-height: 100%; width: 100%; } .item3 { display: flex; align-content: center; } <html> <head> <title>teste</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="pai"> <div ...
-
Read more