I used flexbox properties to make my section look like this:
It works fine on Chrome but I noticed a few differences when I checked firefox and safari.
This is how chrome looks like:
But on Firefox, I am not managing to apply to margin of 1% like I want as the red signal shows:
And on safari, the boxes are all one after the other:
It is a WordPress Site and not live yet. But here is my html structure:
<section id="services">
// here goes the title of the container
<div class="main-container col-lg">
// here go all the box
<div class="services-container">
// this one of the boxes
</div>
</div>
</section>
And the CSS:
#services {
background-image: url("img/Services-background.jpg");
background-color: red;
}
.col-lg {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: initial;
max-width: 100%;
}
.services-container {
color: #d6d6d6;
margin: 1%;
max-width: 100%;
width: 30%;
}
How Can I make this work on all browsers?
The best way to ensure that flex is working equally on all browsers is to use prefixes.
Here's the chart from MDN showing you the different browser prefixes available for flex box (and general browser support notices)
display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms--display: flex;
I strongly suggest you not use flexbox, but floats instead.
Delete all the flex properties your css should look like this:
#services{
background-image: url(img/Services-background.jpg);
overflow: auto;
}
.services-container {
color: #d6d6d6;
width: 30%;
float: left;
margin: 1%;
}
Then you can add the rest of the styling. It will work on all browsers.
Sometimes the HTML version may be the reason (it was in my case):
I looked for <!DOCTYPE html> at the top of the source code. My HTML turned out to 4.0 something and that was the reason (most probably) that flex did not work. Once that was changed, it worked well.
Good luck...
Related
I'm new to front end development and currently working on a website project.
It has a simple layout and I'm using CSS Flexbox to execute it. Works well in for example Firefox, and very poorly in Safari. I've done quite a bit of research and found out that Flexbox is not fully supported in older versions of Safari, however I have the newest version. Sizing and positioning doesn't work properly, aligning the items horizontally works.
Below is the desired look of one of the pages, in Firefox:
image
Below is the same page in Safari (it looks the same in Chrome):
image
When zooming out in Safari it looks like this:
image
.container4 {
font-family: "Chakra Petch", sans-serif;
font-size: 40px;
display: flex;
justify-content: center;
align-items: stretch;
gap: 50px;
.element4 {
padding-left: 50px;
padding-top: 50px;
align-self: flex-start;
flex: 1 1 50px;
}
.element4-2 {
padding-right: 50px;
padding-top: 50px;
align-self: flex-start;
flex: 1 1 50px;
}
<div class="container4">
<p class="element4">
Drummer and beat producer from Gothenburg, based in Oslo. The beats are
built around Pers drumming, <br />
using samples from a wide variety of genres <br />
mixed with other sounds.
</p>
<img class="element4-2" src="../Images/galgeberg.png" alt="wall2" />
</div>
Couple of problems:
if you want both columns to be 50% width on all screen sizes, you need to set flex:1 1 50% on both the p and the img tags.
if you want the img tag to scale up and down instead of always being it's full size, you need to set width:100%;height:auto on it.
if you want to center the two elements vertically all you need is align-items:center on their container (where display:flex is defined) and not use any vertical padding on them
As a matter of personal preference I would set display:block on both the p and img tags, or better yet wrap them in tags to prevent any weirdness from what styles some browsers could put on them.
Code:
<div class="container4">
<p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
<img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>
<style>
.container4 {
font-size: 40px;
display: flex;
align-items: center;
gap: 50px;
}
.element4 {
padding-left: 50px;
flex: 1 1 50%;
}
.element4-2 {
padding-right: 50px;
flex: 1 1 50%;
width:100%;height:auto;
}
</style>
Codepen: https://codepen.io/nonsintetic/pen/poWygaY (tested on Safari and Chrome on a mac with latest everything)
Few things, The align item stretch is causing the issue. also you need to make sure that you are diving the 50% gap for each element, third you have set the max-width of the image to maintain the sizing. here is the jsfiddle with responsiveness.
.container4 {
font-family: "Chakra Petch", sans-serif;
font-size: clamp(30px,20vw+1px,40px);
display: flex;
justify-content: space-between;
padding:2em;
}
.element4{
max-width:50%;
margin:auto;
}
.element4-2{
max-width:50%;
margin:auto;
}
.container4 img{
width:100%;
}
<div class="container4">
<p class="element4">
Drummer and beat producer from Gothenburg, based in Oslo. The beats are
built around Pers drumming, <br />
using samples from a wide variety of genres <br />
mixed with other sounds.
</p>
<img class="element4-2" src="https://www.ejin.ru/wp-content/uploads/2017/09/2-2400-696x392.jpg" alt="wall2" />
</div>
I never had problems using flexbox on modern browsers.
I'm assuming there is some typo/error in your css.
Without the entire code, it's hard to know what will and will not work for your specific layout.
Anyways, my approach would be more like:
.container {
font-family: "Chakra Petch", sans-serif;
font-size: 40px;
display: flex;
flex-direction: row; // makes sure it's treated as row
width: 100vw; // 100 viewport width = fills entire viewport width
height: 100%; // take 100% of available space (since you have a header)
justify-content: center;
align-items: center;
}
.page-paragraph {
margin: 0;
padding: 50px; // padding of 50px all around
}
.page-img {
width: 50%; // image is always 50% of available width
margin: 50px;
}
Any reason you are exclusively using classes?
If an element occurs only once, it's smart to give it an id instead.
You can specify an ID with the '#' selector.
Also scratch the break tags if you are going for a fluid layout,
in some cases you might only have the word 'drumming' in a single line.
I want to left-align the entered date in input[type='date']. However, on mobile browsers (I'm testing on safari and chrome), the date stays in the center of the input. mobile example
Here is the code I'm working with:
.container {
display: flex;
justify-content: center;
}
.date-input {
display: flex;
justify-content: flex-start;
height: 2rem;
width: 300px;
text-align: left;
}
<div class="container">
<input type="date" class="date-input" />
<div>
Code Sandbox
Is there something I'm missing within the CSS, or do mobile browsers just force you to center the entered date within the input?
I've just ran a quick test on an iOS simulator linked to Safari dev tools and found that there is a pseudo element which we can style...
input::-webkit-date-and-time-value {
text-align: left;
}
I Know that internet explorer doesn't play nice with SVGs. I notice that when changing display: block to display: flex does decreases the size of the gap. however it doesn't remove it.
I am declaring height and width in the styles but the issue seems to persist in IE 11
// Declarations
.o-navigation {
align-items: center;
display: flex;
#include font-smooth;
padding: (.5 * $spacing-base) $spacing-base;
.logo-access {
.icon-logo-full {
width: 135px;
height: 23px;
display: block;
#media screen and (min-width: $screen-desktop) {
.home & {
width: 270px;
height: 45px;
}
}
}
}
}
https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/blob/master/src/objects/navigation/_navigation.scss
Where might the issue come from?
After using F12 developer tools to check the CSS style, I think the problem is caused by the different rendering way in IE11 that leads to the "o-navigation color-dark-background" having different heights in IE11 and other browsers. You can give the "o-navigation color-dark-background" a specific height value familiar with the value in other browsers. Here I try to set the height value to 52px and then the gap disappears. Like this:
IE doesn't play well with SVGs. The other answer to this post regarding adding the height style to the page does seem to work, and many other post regarding this issue direct to that solution. What did it for me was adding overflow: hidden to the links in the nav.
.nav-inline {
#include typography-nav();
list-style: none;
text-align: $text-direction-end;
flex: 1 1 auto;
margin: 0;
padding: 0;
a {
display: inline-block;
margin-#{$text-direction-start}: 1em;
overflow: hidden;
}
Take a look at this image:
As you can see the 2 end links break out of the anchor container.
This is only happening on an iPad (using simulator to test).
On the desktop it behaves as it should by breaking the words in the other links allowing for more space to distribute the remaining items.
It's as if ios doesn't know how to properly break the text in the first link.
.nav-section {
padding: 0 30px;
}
.nav-section__list {
display: inline-flex;
align-items: stretch;
margin: 0 auto;
}
.nav-section__item {
padding: 0 20px;
}
.nav-section__link {
display: block;
background: red;
}
<nav class="nav-section">
<div class="nav-section__list">
<div class="nav-section__item">
AAAAA AAAA-AAAAAAAA AAAAAAAAA
</div>
<div class="nav-section__item">
AAA AAAAAAAA AAAAAAAAAA
</div>
<div class="nav-section__item">
AAAAAAAAAAA
</div>
<div class="nav-section__item">
AAAAAAA
</div>
</div>
</nav>
Update
word-break: break-all is not a valid solution:
word-wrap: break-all also doesn't work:
This is the same resolution but on a desktop:
As you can see the way the words break is completely different. The iPad just doesn't want to co-operate.
Update 2
I have run into the same issue in another instance of flexbox. It seems like IOS still has some bugs with the implementation.
So I went ahead and used display: table; and display: table-cell; just until the issue is resolved.
If anybody has any other hints as to exactly why the issue might be happening that would be great. Thanks!
Flexbox is relatively new, and browsers may have implemented it a little diferently from each other.
You may be missing the -webkit-prefix, as it looks like safari did need it on some versions.
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: stretch;
align-items: stretch;
Or, maybe you could try using:
word-break: break-all;
To ensure that those words will be broken, and will not overflow.
Must specify Width in nav-section__item
.nav-section__item {
padding: 0 20px;
word-wrap: break-all;
width: 20%;
}
Live Demo
In my experience with safari and flexbox it often helps to just add
display: flex;
flex-shrink: 0;
to the container which is too small. That should guarantee that the container is atleast the size of its contained element.
I've noticed that Internet Explorer seems to ignore a table's padding. I've tested version 7, 8 and 9.
What is the best workaround? I prefer a workaround that's based purely on CSS than one that involves wrapping tables in <div>s or messing with tags in general.
Try this:
td
{
display: table-cell;
padding: 30px;
border: 1px solid #000000;
}
As seen on jsfiddle.
I have found that this actually works as a fallback for flex box in ie9. And while the original question has nothing to do with CSS flex,and this is probably a repeat, it solved an issue for us, so I will mention it here and hope it helps others.
flex: .selector { display: flex; } and no flex fallback:
.no-flexbox .selector { display: table-cell; padding : 25%; }