<div id="container">
<div class="table-responsive bordered fill">
<div class="row fill-row">
<div class="w-50" id="image_1"></div>
<div class="w-50" id="image_1"></div>
</div>
<div class="row fill-row">
<div class="w-50" id="image_1"></div>
<div class="w-50" id="image_1"></div>
</div>
</div>
</div>
https://jsfiddle.net/4b36yozr/
How I can remove the white vertical bar at the right of container despite it's set to be full width. I need to have 4 blocks that cover all the screen without that white space at right.
Give margin as 0px to the class fill-row and you get it with no space at the right corner.
<!DOCTYPE html>
<html>
<head>
<title>Efficienza Energia S.p.a.</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#container {
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
display: block;
}
html,
body {
height: 100%;
width: 100%;
}
.fill {
min-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
}
.fill-row {
min-height: 50%;
max-width: 100%;
height: 50%;
width: 100%;
/*margin-here*/
margin:0px;
}
#image_1 {
background-image: url("https://www.crockerriverside.org/sites/main/files/imagecache/pod/main-images/camera_lense_0.jpeg");
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: auto;
}
</style>
</head>
<body>
<div id="container">
<div class="table-responsive bordered fill">
<div class="row fill-row">
<div class="w-50" id="image_1">
</div>
<div class="w-50" id="image_1">
</div>
</div>
<div class="row fill-row">
<div class="w-50" id="image_1">
</div>
<div class="w-50" id="image_1">
</div>
</div>
</div>
</div>
</body>
</html>
I have commented in the code where the margin has to be set to zero.
Remove margin style from class row/fill-row.
Adding the style below should remove the white space on the right
.fill-row {
margin: 0;
}
What seems to be happening was that the .row class was adding the following styles:
margin-right: -15px;
margin-left: -15px;
Just use container-fluid and remove the padding from the columns, and also don't forget to set <body> height and width to 100vh and 100%, respectively. Like so:
<body>
<div class="full">
<div class="container-fluid half">
<div class="row h-100">
<div class="col-6 nopadding">
<div id="image_1"></div>
</div>
<div class="col-6 nopadding">
<div id="image_1"></div>
</div>
</div>
</div>
<div class="container-fluid half">
<div class="row h-100">
<div class="col-6 nopadding">
<div id="image_1"></div>
</div>
<div class="col-6 nopadding">
<div id="image_1"></div>
</div>
</div>
</div>
</div>
</body>
And the css:
body {
width: 100%;
height: 100vh;
}
.full {
height: 100%;
width: 100%;
}
.half {
height: 50vh;
}
.nopadding {
padding: 0;
}
#image_1{
background-image:url("https://www.crockerriverside.org/sites/main/files/imagecache/pod/main-images/camera_lense_0.jpeg");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:auto;
}
Related
I have a webpage that I'm trying to design but I'm stuck with persistant whitespace on the right side of the page. I have tried resetting the browser defaults but this has no effect on the page.
I have also tried to make sure that the parent elements all have a declared size but this too has had no impact.
Webpage:
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
.navbar {
height: 5%;
background-color: #181818;
}
.siteContainer {
color: #ffffff;
width: 100%;
height: 100%;
margin: 0;
}
.siteBody {
height: 100%;
}
.searchArea {
background-color: #181818;
}
.resultArea {
background-color: #121212;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container siteContainer">
<div class="row navbar">
<div class="col col-2 ">
Logo
</div>
<div class="col col-10 ">
Navbar
</div>
</div>
<div class="row siteBody">
<div class="col col-2 searchArea">
Search and CRUD
</div>
<div class="col col-10 resultArea">
Results
</div>
</div>
</div>
Youre using bootstraps container class which has fixed max widths (see https://getbootstrap.com/docs/5.1/layout/containers/).
What you want it container-fluid which fills 100% of the page.
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
.navbar {
height: 5%;
background-color: #181818;
}
.siteContainer {
color: #ffffff;
width: 100%;
height: 100%;
margin: 0;
}
.siteBody {
height: 100%;
}
.searchArea {
background-color: #181818;
}
.resultArea {
background-color: #121212;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid siteContainer">
<div class="row navbar">
<div class="col col-2 ">
Logo
</div>
<div class="col col-10 ">
Navbar
</div>
</div>
<div class="row siteBody">
<div class="col col-2 searchArea">
Search and CRUD
</div>
<div class="col col-10 resultArea">
Results
</div>
</div>
</div>
I have an issue. I'm trying to make bootstrap grid system with 4 rows, but the problem some rows are overlapped. I don't know from where comes this problem.
this fiddle shows my issue
html, body{
width: 100% !important;
height: 100% !important;
padding:0;
position: relative;
}
#header-sec{
position: absolute;
/*top: 0;*/
width: 100%;
background-color: green;
height : 15%;
min-height: 30px;
}
#footer-sec{
position: absolute;
bottom: 0;
width: 100%;
background-color: black;
height : 5%;
}
#data-viewer{
height : 60%;
}
#zone-geog{
height : 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div id="header-sec" class="row">
<div class="col-sm-12">header</div>
</div>
<div id="zone-geog" class="row">
<div class="col-sm-12">
zone geog
</div>
</div>
<div id="data-viewer" class="row bg-primary">
<div class="col-sm-9">map</div>
<div class="col-sm-3">idica evolu</div>
</div>
<div id="footer-sec" class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
</body>
if you have any ideas please help me solve this issue.
You need to remove position: absolute
html, body{
width: 100% !important;
height: 100% !important;
padding:0;
position: relative;
}
#header-sec{
width: 100%;
background-color: green !important;
height : 15%;
min-height: 30px;
}
#footer-sec{
position: absolute;
bottom: 0;
width: 100%;
background-color: black;
height : 5%;
}
#data-viewer{
height : 60%;
}
#zone-geog{
height : 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div id="header-sec" class="row">
<div class="col-sm-12">header</div>
</div>
<div id="zone-geog" class="row">
<div class="col-sm-12">
zone geog
</div>
</div>
<div id="data-viewer" class="row bg-primary">
<div class="col-sm-9">map</div>
<div class="col-sm-3">idica evolu</div>
</div>
<div id="footer-sec" class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
</body>
Trying to align the image vertically, and the text centered according to image. The whole card is about 300px * 200px. I want the image to be on the left hand side with text on the right.
<div class="card center-block">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="photo">
<img class="rounded" src="../im/3.jpg" width="130" height="130" style="min-height:50px;" />
}
</div>
</div>
<div class="col-sm-6" style="height: 250px; align-items:center">
<div class="content">
<h5 class="left-align"><strong>John Doe</strong></h5>
<p class="left-align">Software Developer</p>
</div>
</div>
</div>
</div>
CSS:
.card {
min-width: 350px;
max-width: 350px;
min-height: 200px;
max-height: 200px;
}
.photo {
padding-top: 35px;
margin-right: 10px;
display:inline-block;
height: 100%;
float: left;
}
.content{
height: 100%;
}
You can add a class to the row and use flexbox positioning. align-items: center on the row that holds the 2 columns, then also use flex on the .content element and create a flex column with justify-content: center
.card {
min-width: 350px;
max-width: 350px;
min-height: 200px;
max-height: 200px;
}
.photo {
margin-right: 10px;
display:inline-block;
height: 100%;
float: left;
}
.special-row {
display: flex;
align-items: center;
}
.special-row .content {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card center-block">
<div class="container"><div class="row special-row">
<div class="col-sm-6">
<div class="photo">
<img class="rounded" src="http://androidandme.com/wp-content/uploads/2015/12/Google-Now-on-Tap.jpg"width="130" height="130" style="min-height:50px;" />
</div>
</div>
<div class="col-sm-6 details" style="height: 250px; align-items:center">
<div class="content">
<h5 class="left-align"><strong>John Doe</strong></h5>
<p class="left-align">Software Developer</p>
</div>
</div>
</div>
</div>
<style type="text/css">
#displayHeader {
img {
width: 100%;
max-width: 100%;
max-height: 100%;
}
.header-img-inner {
max-height:100%;
}
}
</style>
<div id="displayHeader" style="height: 83.03px;">
<div class="header-inner">
<div class="row">
<div id="headerCol0" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
<p>TEST</p>
</div>
</div>
<div id="headerCol1" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
</div>
</div>
<div id="headerCol2" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
<p>tt</p>
</div>
</div>
</div>
</div>
</div>
<div id="displayContent" style="height: 264.8px;">
<div class="inner">
</div>
<div>
</div>
<div>
</div>
<div>
Image and text go out of the div block, why is this happening?
No float left, right used. It's not working with position:relative for parent and position absolute for child, but still not work well.
I only set maximum height for image when I set in on the header-img-inner
Why not use position: inherit; so as to make the image and whatever you want inside the div to inherit the position. This might help, give it a try.
Do you want something like this?
.block {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
}
.block:before {
content: '\200B';
/* content: '';
margin-left: -0.25em; */
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered {
display:inline-block;
vertical-align: middle;
width: 300px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some Text</h1>
<img src="Untitled-2.jpg" height="150px">
</div>
</div>
Please check this link:-https://css-tricks.com/centering-in-the-unknown/
I want to vertical center my container. Anyone knows how to do this using the Skeleton boilerplate? I've tried some things, but it continues to stay on top instead of vertical align. Hope someone can help me out:)
HTML:
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom"></h1>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
</div>
CSS:
/* Base 960 Grid */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
Some browsers like 'margin: 0px auto'.
Change your margin: 0 auto to 'margin: 0px auto;'
try this.
not for skeleton framework though. An example -better dont override container and column classes Have new classes for them and override
<div class="container top">
<div class="between"
<div class="sixteen columns middle">
<h1 class="remove-bottom"></h1>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
</div>
</div>
CSS
.top{
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.between{
display: table-cell;
vertical-align: middle;
}
.middle{
margin: 10px auto;
width: 960px;
}