Hellow I have a problem with my website.
I'm coding responsive layout and I have problem with portrait mode.
My site is here - www.szafortest.pl
You can check css and html code in webbrowser. If You want I can put code here.
My problem is that I have big white margin. Please refer to image below.
What I would like to do is to resize "textContent" class. I tried using viewport but always I can find device which will display this site badly.
Do You know any good solution for it?
As James Newton suggested in the comments, you could use flexbox to solve this problem. I have a library which allows me to position elements in rows and columns with flexbox. They are named flex-row and flex-column. The names should speak for itself. There is one more important class called autoflex. It allows me to fill the remaining space of a div or size divs evenly. This is a solution you could try:
HTML:
<body class="flex-column">
<div class="yourContent"></div>
<div class="autoflex"></div> <!--This will fill all whitespace -->
</body>
CSS:
.flex-column {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.flex-row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.autoflex {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
EDIT
These classes are only supporting standard and webkit browsers. To make this more compatible with other browsers, you should add -moz-flex for example to the properties.
Related
I have the following setup:
<div class="container">
<button id="print-button" title="print" type="button">🖨</button>
<label for="print-button">Print Me!</label>
</div>
I wanted to use flex-box to place the button above the label, aligning them to the right of the parent element of the div, making the button the same width as the label.
.container{
display: flex;
flex-direction: column;
align-items: flex-end;
}
button{
appearance: none;
font-size: 2rem;
border: none;
background-color: yellow;
}
label{
font-family: sans-serif;
}
Works, as expected, but the button logically has it's own (in this case) smaller width.
If I set the container width to fit content and the align-items to stretch I get what I want width-wise but the container by default stays left. I could work around that with floats or positions, but that's not what I'm looking for. I also do not want to ad semantically unnecessary markup. I can (and probably will) use a grid, I just 'felt' that somehow this should be easily achieved with flex, I just couldn't find a way.
Here is a codePen: https://codepen.io/mdrei/pen/QWmMMeO
to play with, if needs be.
Thank you for reading: I'd like to clarify: I'm not interested in other solutions to the problem, I have several in mind. I'm interested to find out if what I wanted is doable with flex-box.
(Lets see if a moderator once again thinks he/she has to censor me because I say thank you)
I think you will achieve it using display grid.
.container {
display: grid;
grid-template-columns: max-content;
}
Then just add float right if you want it to align to the right
Using only flex-box, you can add another div to achieve what you want:
(Unnecessary markup is added, I know, but maybe that could help you)
<div class="container">
<div class="another-container">
<button id="print-button" title="print" type="button">🖨</button>
<label for="print-button">Print Me!</label>
</div>
</div>
.another-container {
display: flex;
flex-direction: column;
}
Here is a codePen : https://codepen.io/Deirok/pen/MWVvrdG
Have a great day :)
I have the following HTML code (the number of divs within the .container can vary).
I want to give these a min width, but otherwise these should fill up the whole width of the screen. When the width of the screen is too small (for responsive designs) the divs should simply go on a new line.
It seems simple, but I've been banging my head with gird, flex and even float, but nothing seems to work. Anybody can help without using media queries?
<div class="container">
<div>pippo</div>
<div>pluto</div>
<div>paperino</div>
<div>topolino</div>
</div>
with flex-wrap: wrap; when there was no space for div, div wrap to the next line.
also i use justify-content: space-between; to fill up the whole width of the screen
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
<div class="container">
<div>pippo</div>
<div>pluto</div>
<div>paperino</div>
<div>topolino</div>
</div>
This question already has answers here:
Center buttons on wrap only
(2 answers)
Closed 1 year ago.
What I would like to do
Consider two elements in a container:
<div class="container">
<div>Thing 1</div>
<div>Other thing</div>
</div>
I would like the following criteria to be met:
In a wide context, the two elements should be at opposite ends of the container.
In a narrow context, such that the two elements won't fit in a single row, the second element should 'wrap' onto a new line.
In a context where the elements are on two rows, both elements should be centred.
In addition, I would like to avoid using media breakpoints, so that the layout will work irrespective of the widths of the elements and/or the container. The solution doesn't need to use flex-box (it's just easier to explain what I want in terms of flex-box).
My attempts
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
This works for the first two criteria, but not the third. I've experimented with different values of justify-content/flex-grow/flex-basis but have not been able to find a winning combination.
I've also thought about using grid but had equally little success.
Note
This is a very similar question (although, a more specific use-case since I only require 2 elements rather than a general solution.)
With justify-content: space-around you can achieve the 3rd criteria with elements present at opposite end in wide context
.container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
<div class="container">
<div>Thing 1</div>
<div>Other thing</div>
</div>
Else if you want them to present at extreme end in wide context then have to use #media , this depend on the width of text-div's which makes them wrap after a certain reduce in view port width .
Here will take 500px width where text will wrap for demo only
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#media only screen and (max-width: 500px) {
.container {
justify-content: center;
}
.textDiv {
width: 100%;
text-align:center
}
}
<div class="container">
<div class="textDiv">Thing 1</div>
<div class="textDiv">Other thing</div>
</div>
I have a flex container that displays two divs side by side on a normal screen.
[div1] [div2]
When they wrap on a smaller device this ends up as
[div1]
[div2]
What I want is for them to appear as
[div2]
[div1]
This is trivial if done with media queries, but I have a very dynamic layout which makes that unfeasible, and the whole reason I'm using flex box is to try to avoid tedious/unaintainable media queries.
Is there some magic combination of flex CSS properties that will give me the behaviour that I desire? I've played around quite a bit with no success, but feel this must be a relatively common CSS 'want', so hopefully someone here can answer this in seconds!
It turns out that this is rather simple. Just use flex-direction:row-reverse;
https://jsfiddle.net/gveukj1j/
HTML:
<div id="container">
<div id="div2">
Div 2
</div>
<div id="div1">
Div 1
</div>
</div>
CSS:
/* the relevant CSS */
#container{display:flex;flex-wrap:wrap;flex-direction:row-reverse}
#container>div{flex-basis:400px;flex-shrink:0}
/* CSS to make the demo clear */
#container>div{line-height:200px;height:200px;color:#fff;text-align:center}
#div1{background:blue}
#div2{background:red}
I had the exact same problem and was struggling with flex-direction controlling the order regardless of wrapping or not. Turns out flex-wrap has a wrap-reverse option that does exactly what you want in this case: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
you can look at flex-direction and order:
body {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
div {
flex: 1;
/* give them a size */
min-width: 400px;
border: solid;
padding: 1em;
}
.a {
order: 1
}
.b {
order: 0
}
<div class="a">a</div>
<div class="b">b</div>
codepen to play with : http://codepen.io/anon/pen/RoeOrv
UPDATE - Pretty sure I figured this out. The code is somewhat long, but I threw a page up here so you can view the source: http://www.sorryhumans.com/knockout-header
The concept was based on: http://algemeenbekend.nl/misc/challenge_gerben_v2.html and then adapted for my needs.
The header is responsive and knocked out. (Please ignore the bad, 1 minute responsive bg image implementation!). This implementation also does not use any CSS3, so I would imagine that there wouldn't be many issues with compatibility.
The only issue I find is that when the browser width is an odd number (e.g. 1393px) in Chrome there is a 1px gap between the right hand fluid column and the main center column. I don't see this issue in the latest version of Firefox, Internet Explorer, or when the width is an even number (e.g. 1394px in Chrome). Any ideas?
Original Question:
I'm attempting to code a header that I designed, but am unable to figure out how to get the effect I'm looking for. Please look at the attached image (No, this is not actually what I'm working on :) just an example!)
The photo is a full-width responsive photo. The header is full-width, but its contents are on a responsive grid that does not exceed some arbitrary size (shown by the black lines), but can scale down. I can accomplish all of this, but what I am having trouble figuring out is how to make the make the header bar be transparent where the logo would be. In other words, rather than having the logo be on top of the bar, I would like to "knock it out" of the header.
Is this even possible?
There's no inherent support for knockout effects, so you'll have to have the text as part of an image.
The easiest way to do this would be to have the background behind the knockout effect be the solid part of the image. You can create a .png with a solid background and transparency where you want the knockout effect, and use css opacity to make the entire header partially transparent. You will need to set up the header with multiple sections so that the sections that are not images (i.e. outside the black bars) have a background color, while the sections with images do not.
Very roughly:
<div id="outerHeaderWithOpacity">
<div class="hasBackground">Left side, will stretch</div>
<div class="noBackground">Image(s) go here</div>
<div class="hasBackground">As many sets as you need</div>
<div class="noBackground">Image(s) go here</div>
<div class="hasBackground">Right side, will stretch</div>
</div>
http://jsfiddle.net/GZ8Xv/
not the prettiest solution but using the experimental css3 flexbox: (with display: table fallback)
<div class="wrapper">
<div class="left"><br /></div>
<div class="middle"><br /></div>
<div class="right"><br /></div>
</div>
.left, .right
{
height:100%;
border: 1px solid black;
display:table-cell;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -o-flexbox;
-webkit-flex: 1;
}
.middle
{
display: table-cell;
display: -webkit-flexbox;
width: 500px;
height:100%;
border: 1px solid blue
}
.wrapper
{
display: table;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -o-flexbox;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-o-box-orient: horizontal;
width: 100%;
height: 100px;
}
PLEASE NOTE: the flexbox w3c spec is still in flux and could change a third time. I only tested this in IE9 (both IE9 and IE8 modes. Does not work in IE7 mode) and Chrome 20 and 22
A few minor changes: http://jsfiddle.net/GZ8Xv/2/ and you have your 5 div layout without javascript.