I have a problem where there is a persistent bit of white space to the right of my row in a bootstrap site, despite the fact that I seem to have everything set to full width style (0 margin, container-fluid, etc.).
I started stripping elements off of my site to get it as simple as possible to see what the problem is. I'm now down to just the head content, a container-fluid, and a row, and yet the problem still persists.
html, body, .container-fluid {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.home {
width: 100%;
height: 100%;
background-image: url("../images/background3.jpeg");
padding-top: 10%;
padding-bottom: 10%;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!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">
<title>Modern Business - Start Bootstrap Template</title>
<link href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open Sans" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row home">
</div>
</div>
</body>
</html>
The pic below is what the site looks like. You can see the white space quite clearly (on the right, very small, like 5px or so).
The default margin for the row class is causing this
edit your css for .home class like this:
.home{
width:100%;
margin:0;
padding:0;
}
For any element, It is always a good idea to put margin:0;padding:0; the second you start to write its css. You can always add margins and paddings later as they fit but it wont cause you problems like this.
Add margin:0, to your .home class to override bootstrap default margin:
https://jsfiddle.net/yc6p7osk/1/
If you inspect .row - you will notice some default margins there.
Also, you could use another boostrap class for 100% width container, probably.
html, body, .container-fluid {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.home {
width: 100%;
height: 100%;
padding-top: 10%;
padding-bottom: 10%;
background-size: cover;
box-sizing: border-box;
}
When you use width and height 100%, the default is to add the borders and such to the width. Add box-sizing: border-box; and your block will be 100% regardless.
More info here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
HTH.
Related
I'm making a custom scrollbar with css but as you can see in the picture the corner of the scrollbar track isn't like what I need, I have tried border radius for bottom right and top right but no luck, any help would be appreciated!
::-webkit-scrollbar-thumb {
background: url("/assets/scrollbar.png") no-repeat;
background-size: 9px 150px;
display: block;
}
::-webkit-scrollbar-track-piece {
background: grey;
}
Try using the perspective property of css to rotate it according to the picture on the right.
This code will help you to understand.
<!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>
<style>
.div1{
border: 1px solid blue;
height: 200px;
width: 200px;
perspective: 200px; /* Defines how far the object is */
}
.div2{
transform-style: preserve-3d; /* Rotatingthe div as a 3d object */
transform: rotateY(45deg);
height: 60%;
display: flex; /* Flexbox for centering the text */
align-items: center;
justify-content: center;
background-color: grey;
}
</style>
<body>
<div class="div1">
Div 1
<div class="div2">
Div 2
</div>
</div>
</body>
</html>
I hope you understood. Check out this link for more. Please feel free to ask in the comments if you need more explanation.
Thanks to a guy in my team, we managed to solve the issue by adding the background to webkit scrollbar track.
I have a doubt, I would like to scale the sides of my background image outside the visible width, so as to extend the background to the height that determined
To be more clear, I would like the browser to read only the width that I defined to be viewed, while the rest of the background would serve only to not leave the background spaghetti, my idea would be to extend the page down while the sides would serve only not to make the background ugly and disproportionate.
sorry my bad english.
CSS:
/* Main */
body{
margin: 0;
padding: 0;
}
.container{
position: absolute;
}
.main-logo h1{
position: inherit;
left: 0;
-webkit-text-stroke: 1.5px black;
font-size: 32px;
font-family: "8 BIT WONDER";
}
.background-img-main{
position: absolute;
width: 100%;
height: 1800px;
background-size: 0, 100%;
z-index: -100;
overflow: hidden !important;
}
HTML:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forbidden Series</title>
<link rel="stylesheet" href="assets/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<!--Container-->
<div class="container">
<!--Header-->
<header>
<div class="main-logo"><h1><font color="#780002">Forbidden </font><font color="#FFFFFF">Series</font></h1></div>
</header>
</div>
<img src="img/Screenshot_1.png" class="background-img-main">
<img src="img/background.jpg" class="background-media-main">
<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
How I wish it were
set an height of 100% on your main container, and put and overflow:auto rule
.container{
position: absolute;
height:100%;
overflow:auto;
}
also, you want to set off the body and html overflow
body,html {
overflow:none;
}
I have a web site where the min-width is set to 767px until I can get around to making a purely mobile version.
However, when this is pinched in to view the entire 767 width, the height does not honor the 100%. It appears to stay at whatever height was set when zoomed out to 1.
Here is a screenshot:
It works fine on landscape, but not on portrait.
How do I fix this?
Edit: Here's a full html that shows the problem...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
<style>
html, body {
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
height: 100vh;
min-height: 100vh;
background: red;
padding: 0;
margin: 0;
}
#navbar {
background: blue;
min-width: 767px;
}
</style>
</head>
<body>
<div id="navbar">Test</div>
<div ng-view id="mainBody">Test</div>
</body>
</html>
add a meta tag for viewport
<meta name="viewport" content="height=device-height, initial-scale=1.0" />
you can use vh unit for full height:
#mydiv {
display:block;
height:100vh;
}
see units from css3 on w3schools
So, the issue is rather obvious. Now I've two elements in div containers, that should abut one another, but because of lack of css skills I need your help. So, the code is rather primitive.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Новый формат общения</title>
<html>
<link rel="stylesheet" type="text/css" href="center_ribbon.css">
<link rel="stylesheet" type="text/css" href="center.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.center {
top: 50%;
left: 50%;
width: 310px;
height: 50px;
position: absolute;
margin-top: -155px;
margin-left: -25px;
}
</style>
<body>
<div class="center"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>foo</h1></strong><div class="ribbon-stitches-bottom"></div></div></div>
<div class="wrap"><div class = "lifted">
<p>footext</p></div></div>
</body>
</html>
So, the corresponding code of css as follows
center_ribbon.css
html, body {height:100%;}
.wrap_ribbon {
position:relative;
width:50%;
margin: 0px auto ;
height:auto !important;
height:100%;
min-height:100%;
}
.contentdiv_ribbon {
display:block;
position:fixed;
margin-top: 200px;
margin-left: 170px;
}
center.css
html, body {height:100%;}
.wrap {
.center {
top: 50%;
left: 50%;
width: 260px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -130px;
}
}
As you can rightly notice, here is mess of code, sorry for that. I'm new to css and other web stuff and just poking around. Any improvements would be appreciated.
UPD. Added my page http://jsfiddle.net/7xZLM/5/
Try this:
<head>
<style>
.main {
margin: 0 auto;
}
.column {
float: left;
width: 40%;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="column">DIV 1</div>
<div class="column">DIV 2</div>
</div>
</body>
Click JSFiddle
It's hard to know what you're asking. It sounds like you want 2 divs that sit next to each other. If so, you're wanting to look at float in CSS.
simplified example
CSS
.col1 {
float: left;
}
HTML
<div class='bold col1'> foo</div>
<div class='col2'>footext</div>
An absolutely positioned element is positioned relative to the first parent having position other than static, if none is there it'll be positioned relative to the initial container, <html>
In your code .wrap doesn't have a positioned parent so it'll be positioned relative to the document, top:50%` will position the div 50% below the top of document...
Update
Since .wrap is positioned relative to the document, it's position changes with the height of the page, while the ribbon will stay at the top of the page, causing space between them.
Wrapping them inside a positioned parent will fix the issue.
check this JSFiddle
And from what i understood, you need the .wrap to look like it's coming out from the ribbon, for that you can apply an z-index less than the ribbon to .wrap,
as in this Updated JSFiddle
I’m struggling withthis of few hours new, and can’t get it right. My CSS skills a pure, so please understand.
So what I want to achieve is I have image on web site and when I change size of the browser window, image size has to adjust to a browser size, so whole image can be seen. Also image has to be in the center of the page.
Thanks for any help.
index.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title>James Laycock</title>
</head>
<body>
<div id="main">
<div id="content">
<div id="image_container">
<img src="images/01.jpg" class="image" /></div>
</div></div></body></html>
style.css:
body{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;}
#main {
height: 90%;
width: 1000px;
position: absolute;
border: 0px;
padding: 0;
margin: 0 auto;}
#content{
height: 90%;
width: auto;
margin-top: 10px;
margin-right:10px;}
#image_container{
height: 100%;
max-height:100%;
width: auto;}
.image{
height: 100%;
width: auto;}
Try putting on the image container
text-align: center
And, on the actual image put height/width in percentage.
Edit: don't forget also centering the image container, or setting it's width to full screen.