Only when I use microsoft edge on mobile I have this problem. I use the following css for those buttons:
.footer-wrapper a i[class^="cfi"] {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
vertical-align: middle;
}
It's something I miss? Or there is any way to use devtools on mobile? Because when I use any user agent on my laptop everything seems to be fine.
I don't have the full context, seeing the HTML would be helpful. However, the easiest way to do that would be to flex-center them.
.footer-wrapper a i[class^="cfi"] {
display: flex;
align-items: center;
justify-content: center;
}
Related
I'm using chrome both on my laptop and on my iphone.
I created a simple example that demonstrates the problem: https://s3.us-east-2.amazonaws.com/asteroid-public/test/test.html
Try viewing that page on your desktop/laptop. The messages render correctly, not overlapping each other. Even when you use the DevTools to view the page as if you are viewing on a mobile device, it still works fine on the laptop. Now, try viewing it on your chrome app on your mobile phone. The messages all overlap each other and so it is hard to read.
Here are some screenshots showing the difference:
Why is this happening and how do I fix it on mobile?
It looks like your .chat .message css properties are causing this. I understand what you tried to do by doing this:
.chat .message {
margin: 4px 16px;
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
However what is causing your problem seems to be the display property. I hope that helps.
.chat .message {
margin: 4px 16px;
white-space: nowrap;
//display: flex;
//flex-direction: row;
align-items: center;
position: relative;
}
I suggest making all div class="message" include a div class="inner". In this way, you can have your div class="inner" at a width: 80%; and display: block;, and your messages have width: 100%; and height: auto;. You can set alignment rules on div class="message" by using .message[origin-me] and .message[origin-them] to set where the div class="inner" aligns. I hope this helps!
I follow this example
https://developer.mozilla.org/en/docs/Web/CSS/scroll-behavior
But it does not work, page is reloaded. I need only to scroll, instead of reload.
Actually i would like to scroll all body to the certain id item.
// html5
<nav>
<a href="#page-1" rel='no-refresh' >1</a>
<a href="#page-2" rel='no-refresh' >2</a>
<a href="#page-3" rel='no-refresh' >3</a>
</nav>
<scroll-container>
<scroll-page id="page-1" >1</scroll-page>
<scroll-page id="page-2">2</scroll-page>
<scroll-page id="page-3">3</scroll-page>
</scroll-container>
// css3
a {
display: inline-block;
width: 50px;
text-decoration: none;
}
nav, scroll-container {
display: block;
margin: 0 auto;
text-align: center;
}
nav {
width: 339px;
padding: 5px;
border: 1px solid black;
}
scroll-container {
display: block;
width: 350px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
scroll-page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 5em;
}
This feature is only fully supported by Firefox 36 currently. Neither Internet Explorer or Safari support this feature at all.
To make it work with Chrome or Opera, you will need to go into your browser settings and enable the "Smooth Scrolling" or "Enable experimental web platform features" flag.
Side Note: The page you linked to contains information about browser compatibility for future reference. This code should not be used for production environments due to the lack of implementation across browsers.
If you want to add smooth scrolling to a production environment I would recommend a javascript based implementation for now.
I have a block on my page where 2 images should stand next to each other. Depending on there width, they should scale accordantly.
Thank god we have Flexbox for that!
Now this demo works in Chrome, Safari, FF and IE Edge:
http://codepen.io/IbeVanmeenen/pen/PqgOJM
.el {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 4rem 0;
}
.el__wrp {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
justify-content: space-around;
min-width: 0px;
}
But the problem is that in IE11 and 10, the flex shrink seems to be ignored, resulting in the first image been shown full width and the second one disappearing...
Anyone have a clue how to fix this..?
Thanks in advance
Ok, fixed this!
I updated the pen.
I tested the original code, but replaced the images with text, and it worked! So the problem was the images.
Original code for the images was:
.el__wrp img {
display: block;
margin: 0;
max-width: 100%;
min-width: auto;
}
And I changed it to:
.el__wrp img {
display: block;
margin: 0;
width: 100%;
}
It all works now!
The IE 10 and 11 has bug when using min-height. It's known issues and you can find the issue for example here https://caniuse.com/#search=flex
I'm playing around with display: inline-flex css property and see completely different behaviour for the same layout in Firefox and Chrome:
Here's how blocks are stacked in Firefox:
And here's how it looks like in Chrome:
So, Firefox is working as expected (at least by me), and Chrome increases the width of container for some misterious reason.
My question is - what behaviour meets specification and how I can make Chrome to render blocks just like Firefox does.
For the sake of self-completeness, here's css code from codepen snippet I've provided link to:
body {
font-family: Century Gothic;
}
.adder {
display: inline-block;
vertical-align: top;
}
.stage {
height: 200px;
background: linen;
overflow: visible;
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
}
.job {
height: 50px;
width: 100px;
background: white;
color: black;
border: 1px solid black;
}
.job:nth-child(2n) {
background: black;
color: white;
border-color: white;
}
I took the time and went over to CodePen, turns out your problem lies in the css, If you change "display:inline-flex;" to "display:flex;" AND "align-items:flex-start;" to "align-content:flex-start;". I have tested the code and it definitely works on all but safari, I have tested every way I can think of to get it to work, but to no avail.
Athena
P.S. On a side note your missing a semicolon in your JS...
I'm trying to lay 3 things out on my forum: a bunch of media links top left, a menu bar top right and a logo beneath them centered.
Using this approach it appears exactly how I wanted on my localhost setup. However when I upload them to my live website, it looks different? Different in the sense that the logo seems to "see" the media box as its left margin, whereas offline is disregards it and centers on the page. Same browser, everything is the same which is why it's so baffling.
#logo{
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#brdmenu {
display: inline-block;
float: right;
}
#media {
display: inline-block;
float: left;
padding: 10px 10px 0px 10px;
}
I hope this isn't spammy but full CSS (and how it looks live) can be seen here: www.strengthandfitness.co.uk
The issue might be a lack of width on the #logo. Updated code, works for me in Chrome/FF:
#logo {
display: block;
text-align: center;
margin: 0 auto;
width: 650px;
}