I would like to display the image and footer to always fit the browser window - no scrolling. In order to fit the image should be resized while keeping the ratio. Footer should always be at the bottom and the image fill the rest of the space.
I thought this should be easy to achieve with bulma - but so far i couldn't make it work. Is the hero-layout not the right layout to achieve this with bulma?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
</head>
<body>
<section class="hero" style="height: 100vh">
<div class='hero-body is-paddingless'>
<figure class='image'>
<img src="https://via.placeholder.com/400x800">
</figure>
</div>
<div class='hero-foot'>
<div class='box'>
hero-foot
</div>
</div>
</section>
</body>
</html>
First, I dont think many knows what bulma or hero-layout is, but if you want a background to be a picutre and fit the whole screen you should try it with this, this also should make the page be full width without scrolling:
CSS:
body, html {
height: 100%;
}
.bg {
background-image: url("your_background");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
If that doesnt work for you, you can try disabling scrolling:
overflow: hidden;
Related
I have a simple tag with a banner and a border at the bottom. How can I stop sliding these two elements on zooming? I was looking for a way to get the two elements intact on zoom in and out. Even after a few hours of search, i couldn't get the desired output. I tried this and one more post which says to change from px to em.
My html tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height= 160">
</div>
<div id="container-border">
</div>
</body>
css:
#header
{ padding:0 20px;
display:block;
margin:0 auto;
background: #D6D6D6 url(background.jpg) repeat-x;
height: 205px;
width: 1500px;
position: center;
}
#container-border {
width: 1538px;
height:900px;
margin-left:260px;
border-color: black;
border-width: 1px;
border-style: solid;
}
You first need to wrap the content in a containing DIV
HTML
<div class="site-content">
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height="160">
</div>
<div id="container-border">
</div>
</div>
Note the new DIV .site-content. This is where you would center the website content and control the website contents width.
Here's my codepen: https://codepen.io/arlcode/pen/aRpWZo
I would also recommend not using static width/height for mobile dynamic purpose. You're also going to want to use classes more then ID's because ID's are specific but classes allow you to manipulate multiple DIVs at once.
I have a row with a certain height (e.g. 600px) and would like fit an img (size 1920x1080) into this row, stretching responsively 100% to the row width but not exceeding the height.
In other words, only 600px of the height of the image should be shown (the rest can be cut off, hidden, etc.), and it should remain responsive to the row width. To illustrate, only the part within the red borders should show:
The problem I am having is that "img-fluid" always fits the image to the smaller height of the container, and thus shrinking the width to keep the aspect ratio. Without img-fluid, or adding a fixed height to the image, the aspect ratio gets lost and the image is "squeezed" into the row-container. My code:
.img-400 {
height: 400px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<div class="row img-400">
<div class="col-12">
<img src="https://image.ibb.co/iG8OSb/dogs.jpg" class="img-fluid" />
</div>
</div>
</div>
Note I tried this one: Constraining image height with bootstrap responsive image? but didn't work, it keeps scaling the img out of the container.
the above solution works if the .img-fluid is not manipulated:
.img-400 {
height: 400px;
overflow: hidden;
}
Hi try this one,
.img-400 img{ width: 100% ; }
Hope this helps :)
To achieve your image fitting into a specific height, you can use the open source library bootstrap-spacer via NPM
npm install uniformimages
or you can visit the github page:
https://github.com/chigozieorunta/uniformimages
Here's an example of how this works using the "unim" class (you'd require jQuery for this):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="uniformimages.css" rel="stylesheet" type="text/css"/>
<script src="uniformimages.js" type="text/javascript"></script>
</head>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<a href="product1.html">
<img src="image1.jpg" class="unim" height="100"/>
</a>
</div>
</div>
</div>
</section>
</body>
I am new to HTML , CSS and I want to add two vertical lines on the both sides (left and right) of the html page.
A bit of help would be very much appreciated...Thanks very much indeed
Edit: the code has now been added
<!doctype html>
<html lang="en">
<head>
<style>
#button1{
width: 300px;
height: 40px;
}
#button2{
width: 300px;
height: 40px;
}
#link1{
font-size: 33px;}
#pic1 {
position:fixed;
left:30%;
top:30%;
margin-left:-382px /*half the width*/
margin-top:-370px /*half the height*/
}
</style>
<meta charset="utf-8">
<meta name="Homepage" content="Starting page for the survey website ">
<title> Survey HomePage</title>
</head>
<body>
<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
<button type="button home-button" id="button1" >Home</button>
<button type="button contact-button" id="button2">Contact Us</button>
LogIn
<img src="homepagepic.jpg" alt="homepagepic" id="pic1" style="width:400px;height:350px">
</body>
</html>
You can try creating a div container in your body and setting the borders, something along these lines:
<body style="width:100%">
//you can set the div-width to 100% too, I'm setting it to 95% so you can see it.//
<div style="width:95%;border-left:1px solid #000;border-right:1px solid #000;">
Page contents go here
</div>
</body>
Preview: http://jsfiddle.net/pbj4xxh0/
I'm trying to follow a Bootstrap tutorial but the first div I'm creating, that should be spanning the entire width of my browser/device, seems to be limited at ~1000 pixels. Any ideas as to why this is?
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing the Bootstrap 3.0 Grid System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
.col-xs-12 {
height: 100px;
background-color: blue;
color:white;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
</body>
</html>
Thanks in advance for any help.
If you're using the latest 3.1, you can use the container-fluid class instead of container like this..
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
3.1 full width: http://www.bootply.com/116382
For Bootstrap 3.0.x you'd need to use a custom container like this...
.container-full {
margin: 0 auto;
width: 100%;
}
3.0 full width: http://www.bootply.com/107715
The container class has a width specified depending on the media query. Your content is within this div so its width is based upon it.
You can see this in the dev tools in all major browsers, find that element and view the CSS styles/properties.
I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).
I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.
Here's what it looks like right now: (it's just a test page for the layout)
Here is the code for it:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Baileysaurus -- Dinosaurs && Logic in your face!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<LINK href="header.css" rel="stylesheet" type="text/css">
<LINK href="forum.css" rel="stylesheet" type="text/css">
<!-- jQuery (Bootstrap requires jQuery!) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap -->
<LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- A file of PHP utility functions -->
<?php
include 'functions.php';
?>
</head>
<body>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<div id='background' class='row-fluid'>
<div class='span12'>
<div id='site-column' class='row-fluid span10 offset1 column-wrap'>
<img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />
<hr>
<p>
Put a blog here!
</p>
</div> <!-- END of outermost span12 div -->
</div> <!-- END - "site-column" div -->
</div> <!-- END - "background" div -->
</body>
</html>
CSS
html, body
{
height: 100%;
margin: 0;
}
#background
{
position: absolute;
top:0;
bottom: 0;
min-height: 100%;
min-width: 100%;
background-color: Gainsboro;
}
#site-column
{
top: 0;
bottom: 0;
min-height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background-color: white;
}
.column-wrap
{
overflow: hidden;
}
I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long.
Anyone have any ideas on what I'm missing?
You should also be able to add the following CSS:
.span12 {
height:100%;
}
Try to make your outer <div> to extend to the bottom of the page.
So try this in the css:
.row-fluid
{
position:absolute;
bottom:0;
}
And I'm not sure but you may have to move your
<script src="bootstrap/js/bootstrap.min.js"></script>
line to the <head> part of your page.