white line shows when use safari browse this page:
When use safari browse this page, the white line shows, and i try to use safari's flex like this to fix this but failed.
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
the lightland.design is fully written with css and html, hope someone can save me out of this probelm. thankyou in advanced
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;
}
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.
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.