I am using CSS display: flex; to display them a certain way. In Chrome it looks perfect, like beautiful, but in IE the images go outside the element I have them in.
https://jsfiddle.net/m42k7Lk5/8/
.award-logos {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center
}
.award-logos .wrapper {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px 17px;
margin: 5px 0;
text-align: center;
border-right: 1px dotted #000
}
.wrapper img {
max-height: 150px
}
<div class="col-md-12 award-logos">
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
</div>
</div>
Can anyone help?
Related
I need help in writing a css fix for aligning the logo and navbar in desktop and mobile responsive modes. No options available in customize menu. Thanks in advance.
My Site
Theme Used
Problem SS1
Problem SS2
Use can use Display flex CSS. Example your website:
<div id="header-text-nav-wrap">
<div id="header-left-section">
<!-- your logo here -->
</div>
<div id="header-right-section">
<!-- your menu -->
<!-- your searh and other -->
</div>
</div>
<style>
#header-text-nav-wrap{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#header-logo-image img{
max-height: 60px;
width: auto;
margin: 0 auto;
text-align: center
}
#header-right-section{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.main-navigation,
.header-action{
padding-top: 0;
}
#media (max-width: 768px) {
.better-responsive-menu #header-text-nav-wrap{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.better-responsive-menu #header-logo-image {
float: none;
margin-bottom: 0;
margin-right: 0;
text-align: center;
}
.better-responsive-menu #header-right-section {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
#header-right-section .header-action{
min-width: 200px;
padding-right: 15px;
}
}
</style>
I have flexbox container with items. They are both horizontally and vertically aligned by center. This is normally rendered on a live website. However I need to align font awesome icons with text in such way:
1). All icons are aligned by the left corner
2). The gap which goes after icons and before text must have the same length.
Here is a CodePen with a draft
So it's shown that icons are not aligned properly.
Code:
.contact-container {
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
.contact-container .copy {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
}
.contact-container .fa {
font-size: 40px;
-ms-flex-negative: 0;
flex-shrink: 0;
padding-left:20px;
}
.contact-container .item > *{color: #9f6a4a;}
.contact-container .item {
-webkit-box-flex: 0;
flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 47%;
background:#fff;
color:#fff;
}
.contact-container .item{
/*height: calc(720px/4);*/
-ms-flex-item-align: center;
align-self: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
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;
/*min-height: 100%;*/
min-width: 50%;
}
.contact-container h2{font-size:1.1em;font-weight:500;}
.contact-container h3 {padding-left: 10px;}
By definition, you can't left-justify objects that are centered. You would have to set the parent container to left align the icon/text, then give a left margin/width to allow for them to match up - as each individual container is again in another container.
EDIT: A rough example, here:
.contact-container {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.item {
width: 50%;
}
.item > * {
color: #9f6a4a;
}
.copy {
display: flex;
flex-direction: row;
align-items: center;
width: 70%;
margin: auto;
}
h3 {
margin: 0 .5em;
}
i.fa {
font-size: 40px;
padding-left:20px;
}
/* IGNORE THIS - for illustrative purpose only */
.item:nth-child(1), .item:nth-child(4) {
background-color: #DFD;
}
.item:nth-child(2), .item:nth-child(3) {
background-color: #DDF;
}
<script src="https://use.fontawesome.com/97dc0a8baa.js"></script>
<div class="contact-container">
<div class="item">
<div class="box">
<div class="inner">
<div class="copy"> <i class="fa fa-mobile-phone"></i>
<h3 class="sppb-addon-title sppb-feature-box-title sppb-media-heading">+1 123 45 678 99</h3></div>
</div>
</div>
</div>
<div class="item">
<div class="box">
<div class="inner">
<div class="copy"> <i class="fa fa-envelope-o"></i>
<h3 class="sppb-addon-title sppb-feature-box-title sppb-media-heading"> <span>info#info.com</span></h3></div>
</div>
</div>
</div>
<div class="item">
<div class="box">
<div class="inner">
<div class="copy"> <i class="fa fa-map-marker"></i>
<h3 class="sppb-addon-title sppb-feature-box-title sppb-media-heading">City, Street 22</h3></div>
</div>
</div>
</div>
<div class="item">
<div class="box">
<div class="inner">
<div class="copy"> <i class="fa fa-calendar"></i>
<h3 class="sppb-addon-title sppb-feature-box-title sppb-media-heading">I-V 09:00-17:00<br> VI 09:00-14:00<br>VII closed</h3></div>
</div>
</div>
</div>
</div>
I am using flex for making a searchbar/input element stay centered and change width as the screen size changes.
This is my html:
<div class="flex-container">
<div class="flex-row">
<h1 class="brandname">Hello</h1>
</div>
<div class="flex-row">
<form>
<!-- <div class="search centered"> -->
<div class="search">
<div class="input-container">
<input type="text" name="query" class="searchbar" />
<button type="submit" class="search-button">Search</button>
</div>
</div>
</form>
</div>
</div>
and this is my css:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.flex-container{
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
form{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
.search{
display: flex;
display: -webkit-flex;
flex: 0 1 455px;
-webkit-flex: 0 1 455px;
}
.input-container{
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.searchbar{
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 100%;
}
.brandname {
position: relative;
font-size: 500%;
font-family: 'Lato', sans-serif;
color: #1f0e3e;
text-align: center;
margin-bottom: 30px;
margin-top: 5%;
}
body {
margin: 10px;
}
.input-container{
/*float: left;*/
/*display: block;*/
flex: 1;
-webkit-flex: 1;
outline-style: solid;
outline-color: #e3e3e3;
outline-width: 1px;
}
.searchbar{
margin-left: 5px;
}
.search button {
background-color: rgba(152,111,165,0.38);
background-repeat:no-repeat;
border: none;
cursor:pointer;
border-radius: 0px;
/*overflow: hidden;*/
outline-width: 1px;
outline-style: solid;
outline-color: #e3e3e3;
color: white;
}
.search input{
outline-width: 0px;
outline-style: none;
border-width: 0px;
}
and it works in chrome, ie edge and in this fiddle, but not in safari.
In Safari the searchbar goes above the .brandname element and to the right of it and takes a width of 150px.
any ideas on how to make this work in safari?
One thing that is not working is the the first flex row width of 100% is not working. In safari it is making the two felx-row elements be right next to each other and both of them together are taking 100% of the width.
I changed .flex-row css rules to:
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 0 1 100%;
}
and changed the flex-row first child css rules to:
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 auto;
}
and then it works.
I thought about doing this after reading that flex-wrap is buggy in safari from this SO question which suggests that setting flex-wrap in safari is buggy
Always use the non-prefixed setting last in your CSS rules. In your first rule that would be:
.flex-container{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
similar for all other rules.
I'm struggling to get word-wrap: break-word; to work on Nokia Lumia 930 (and probably other Windows phones). Any ideas? The text just floats over to the next tab.
It seems to be working ok in iOS and Android.
body {
background: lightblue;
}
.container {
width: 320px;
margin: 20px auto;
border: 1px solid #ebebeb;
background: white;
}
.tabs {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.tab {
width: 25%;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
border-right: 1px solid #ebebeb;
}
.tab:last-child {
border-right: none;
}
.label {
display: block;
margin: auto 0;
text-align: center;
word-wrap: break-word;
}
<div class="container">
<div class="tabs">
<div class="tab">
<span class="label">xxxxxx xxx xxxxxxxxxx</span>
</div>
<div class="tab">
<span class="label">xxxxxx xx xxxxx</span>
</div>
<div class="tab">
<span class="label">xxxx xxxxxx</span>
</div>
<div class="tab">
<span class="label">xxxxxx xx</span>
</div>
</div>
</div>
Adding align-self: stretch to .label solves it.
.label{
align-self: stretch
}
I have started on this fiddle using CSS:
.cont {
border:1px solid #F36F25;
}
.ticketnumber {
display:inline-block;
}
.status {
display:inline-block;
}
.summary {
display:inline-block;
float:left;
}
.last_updated {
display:inline-block;
float:right;
}
.box {
}
http://jsfiddle.net/3qbn222u/
i want to create something that looks like this image:
how can i achieve this in the easiest way?
//HTML BLOCK
<div class="cont">
<div class="header_box">
<div class="ticket_box">
<div class="ticketnumber">ID#0000001234</div>
<div class="summary">Subject: Grumpy Cat</div>
<div class="summary">Summary: blaahh</div>
</div>
<div class="summary_box">
<div class="last_updated">10 minutes ago</div>
<div class="status"></div>
</div>
</div>
<div class="wrapper_box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
//CSS BLOCK
.cont {
display: flex;
display: -webkit-flex;
height: 200px;
border-radius: 5px;
flex-direction: column;
-webkit-flex-direction: column;
border: 1px solid #dddddd;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
.header_box{
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
font-size: 12px;
}
.wrapper_box{
display: flex;
display: -webkit-flex;
flex: 2;
-webkit-flex: 2;
}
.ticket_box{
display: flex;
display: -webkit-flex;
flex: 6;
-webkit-flex: 6;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: flex-start;
-webkit-align-items: flex-start;
margin: 10px 10px;
}
.summary_box{
display: flex;
display: -webkit-flex;
flex: 4;
-webkit-flex: 4;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: flex-end;
-webkit-align-items: flex-end;
margin: 10px 10px;
}
.ticketnumber {
display: flex;
display: -webkit-flex;
}
.summary {
display: flex;
display: -webkit-flex;
}
.last_updated {
display: flex;
display: -webkit-flex;
}
.status {
display: flex;
display: -webkit-flex;
height: 15px;
width: 15px;
margin: 10px 0px;
border-radius: 50%;
background: red;
}
.box {
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
border: 10px solid #f3f3f3;
margin: 5px 5px;
background: #ccc;
background: url(http://www.freeallimages.com/wp-content/uploads/2014/09/grumpy-cat-no-1.jpg) no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-position: center;
-webkit-background-position: center;
color: #fff;
}
Agreed using FlexBox would be the easiest way.
Here is a good reference guide to FlexBox:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes