I am trying to get an element to align to the right. I've used flexbox as I've found it easiest to align the text and any icons perfectly. The code snippet below is an example of what I am doing. The code works perfectly in Firefox and Chrome, but the justify-content is not working in IE. I already have "-ms-flex-pack" but it is not doing anything. The content is left-aligned in IE instead of being right-aligned.
.align-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
text-align:right;
}
.bold {
font-weight: 600;
}
<div class = "align-right">
Purchase Date:
<span class = "bold"> 09/10/2018</span>
</div>
You need to add flex-direction: column; to the parent element in order to justify-content in IE11
.align-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
text-align:right;
flex-direction: column; }
The following worked for me across different browsers.
.text-vcenter-right {
height: 200px;
width: 100%;
background-color: grey;
color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: right;
text-align:right;
}
<div class="text-vcenter-right">Text vertically centered and justified towards right</div>
Related
I have a parent CSS property which seems cant be overwritten by !important. what other options to I have? I'm trying to get rid of the margin-left: 30 property.
Div code
.difference-ul {
margin-left: 0 !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
The parent CSS property below which is applying to the above div class
.Rte ul, .Rte ol {
margin-left: 30px;
padding-left: 0;
list-style-position: outside;
}
Try using your code like this:
.Rte ul, .Rte ol .difference-ul {
margin-left: 0 !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
I would like for my header to change when viewed on mobile. On the big screen is shows the logo with the text beside it. On mobile I would like for the text to go below the logo and maybe even just 1 line with a bullet between. Right now when I view on mobile, the logo and text resize, but the text gets too big and falls off the screen.
Here is a link to the site:
jeepscycleclub.x10host.com
Here is my css for the #pageheader:
#pageheader {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
position: relative;
text-align: center;
overflow: hidden;
background-color: #2f2f37;
max-height: 15vh;
}
#pageheader img {
max-height:15vmax;
}
and my html:
<div id="pageheader">
<img src="images/pageheader.gif">
<header>
<h2 style="font-size: 3vh;">Club Info: 316-755-0909</h2>
<h2 style="font-size: 3vh;">FM 100.9 for Race PA System</h2>
</header>
</div>
This is just my test site so I can get everything done before going live with it.
Thank you in advance.
Add flex-wrap: wrap; for this. And you have to change the width/max-width, otherwise there won't be space for the text when it goes under the logo.
#pageheader {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
position: relative;
text-align: center;
overflow: hidden;
background-color: #2f2f37;
flex-wrap: wrap;
}
#pageheader img {
max-height:15vmax;
}
<div id="pageheader">
<img src="http://placehold.it/150x80/a0f">
<header>
<h2 style="font-size: 3vh;">Club Info: 316-755-0909</h2>
<h2 style="font-size: 3vh;">FM 100.9 for Race PA System</h2>
</header>
</div>
So i have this demo :https://fiddle.jshell.net/ghyy6ntf/
Problem is that with flex i centered text and image but i cant put title and subtitle one bellow another. So i need to have image on left side and title and description verticaly centered in table td but one bellow another.
.product_box{
float: left;
width: 100%;
vertical-align: middle;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: flex-start;
-ms-flex-pack: center;
justify-content: flex-start;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
}
Right now I have this code:
display: flex;
justify-content: center;
align-items: center;
The element centers on Chrome and Firefox, but not on IE10. I didn't check it yet on Safari and others browsers, but I want it to support them too. What should I add to this code?
You will need relevant vendor prefixes for IE10, Safari 8 and below, example:
.my-class-name {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
Flexbox support tables: caniuse.com/#feat=flexbox
Autoprefixer: autoprefixer.github.io
Prefixfree: leaverou.github.io/prefixfree
I'm having a problem with a site redesign on IE 11 - the portfolio section slowly shrinks, aligns left, and eventually disappears when the window is less than 768px wide, and when clicking on a portfolio item, the content enlarges way beyond the viewport. There is no such issue with Chrome or Firefox.
This is the first time I have used flexbox, so I'm guessing that is the problem.
The site:
test.nicklemmon.com
Thanks!
I was able to resolve the issue where the content disappears entirely - it had something to do with usingn max-width on a div (though this didn't effect the other browsers)
Isolating where I think the left-aligning problem lies...I'm using SASS + Bourbon:
.work-container .row {
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-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
max-width: 100%;
margin: 0 auto;
}
#media (max-width: 768px) {
.work-container .row {
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-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
-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;
max-width: 100% !important;
}
}
I'm also temporarly allowing overflow to see if anyone else can see where the issue lies. Looking at the code again, some of this is redundant.
OK, looking at it again I see where the problem lies, but I'm still not sure how to resolve it:
.work-belt {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 200%;
}
If I take out display: flex, then the shrinking/left-aligning behavior goes away, but then the layout breaks on Chrome and Firefox.
Anyone have any thoughts?
Alright, well nevermind then - I resolved the issue myself:
For some reason IE required the following properties on the container (.work-belt) whereas Chrome and Firefox didn't:
.work-belt {
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-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;
height: 100%;
width: 200%;
}
I would be interested to hear why there is a discrepancy there, but at least it's resolved.