I have a weird gap that creates scroll on x axis when I switch from normal pc browser view to mobile view with F12 on google chrome. The gap exists on mobile view until I reload the page and then it's gone.
You can see it on the picture below.
<div id="search">
</div>
<div id="search-content">
<div class="search-item"></div><br>
</div>
CSS:
html{
width: 100%;
font-family: 'PT Sans', sans-serif;
}
#header{
color:white;
background: #0198E1;
height: 65px;
}
#header-text{
margin: 0px;
height: 65px;
text-align: center;
padding-top: 17px;
font-size: 25px;
}
#search{
width: 100%;
height: 180px;
background: #2a3849;
}
#search-content{
background:#f4f4f4;
width: 100%;
text-align: center;
padding-bottom: 50px;
padding-top: 40px;
}
.search-item{
background: #ffffff;
height: 200px;
width: 1000px;
margin-top: 10px;
display: inline-block;
-webkit-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.31);
box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.31);
}
#content{
}
#media screen and (max-width: 1100px) {
.search-item{
width: 95%;
height: 180px;
}
}
Related
enter image description here
Hello, I am using next js, and as you can see on the most right of the picture the page has an overflow for no reason and it's caused by an html CSS card I built as shown below in the photo. (I assumed it is because of the card because when I remove it the page works fine):
enter image description here
Below is the code of the card:
<div className={styles.container}>
<Row className={styles.Row}>
<Col data-aos="flip-right" className={styles.Col} sm={'auto'} >
<Link href={"/"}>
<a>
<div className={styles.aBox}>
<div className={styles.imgContainer}>
<div className={styles.imgInner}>
<div className={styles.innerSkew}>
<img src="./topbanner2.jpg" />
</div>
</div>
</div>
<div className={styles.textContainer}>
<h3>Flyer</h3>
<div>
This is a demo experiment to skew image container. It looks good.
</div>
</div></div></a></Link>
</Col>
<Col data-aos="flip-right" className={styles.Col} sm={'auto'} >
</Col>
....
below is the css:
.Col a:hover{
text-decoration: none;
color: black;
}
.Row{
width: 80%;
margin: auto;
}
.Col{
padding: 10px !important;
margin: auto;
text-align: center;
overflow-x: hidden !important;
}
.aBox {
display: inline-block;
width: 240px;
text-align: center;
box-sizing:content-box;
}
.aBox:hover{
.textContainer{
border:#04bcff solid 1px
}
}
.imgContainer {
height: 230px;
width: 200px;
overflow: hidden;
border-radius: 0px 0px 20px 20px;
display: inline-block;
}
.imgContainer img {
/* transform: skew(0deg, -13deg); */
height: 250px;
width: 100%;
object-fit: cover;
/* margin: -35px 0px 0px -70px; */
}
.innerSkew {
display: inline-block;
border-radius: 20px;
overflow: hidden;
padding: 0px;
/* transform: skew(0deg, 13deg); */
font-size: 0px;
margin: 30px 0px 0px 0px;
background: #c8c2c2;
height: 250px;
width: 200px;
}
.textContainer {
border:transparent solid 1px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
padding: 120px 20px 20px 20px;
border-radius: 20px;
background: #fff;
margin: -120px 0px 0px 0px;
line-height: 19px;
font-size: 14px;
transition: 0.25s border ease-in-out;
}
.textContainer h3 {
margin: 20px 0px 10px 0px;
color: #04bcff;
font-size: 18px;
}
Any suggestions what would be it?
Add
body * {outline:1px solid red;}
to the CSS file to see the overflowing component.
Pls this trick I learned from Kevin Powell (search him on YouTube)
.score{
font-size: 20px;
text-align: center;
background-color: white;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
margin: 0 auto;
}
.score p span{
padding-top: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
I want to move my text down a little bit but it's not working, putting padding in .score just makes it bigger and nothing happens if I put it in .score p span.
Nepotech's answer is correct. An other way is useing line-height for .score:
.score {
font-size: 20px;
text-align: center;
background-color: white;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
line-height: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
Just Use margin-top to p element
Note: I have changed color to blue, for better understanding!
.score{
font-size: 20px;
text-align: center;
background-color: blue;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
margin: 0 auto;
}
p{
margin-top: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
I have some CSS that looks fine in Chrome and Firefox, but is turning up a specific problem in Safari. The three divs/ul items are aligning properly in Chrome and Firefox, but are stacking directly on top of each other in Safari. To make it look right in Sf, I can make the left margin progressively larger between the three, but the result in FF and Chrome is that the divs go way off the page. I have tried a few hacks including this one:
#media screen and (-webkit-min-device-pixel-ratio:0){}
This didn't change anything. So here's the relevant HTML:
<ul id="nav">
<li class="nav_item"><div id= "work"> </div></li>
<li class="nav_item"><div id="about"> </div></li>
<li class="nav_item"><div id="contact"> </div></li>
</ul>
...And the CSS:
#work{ height: 50px;
width: 68px;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
background-color: none;
background-image: url(work_1.png);
background-repeat: no-repeat;
background-size: 120%;
position: fixed;
text-align: center;
z-index: 201;
padding: 0px 0px 0px 0px;
margin: 1px 1px 1px 40px;
display: block;
clear: both;
float:right;}
#about{ height: 50px;
width: 68px;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
background-color: none;
background-image: url(about.png);
background-repeat: no-repeat;
background-size: 120%;
position: fixed;
text-align: center;
z-index: 201;
padding: 0px 0px 0px 0px;
margin: 1px 1px 1px 40px;
display: block;
clear: both;
float: right;}
#contact{ height: 50px;
width: 84px;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
background-color: none;
background-image: url(contact.png);
background-repeat: no-repeat;
background-size: 100%;
position: fixed;
text-align: center;
z-index: 200;
padding: 0px 0px 0px 0px;
margin: 1px 1px 1px 40px;
display: block;
clear: both;
float:right;}
#nav {
padding: 0px;
display:inline;
list-style-type:none;
margin: 30px 0px 0px 700px;
position:fixed;
width:600px;
}
.nav_item {
display:inline !important;
position:relative !important;
margin: 5px 5px 5px 150px;
width:100px;
display: inline !important;
}
I am making one fan-site and have very stupid bug on news bar. When I zoom the page, 1px line appears.
This is the code:
<div class="velikibar">
<div id="velikibar_h">
<div id="naslovbar"><?=$naslov?></div>
</div>
<div id="velikibar_b">
<div class="paddingvelikibar">
<?=$sadrzaj?>
</div>
</div>
<div id="velikibar_f">
<div id="fblikedugme"><?=$vreme?><br /><div class="fb-like" data-href="http://********.**/article.php?id=<?=$id?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div></div>
<div id="komentarbarbox">Komentari (<?=$brkomentara?>)</div>
</div>
And this is the CSS (http://tny.cz/d9fb11db):
.velikibar
{
background-color:transparent;
width: 652px;
}
#velikibar_h
{
background-image:url('slike/velikibar_h.png');
background-repeat: no-repeat;
width: 652px;
height: 109px;
padding: 0;
margin: 0;
}
#velikibar_b
{
background-image:url('slike/velikibar_b.png');
background-repeat: repeat-y;
width: 652px;
min-height: 30px;
padding: 0;
margin: 0;
}
#velikibar_f
{
background-image:url('slike/velikibar_f.png');
background-repeat: no-repeat;
width: 652px;
height: 112px;
padding: 0;
margin: 0;
}
#velikibar_f2
{
background-image:url('slike/velikibar_f2.png');
background-repeat: no-repeat;
width: 652px;
height: 112px;
padding: 0;
margin: 0;
}
.paddingvelikibar
{
padding: 5px 35px 5px 30px;
text-align:justify;
color: #fff5f9;
}
#fblikedugme
{
position: absolute;
margin-left: 35px;
margin-top: 40px;
color:#fff5f9;
line-height: 20px;
}
#komentarbarbox
{
position: absolute;
margin-left: 425px;
margin-top: 65px;
}
#komentarbarbox a, #komentarbarbox a:link, #komentarbarbox a:visited
{
font-size: 14px;
font-weight: bold;
text-shadow: 0 1px 0 #6f1c3f;
color: #fdd2e4;
text-decoration:none;
}
#komentarbarbox a:hover, #komentarbarbox a:focus
{
color: #d61566;
text-decoration:none;
}
#naslovbar
{
font: 23px/1.4em arial, helvetica;
color: #e1aec4;
padding-top: 50px;
padding-left: 35px;
text-shadow: #FCFCFC 0px 1px 0px;
}
.paddingvelikibar img
{
background-color: #fff2f7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
behavior: url("skripte/ie-css3.htc");
padding: 4px;
}
Please help me how to fix this. Thanks in advance
This appears to be a browser bug.
For example, an element which is 5px wide, viewed on 1.5 zoom would be 7.5px wide, but the browser has to round it to full pxls so something like this can happen.
To make sure it doesnt happen you can make the elements overlap, or in your case, best would be not to split the pink background image in 2 elements, but have a single element carry the whole image.
Chrome doesnt use font-resize as zoom option, so it is very unlikely that this is caused by a particullar line of css.
So in both portrait and landscape the right 30% or so of the screen is just white, only on iPhone and maybe other small screens, as if the width were less than 100%.
Here is my HTML:
<div id="loading">
<div id="loading-message">
<p>Please enable Javascript to view this site.</p>
<p class="tar">-Thanks</p>
</div>
<div id="loadingBar">
<div id="loadingBarInner"></div>
</div>
</div>
And relevant CSS:
#loading {
background: gray;
width: 100%;
position: absolute;
height: 1800px;
box-shadow: inset 0px 0px 500px black;
}
#loading-message {
margin: auto;
border-radius: 30px;
padding: 100px;
box-shadow: 0px 0px 50px 10px black;
width: 300px;
margin-top: 200px;
font-size: 30px;
font-weight: bold;
}
#loadingBar {
margin: auto;
width: 350px;
height: 30px;
margin-top: 300px;
border-radius: 5px;
border: 2px solid black;
padding: 2px;
}
#loadingBarInner {
background: #6d0019; /* Old browsers */
height: 30px;
width: 0px;
border-radius: 5px;
}
instead of using fixed padding in #loading-message use padding
with percentage also use max-width and min-width properties instead of
fixed width in #loadingBar and #loading-message. your iphone has about 400px width and you defined 100px
padding and width of 350px. on big screens it's no problem but in your
iphone it will always load with blank space on right side.
#loading {
background: gray;
width: 100%;
position: absolute;
height: 1800px;
box-shadow: inset 0px 0px 500px black;
}
#loading-message {
margin: 0 auto;
border-radius: 30px;
padding: 10%;
max-width:300px;
min-width:50px;
box-shadow: 0px 0px 50px 10px black;
margin-top: 200px;
font-size: 30px;
font-weight: bold;
}
#loadingBar {
margin: auto;
max-width:300px;
min-width:50px;
height: 30px;
margin-top: 300px;
border-radius: 5px;
border: 2px solid black;
}
#loadingBarInner {
background: #6d0019; /* Old browsers */
height: 30px;
width: 0px;
border-radius: 5px;
}
also u can use media queries... media queries
What iPhone do you have?
Try to play with the widths.