I looked for already asked questions like here and here but couldn't get working.
I would like to make something similar to image down below but an struggling to make sect-a and section-b size of full window. It either is only full sized or extends below the window area.
I am using mini css for grids and below is my code
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!doctype html>
<html lang="en">
<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/mini.css/3.0.1/mini-default.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navigation">
<h1>Navbar</h1>
</nav>
<section class="section ">
<div class="container">
<div class="row" style="min-height:100vh; min-height: -webkit-fill-available;box-sizing: border-box;">
<div class="col-sm-12 col-md-8 col-lg-8" style="background-color: aqua;">
<input class="button" type="submit" value="sect a"
style="border-radius:2rem; padding: 0.5rem 3rem 0.5rem 3rem;">
</div>
<div class="col-sm-12 col-md-4 col-lg-4" style="background-color: yellow;">
<button>sect b</button>
</div>
</div>
</div>
</section>
</body>
</html>
How can I make sec-a and sec-b available remaining full screen and not overflow it.
If i understand correctly, you want to make section a and section b as high as your window, no more, no less.
There are 2 ways to do this:
you can set the html and body to be 100vh, or 100 units ot "View height", which is the height of your inner browser window.
You can set the display of the body to flex and flex direction to column, that way, when you set the height of the sections to "100%', or their flex grow to "1". they will grow to be the full size of the remaining space under the navbar
if you wish to add something below these sections, such as more sections,t he above method won't work.
Then you can either:
calculate the nav's height and set the height of sect a and sect be to be (100 vh - the nav height)
put the nav and the sections in a single flex container, that has height of 100vh, and then add more content below it.
I had a similar issue and fixed it by adding those lines in my css:
*{
margin: 0;
padding: 0;
}
After adding this, I was able to use the the whole space.
Related
I am developing one website where the requirements are 1920 * 1080px. There are five sections in total and each of them would be the same specs (1920 in width and 1080 in height). I did not use bootstrap container as it's width is 960px and also using container-fluid I am not able to get the expected output. So I set the width and height of each div in scss and the page looks good on 1920px screen size. But when I open it in my laptop, it gets cropped really bad. I am also using multiple images, overlays with position and z-index properties.
The html structure is as below:
<div id="page_index">
<div class="wrapper">
<div id="one">
<div class="row">
<div class="col-xs-12 text-center">
<!-- Here are the contents -->
</div>
</div>
</div>
<!-- div id=two, three, four, five goes here -->
</div>
</div>
Here are the examples of one div where I set the height and width:
#one {
background-color: $g_color_blue_promotion;
width: 1920px;
min-width: 100%;
margin: 0 auto;
height: 1080px;
font-family: 'Open Sans', sans-serif;
position: relative;
}
In this case, what should be the best to make it fit for both screen sizes? Note that, this page is not required to be responsive but at least, the user should be able to view it on both of the screen sizes.
<meta name="viewport" content="width=device-width, initial-scale=1">
use this on yous JS file header.
I want to realize a 'reponsive' box (having a fix width) containing a logo (having a fix width) and an infobar (taking the rest width of the main box). The width of the infobar is therefor calced with calc() As the infobar would be useless if getting to small it also contains a min-width.
This works well until the screen width gets so small that the flexbox has to break into two rows. Now there are two problems in my design, i would like to solve:
1) I want the logo in wrap-row 1 to be centered horizontally
2) I want the infobar taking the whole width of wrap-row 2
(In my solution the logo sticks on the left of the first wrap-row and the infobar in the second wrap-row lacks the size of the logo, which I subtracted.)
Is there a solution using flexboxes?
Code (HTML):
<!DOCTYPE html>
<head>
<link rel=stylesheet type="text/css" href="test.css">
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body>
<div class="box wrap" align="center">
<div class="logo">logo</div>
<div class="infobar">infobar</div>
</div>
</body>
</html>
Code (test.css):
div.wrap{margin:0 auto;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-wrap:wrap;display:flex;flex-wrap:wrap}
div.box{min-height:100px;max-width:1200px}
div.logo{width:200px;min-height:128px;margin-bottom:10px;margin-right:10px;background-color:#456789}
div.infobar{width:calc(99% - 215px);min-width:320px;min-height:128px;text-align:left;padding-left:3px;padding-top:3px;margin-bottom:10px;background-color:#ABCDEF}
You need to enable auto growing to your infobox, so it fills the remaining space, and centering your whole content.
div.infobar {
flex-grow: 1; /* Fill the remaining space */
}
div.wrap {
justify-content: center; /* Center whole content */
}
Your whole code could look like this.
I am having trouble getting my 960.gs to take up the entire width of the browser. I want the grid to be 100% on resize, that is if I scroll out the text will appear smaller and take up less lines but the grid will still take 100% of the width.
There is this question here When using grid 960, can I still have a 100% width header section? And the answer was to set the top part to 100%. I added the code but this has no effect, neither does setting the body's width to 100% and all divs, ect. What am I doing wrong? Here is the code:
<!doctype html>
<html>
<head>
<title>My Fragment</title>
<meta charset="utf-8" />
<!-- Symbols rendered -->
<meta name="value" />
<!-- Do not need to close -->
<link rel="stylesheet" href="css/960_12_col.css">
<style>
body {
background:green;
}
div {
background: white;
}
.grid_4 {
height: 100px;
}
</style>
</head>
<body>
<div class="header" style="width:100%;"></div>
<div class="mainWrapper container_12">
<div class="grid_4" style="background:red">sdfds</div>
<div class="grid_4" style="background:blue">sdfs</div>
<div class="grid_4" style="background:yellow">sdfs</div>
<div class="clear">sdfds</div>
</div>
</body>
</html>
But this gives me the following result:
I want to see no green space on left side of the red column and the right side of the yellow column but this is not the case. How do I get rid of the space either side?
(Please note I am new to css and Html and have been following the learn html in 30 days, and whatever else I find online.)
First of all - <div class="header" style="width:100%;"></div> is not wrapping your container.
Second: add width: 100% to your mainWrapper class instead of .header, but that i know there is hardcoded widths in 960 grid system, so your columns with .grid_4 will be still width: 300px.
Try with another Grid System with fluid layouts, e.g.: http://www.designinfluences.com/fluid960gs/
So you can see what I currently have here: https://steelcowboy.me
Basically what I want is a white content area, grey on the sides and my blue navbar. I don't want any grey atop or below the white part (i.e. I want grey on the sides only, white in the middle). However, I'm not sure what I need to do -- I tried different display options for the container element, but the one that worked (flex) then messes up all the content inside. I feel like this is a really simply fix, but can't quite seem to get it. Anyone have an answer? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Steelsite</title>
<meta charset="utf-8">
<link href="/css/materialize.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#3f51b5">
<style>html,body { height:100%; margin:0; } a {font-weight: bold;} body {background-color:#e0e0e0;} img {max-width:100%; height:auto;} </style>
</head>
<body>
[navbar in here]
<main>
<div class="container white">
<h3 class="center-align">Welcome to the site of James Heald</h3>
<div class="row">
<div class="col s12 m6">
<div class="flow-text" style="font-size: 125%;">
<p>I'm a teen who loves bike riding, photography, travel, outdoor activities and computers! In September I will be attending Cal Poly SLO, majoring in Aerospace Engineering.</p>
<p>This site, currently under construction using the Materialize framework, is proudly hosted on the Raspberry Pi 2, pictured below.</p> </div>
</div>
<div class="col s12 m6">
<div class="center-align">
<img style="padding-top:1%; padding-bottom:1%;" class="responsive-img materialboxed" src="pictures/pi2.jpg" alt="The new home of steelcowboy.me!"></div>
</div>
</div>
<div class="divider"></div>
<h5>From running "fortune":</h5><p class="flow-text" style="font-size: 115%;">Real Users find the one combination of bizarre input values that shuts
down the system for days.
</p>
<div class="container center-align">
<img src="http://imgs.xkcd.com/comics/tags.png" class="responsive-img">
</div>
</div>
</main>
<script src="scripts/google.js"></script>
</body>
</html>
The problem is this selector:
h3 {
margin: 1.46rem 0 1.168rem 0;
}
It is setting a top margin which is pushing down the rest of the container.
If you set margin-top: 0 to that specific element, it should remedy the issue.
The space is contributed by your heading, remove the top margin on it and you're good. The solutions below illustrates how to fix them using inline styles but you should really consider using css classes :)
Solution 1: remove top margin on the h3, either inline or via a css class.
<h3 class="center-align" style="margin-top: 0px;">Welcome to the site of James Heald</h3>
Solution 2: Add a top padding to the container, either inline or via a css class. This might be a better approach as it does not interfere with your h3 classes, since you might want the top margin elsewhere on your site.
<div class="container white" style="padding-top: 10px;">
To make the container span the whole height, make sure all parent elements has height: 100%. e.g.:
<main style="height: 100%">
<div class="container white" style="padding-top: 10px; height: 100%">
...
Solved by adding overflow:auto to container
I am new to bootstrap and I am having an issue trying to position an Image on the page. I am trying to use bootstrap grid to position the image in the center of the page. I am familiar with html5 and I know there are other ways of centering the image;however,I was wondering if this can be done using bootstrap's grid system. The reason for this example, is that I have other image position things I would like to use bootstrap for.
When I run the example below on a Windows 8 desktop or iPad the image is extremely small(i.e. almost like an icon) and resides in the upper left corner; however, when I run this on my Nexus 5 the image is sized correctly and is centered. I have included some sample html code of what I am using.
Again, I am some what new to bootstrap so it could be something simple. Any input or advice is greatly appreciated
Thanks in advance for your help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autoroute Login</title>
<meta name="viewport" content="width=device-width,
height=device-height,initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/
3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/
css/bootstrap-responsive.css">
<style>
#media (min-width:#screen-sm-min){
#main-image{
height: 200px;
width:200px;
}
}
#media (min-width: #screen-md-min){
#main-image{
height: 350px;
width: 350px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2"/>
<div id="main-image" class="col-sm-8 col-md-8">
<img src="img/ar-main-image.jpg" alt="Autoroute Main Image"
class="img-responsive center-block"/>
</div>
<div class="col-sm-2 col-md-2"/>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/
jquery.min.js" > </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/
bootstrap.min.js"></script>
</body>
</html>
Bootstrap's column system is laid out on a base of twelve. For example, if you wanted two columns of equal width, you would have them both be .col-sm-6 because two columns with widths of 6 equals twelve. Likewise, you could have three equal .col-md-4 columns.
Bootstrap floats columns to the left by default, but also allows you to offset them by a specific number of columns: .col-md-offset-4
So, if you would like to have a Bootstrap div that is always centered, you can do that by setting it's width to any even number, subtracting that number from 12, and setting the offset to that number. So for a centered .col-2, you would give an offset of 5 because 5+5+2=12. For a centered .col-4, you would give an offset of 4 because 4+4+4=12. You need to account for the left (empty) columns, the center div with x columns width, and the right (empty) columns.
JSFiddle