body {
background-color: #4dc6ff;
}
.paragrafacasa {
width: 500px;
margin-right: auto;
margin-left: auto;
background-color: #e8e8e8;
border: 2px solid black;
border-radius: 8px;
margin-top: 100px;
}
.paragrafacasa p {
font-size: 30px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title> Here is title </title>
</head>
<body>
<div class="paragrafacasa">
<p> Here is my text </p>
</div>
</body>
</html>
Just finished editing a site, but when I published the Samsung Internet application do not display background-color on div.
Everything is displayed correctly in Chrome, only the Samsung Internet encounters this problem. Below I attached 2 screenshots to understand better. Any solution?
Samsung Internet ,
Chrome
Related
This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 9 months ago.
so I'm trying to make the input field like this
image to see what I want to expect
and for some reason box-sizing:border-box doesn't work
I'm using chrome browser
am I doing something wrong?
.....................
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
#input-el {
box-sizing: border-box !important;
width: 100%;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
border-style: solid ;
border-width: 2;
border-color: #5f9341;
background-color: rgb(214, 229, 248);
color: black;
}
#input-btn {
margin: 10px 10px 0px;
font-size: 20px;
border-style:solid;
border-color: #5f9341;;
background-color: #5f9341;
color: aliceblue;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css">
<title>chrome extension</title>
</head>
<body>
<!-- input field for writting inside -->
<div>
<input type="text" id="input-el" />
</div>
<!-- save button to save the input -->
<div>
<button id="input-btn">SAVE INPUT</button>
</div>
<script src="index.js"></script>
</body>
</html>
You should be doing this:
width: calc(100% - 20px);
When I add a border to a div, the content inside doesn't have 100% width and height anymore.
I already added padding: 0; and margin: 0; as well as box-sizing: border-box; but the background still shows up at some zoom levels.
Is this a browser bug? On Firefox the red background never shows up (but Firefox has different zoom levels, too).
red background
#outside {
box-sizing: border-box;
background: red;
border: 1px solid #808080;
border-radius: 12px;
height: 500px;
overflow: hidden;
padding: 0;
margin: 0;
}
#content {
background: green;
height: 100%;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="outside">
<div id="content">
</div>
</div>
</body>
</html>
In browers there is some inner css
You can write in your css file
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
this style will be appliced for all document, not only for div id="outside".
I use also this file to apply the default code : Normalise.css
In the picture you can see that above name are 46px of space and below only 40px while the nav is 100px's high. I've set margin: 0;padding:0; and line-height:0; but it is still there and I can't find anything meaningful via the Chrome Devtools. Why is this happening and how can it be fixed?
See the problem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#topper {
position: relative;
height: 100px;
background-color: steelblue;
color: skyblue;
}
#name {
font-size: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
line-height: 0;
}
</style>
</head>
<body>
<nav id="topper">
<h1 id="name">name</h1>
</nav>
</body>
</html>
I could really use some css help. Is it possible to swap the order of 2 words using css, WITHOUT using :after? (ex "Hello World" should become "World Hello")
The specific reason I cannot use :after which does in fact work, is that the div snapshot utility html2canvas.js does not take :before or :after into account, hence the workaround.
any help is very much appreciated.
Niko
You can stack the sentences with CSS z-index and using keyframes to make an effect of swapping. (see code-snippet).
After that you need to decide how/when to call for the change, through buttonclick or time. For calling you probably need some javascript.
If your are looking for a solution that really replaces the text in the HTML div, then you need solve that through javascript.
.div-1 {
position: absolute;
z-index: 1;
background-color: white;
width: 100px;
height: 20px;
margin: 0px 0px 0px 20px;
}
.div-2 {
position: relative;
z-index: 2;
background-color: white;
width: 100px;
height: 20px;
margin: 0px 0px 0px 20px;
animation-name: swap;
animation-duration: 5s;
animation-delay: 0;
}
#keyframes swap {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="div-1">Hello World</div>
<div class="div-2">World Hello</div>
</div>
</div>
</body>
</html>
I created a custom page template, here the link http://goo.gl/UFgzGQ, but I noticed that the style of header is messed up only on that page.
How to fix this?
Here's the css
.header-wrap .search-icon {
float: right;
position: relative;
margin-top: -32px;
line-height: 6;
margin-right: -30px;
border-left: 1px solid #ECECEC;
cursor: pointer;
padding: 0 20px;
}
.header-wrap .ak-search {
background: none repeat scroll 0 0 #FFF;
display: none;
padding: 10px;
position: absolute;
right: 0;
top: 100%;
z-index: 9999;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
EDIT
Actually its not the CSS which causing the misalignment or misplacing the search-icon, its your DOM viz the main culprit as:
your maine-page screen:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
....
you can see that it has perfectly defined header with doctype whereas in your inner-page:
<head>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
.........
there are some broken code viz the main-culprit and causing the issue.