I have found some weird CSS bug.
I have a <div> container with some text and a Font-Awesome icon inside. The <div> container is styled so that it has a small border. The weird thing is that the border seems to "think" that the <div> is only half the height of what it actually is.
This occurs only in Chrome mobile (Android) but not in Chrome desktop (not tested in safari and co...)
HTML
<div class="sidebar">
Lade Daten... <li class="fa fa-spin fa-spinner"></li>
</div>
CSS
#media only screen and (max-width: 860px)
{
.sidebar {
position: relative;
width: auto;
margin: 0 20px;
}
}
.sidebar {
position: absolute;
background: rgb(255, 255, 255);
border-radius: 5px;
margin-left: 20px;
padding: 20px;
border: 1px solid rgba(0, 0, 0, 0.9);
width: 335px;
box-shadow: 2px 2px 5px;
}
body {
margin: 0;
background: rgb(60,60,60);
font-size: 16px;
font-family: 'Share Tech Mono', Arial;
}
Try putting height: (px you want it) in your #media query
Related
I'm building a React Chat app. My background of messages works fine with a short text. The background responsively changes according to text-content.
With longer text, when I scale the browser, there are certain points where the background appears larger than the fit-content. Below are the pictures of the same message.
No Gap
With Gap
Here is my React code:
<div className={`chatMessage ${message.sender._id === state._id && "myMessage"}`}>
<div className="messageHeader">
<span className="chatName"> {message.sender.name} </span>
<span className="timeStamp"> {message.timestamp.substring(0, 10)} </span>
</div>
<div className="messageContent">
<span>{message.message}</span>
<small className="timeStamp"> {message.timestamp.substring(12, 20)} </small>
</div>
</div>
Here is my CSS:
.chatMessage {
display: flex;
height: auto;
position: relative;
font-size: 16px;
padding: 2px 10px 0px 10px;
max-width: 350px;
margin-bottom: 10px;
}
.myMessage > .messageContent {
background-color: #dcf8c6 !important;
}
.chatMessage > .messageContent {
background-color: rgb(221, 221, 221);
}
.messageContent {
position: relative;
bottom: 25px;
padding: 2px 10px 0px 10px;
border-radius: 10px;
right: -5px;
}
I believe the max-width property is causing the problem. But I can't figure out how to work around it.
I am running Android 10 and Chrome Beta 84.0.4147.89
But the rendering in Chrome and FF of mix-blend-mode seems to be very different. The background of the chat window should be white. When instead it is colorful.
So my question is how can this be fixed for Chrome browser on the
mobile phone?
Also in Chrome on desktop version it seems to run fine as long as
html becomes scrollable.
I am really confused as to what is happening and which fix may be applied to fix at least some of it.
https://jsfiddle.net/f7xbnozt
.chat-container {
position: absolute;
width: 300px;
border: 2px solid black;
border-radius: 8px;
overflow: hidden;
}
.chat {
float: left;
width: 280px;
height: 300px;
padding: 10px 20px;
overflow: auto;
}
.chat-container:after {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(rgb(0, 95, 255) 0%, rgb(146, 0, 255) 50%, rgb(255, 46, 25) 100%);
content: '';
mix-blend-mode: screen;
pointer-events: none;
}
.chat div {
color: white;
background: #1e1e1e;
border-radius: 8px;
padding: 10px 12px;
}
.chat .q {
background: blue;
margin: 6px 0 6px 50px;
}
.chat .a {
background: green;
margin: 6px 50px 6px 0;
}
<div class="chat-container">
<div class="chat">
<div class="q">Chat message...</div>
<div class="q">Chat message...</div>
<div class="a">Chat message...</div>
</div>
</div>
The reason why nothing works is the algorithm.
Transparent background + blue and green + gradient background equals vivid result you see in chrome.
While white background + blue and green + gradient background equals the desired result.
.chat-container {
background-color: #ffffff;
...
}
Curiously, if you copy the original code from jsfiddle to codepen, then nothing will work there either, even in firefox.
I'm trying to make a circular div with a single letter in it. It worked fine on Ubuntu(16.04)-Mozilla, but now the text is out of div in Windows10-Chrome.Please see this image
Here is the code: HTML:
<div class="Try"><p style="font-family: Bungee; font-size: 8mm;">A</p></div>
CSS:
.Try p,(some other Classes which works fine){
width: 10mm;
height: 10mm;
border-radius: 100%;
background: rgba(0,0,0,0.25);
color: #fff;
text-align: center;
margin: 10px;
display: block;
float: right;
bottom: 0;
box-shadow: 3px 3px 5px black;
right: 0;
bottom: 0;
position: fixed;
margin-right: 60mm;
word-wrap: break-word;
}
https://jsfiddle.net/SamX13/L1jtjznr/ <--- this is the code reproducing problem
In Windows, the browsers seem to think that the line height of the Bungee font is higher than in Linux. I don't know what causes it, but the solution is to set the line height explicitly in the css.
.try p, .abc p, .xyz p {
width: 10mm;
height: 10mm;
border-radius: 100%;
background: rgba(0, 0, 0, 0.25);
color: #fff;
text-align: center;
margin: 10px;
float: right;
bottom: 0;
box-shadow: 3px 3px 5px black;
right: 0;
bottom: 0;
position: fixed;
margin-right: 60mm;
word-wrap: break-word;
line-height: 1cm; /* new */
}
.try p {
margin-bottom: 42mm;
border: 2px solid red;
}
.abc p {
margin-bottom: 25mm;
}
.xyz p {
margin-bottom: 8mm;
}
<link href="https://fonts.googleapis.com/css?family=Bungee|Permanent+Marker|Electrolize|Yellowtail" rel="stylesheet">
<div class="try">
<p style="font-family: 'Bungee'; font-size: 8mm;">A</p>
</div>
<div class="abc">
<p style="font-family: 'Permanent Marker'; font-size: 8mm;">B</p>
</div>
<div class="xyz">
<p style=" font-size: 8mm; font-family: 'Electrolize';">C</p>
</div>
(Note that I also reduced the bottom margins a bit to fit the whole thing in an unexpanded snippet. So don't copy everything back to your CSS, only the new line.)
How can I change the position of a div smoothly, responsive?
HTML:
<div class="icon">
<i class="fa fa-search toggle_icon"></i>
</div>
<div class="sidenav">
<center>
<input id="provider-json" />
</center>
</div>
CSS:
.icon {
position: absolute;
top: 30%;
left: 0;
width: 50px;
height: 50px;
background: #d54042;
}
.sidenav {
position: absolute;
top: 30%;
left: 52px;
height: 50px;
width: 200px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background: #d54042;
background: -webkit-linear-gradient(left, #D54042 , #D56769);
background: -o-linear-gradient(right, #D54042, #D56769);
background: -moz-linear-gradient(right, #D54042, #D56769);
background: linear-gradient(to right, #D54042 , #D56769);
}
#provider-json {
margin-top: 6px;
padding: 10px 5px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border:solid 1px #ccc;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
outline-color: #d54042;
}
.toggle_icon {
font-size: 2.5em;
color: white;
padding: 3px 3px 2px 5px;
}
I would like to change verticaly the position of .icon and .sidenav.
When i make the screen smaller it should go smoothly up to top: 0;
I tried this:
#media screen and (max-width: 480px) {
.icon, .sidenav {
top: 5%;
}
}
But this works only when the screen is 480px wide.
To give that a smooth transition, make use of css transition as below,
#media screen and (max-width: 480px) {
.icon, .sidenav {
top: 0;
transition:0.6s ease; /*Add this*/
}
}
This move icons and search bar to top at screen resolution below 480px;, check this jsFiddle
As per your question "change the place smoothly" I am giving you some idea about relative and absolute positioning.
According to reference "Absolute location is a place's exact spot on a map, while relative location is an estimate of where a place is in relation to other landmarks." What this means relative takes parent div into consideration but absolute is totally absolute.
<div class="container">
<div class="icon">
<i class="fa fa-search toggle_icon"></i>
</div>
<div class="sidenav">
<center>
<input id="provider-json" />
</center>
</div>
</div>
Now, refine your code by keeping container with relative positioning and other with absolute. Relative should always wrap the absolute. Also take some reference from online tutorials like w3schools with better example. You will be cleared with concept.
I want to do like this
a border in each li and a background color
if there is offer for product a image with offer value must come
else there is no offer the triangle image must not display.
this is i want
Like this i have 4 columns
margin right and width - i wantr to give in em and %. CAn anyone tell how?
HTML:
<li class="home-latest-cakes" id="product-42">
<a href="http://localhost:8083/vignesh/works/cakes/?product=sample-2">
<div class="product-bg">
<img width="124" height="238" alt="product-1" class="attachment-post-thumbnail wp-post-image" src="http://localhost:8083/vignesh/works/cakes/wp-content/uploads/2014/02/product-1.png"> </div>
</a>
</li>
CSS:
.home-latest-cakes {
border: 1px solid #EEEEEE;
color: #E4E4E4;
float: left;
height: 465px;
margin-right: 1.6em;
width: 200px;
}
.product-bg {
background-color: #F8F9F4;
height: auto;
margin: 10px;
text-align: center;
}
.offer {
background: url("images/offer-bg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
float: right;
font-family: Impact;
font-size: 30px;
height: 92px;
min-width: 94px;
z-index: 999;
}
.percent {
color: #FFF000;
float: right;
font: 30px "Impact";
}
ins.off {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #FFFFFF;
font-family: "Bebas";
font-size: 20px;
left: 60px;
position: relative;
top: 31px; }
That triangle should be separate image, you can place it with position:absolute; . It is because you cannot define conditions with pure html and doing it with Jquery or javascript would cause a blink.