I'm trying to create a two-column layout for a site and I've got everything working fine in Chrome, FireFox and IE10/11, however in Safari, the news pods are columnised, rather than sitting two per line, as they should.
Attached are two images, the top showing what I'm trying to achieve (and what I'm seeing on Chrome/FireFox/IE10 and 11) and the bottom shows what's happening in Safari.
The CSS I'm using to achieve this is as follows:
.news__listing {
float: left;
display: block;
margin-right: 3.84615%;
width: 65.38462%;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-moz-box-align: start;
box-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-ms-flex-align: start; }
.news__listing:last-child {
margin-right: 0; }
.news__listing:nth-child(2n) {
margin-right: 0; }
.news__listing:nth-child(2n+1) {
clear: left; }
.news__listing .c-article {
max-width: 50%;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
flex-shrink: 0;
-ms-flex-negative: 0; }
Am I doing anything obviously wrong?
OK, so after much experimentation I seem to have found the solution - seems that just setting a max-width doesn't cut it, so I've had to explicitly set width: 50%; to get everything aligning properly.
Related
I spent a load of times to resolve a css problem which is only on iphones without success.
To use the web inspector code and see what happens on the iphone safari, I must have a mac and I don´t have this computer so I´m coding blindly.
My CSS works for most of the screens and androids, I go this result (that I expect)
But on iphone 8, I got this :
For some reasons, photos are bigger, it´s not organized with two columns and .pr-section-inner-block with orange border does not match with its contents and cut the gallery. Maybe its behaviour is to get the same height than the previous .pr-section-inner-block because of flex.
CSS
pr-section-inner{
padding: 75px 0;
display: flex;
flex: 1;
}
.pr-section-inner .pr-section-inner-block{
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
}
#media screen and (max-width: 767px) {
.pr-section-inner{
border: 2px solid yellow;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex: 1;
}
.pr-section-inner .pr-section-inner-block{
border: 2px solid orange;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex: 1;
}
.pr-section-inner .pr-section-inner-block .pr-section-inner-block-content{
border: 2px solid red;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex: 1;
}
}
Someone has got an idea to resolve this ?
I fixed the problem.
It seems that Safari for iphones interprates display: flex; even if the behaviour is wrong. Normally it should only interprate display: -webkit-box; so I switched these 2 rules.
.h4a-pr-section-inner{
border: 2px solid yellow;
display: -ms-flexbox;
display: flex;
display: -webkit-box; /* After display :flex; */
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex: 1;
}
I have some text with this css:
word-break: break-word;
What it is supposed to do is to break the text into lines when I reduce the dimensions of the window. It is responsive and works fine in Chrome but has no effect in Internet Explorer 11. I've searched a lot about this but nothing solved my problem.
If it helps, this is the css class for the container of the text:
.my-class {
width: 170px;
padding-bottom: 100px;
padding-top: 100px;
padding-right: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
text-align: end;
}
Any suggestions?
For flexbox to work in IE, you can change your code to:
.my-class {
width: 170px;
padding-bottom: 100px;
padding-top: 100px;
padding-right: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
text-align: end;
display: -moz-flex;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
-o-justify-content: space-around;
-ms-flex-pack: space-around;
box-orient: vertical;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-flow: column wrap;
}
I have some nested flexbox layouts which work perfectly in Chrome & Safari 11+, but behaves incorrectly in Safari 10.1.2
In Chrome - it looks as expected:
Chrome behaviour
However in Safari 10.1.2:
Safari behaviour
Could someone help me figure out how to fix? Thanks!
Here's my (slightly simplified) HTML:
<div class="content-canvas">
<div class="horizontal-section" id="blog">
<h1>Blog</h1>
<div id="divRss">
<ul class="feedEkList">
<li>
<div class="itemTitle"><a href="#</a></div>
<div class="itemDate">10/16/2017</div>
<div class="itemContent">Some text</div>
</li>
<li>
As above
</li>
</ul>
</div>
Read more
</div>
<div class="horizontal-section" id="upcoming">
...
</div>
</div>
And my CSS:
.content-canvas {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-grow: 2;
-moz-flex-grow: 2;
-ms-flex-grow: 2;
-o-flex-grow: 2;
flex-grow: 2;
}
#blog,
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
#divRss,
{
padding: 10px;
height: 0;
-webkit-flex-grow: 2;
-moz-flex-grow: 2;
-ms-flex-grow: 2;
-o-flex-grow: 2;
flex-grow: 2;
}
.feedEkList,
{
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
-o-justify-content: space-around;
justify-content: space-around;
}
.feedEkList li,
{
height: 0;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-grow: 1;
-o-flex-grow: 1;
flex-grow: 1;
}
I personally had a problem on Safari when the content of my upper flexbox was more than 100% of its height, in which case the nested flexbox had its height shrunk to 1px.
I fixed it by setting flexbox-shrink: 0 on nested flexbox.
What function do vendor prefixes serve in the code below? Do they call capabilities from other sites?
display: -webkit-box;
display: -ms-flexbox;
display: flex; /* works with row or column */
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
Here is the link to my project.
I want both of them to be "centered" so to speak. But yes, I know they can both take up 1 position. So I think if there is a way to draw a (invisible) horizontal line that is vertically centered. Then, I can just place one flex item right on top of this line, and the other right below it.
But I think there is a better way to do this that can be used to centered more than 2 flex items.
body{
background:#4A6556;
}
body>div>hello,hey{
background: #CCC;
border-radius: 7px;
margin: 5px;
padding: 20px;
}
body>div{
display: flex;
flex: row wrap;
flex-direction: column;
}
body>div>hey{
order:2;
font-family: 'Lato', sans-serif;
color:#212121;
}
body>div>hello{
order:1;
font-family: 'Kumar One', cursive;
color: #938653;
}
hello,
hey{
text-align: center;
}
<link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One|Lato" rel="stylesheet">
<body>
<div>
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
</div>
</body>
It's not entirely clear from your question if you want the two items displayed side-by-side or one-on-top-of-the-other.
A. side by side
.va-twins {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.va-twins > * {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body {
margin: 0; padding: 0; // SO reset, you don't need this.
}
<div class="va-twins">
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
</div>
If you need it, here's the fully prefixed code (for close to full browser compatibility 97.38% at the time of this posting)
.va-twins {
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.va-twins > * {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<div class="va-twins">
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
</div>
B. one on top of the other
.va-twins {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.va-twins > * {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body {
margin: 0; padding: 0; // SO reset, you don't need this.
}
<div class="va-twins">
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
</div>
Fully prefixed:
.va-twins {
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-moz-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.va-twins > * {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<div class="va-twins">
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
</div>
You could use #media queries to switch between A. and B. on different screen sizes.