I have tried width 100% but it didn't make it responsive. Here is link of what I'm trying to make responsive. It is not responsive. Help codepen link
div {
background:url(https://i.stack.imgur.com/EinaJ.png) top center;
width:620px;
margin:auto;
padding:40px 40px 30px;
height:590px;
position:relative;
display:flex;
flex-flow:column;
justify-content:center;
}
img, p, footer {
padding:5px;
margin:0;
background:pink
}
img {
margin:auto auto 0;
}
footer {
bottom:30px;
right:45px;
margin:auto 0 0;
border-radius:0 0 0.25em 0.25em ;
background:rgba(0,0,0,0.2);
}
<div>
<img src="">
<p>here is</p>
<footer>footer</footer>
</div>
The reason this is not responsive is because you have set the div's width and height to a specific pixel. Therefore it is not able to adjust.
Try changing the pixel to a percentage:
For example:
width: 50%;
height: 100%;
:root {
/*the percentage of screen width occupied by a block. 1 = 100% */
--percent: .9;
}
div {
background: url(https://i.stack.imgur.com/EinaJ.png) top center;
background-size: cover;
/* for old browsers */
width: 90vw;
height: 113.61516034vw;
/* for new browsers */
width: calc(100vw*var(--percent));
height: calc((100vw*var(--percent))*866/686);
box-sizing: border-box;
margin: auto;
padding: 40px 40px 30px;
position: relative;
display: flex;
flex-flow: column;
justify-content: center;
}
img,
p,
footer {
padding: 5px;
margin: 0;
/* see me */
background: pink
}
img {
margin: auto auto 0;
}
footer {
bottom: 30px;
right: 45px;
margin: auto 0 0;
border-radius: 0 0 0.25em 0.25em;
/* see me */
background: rgba(0, 0, 0, 0.2);
}
body {
background: #777;
}
<div>
<img src="http://lorempixel.com/200/150" />
<p>here is</p>
<p>some line</p>
<p>of</p>
<p>text</p>
<footer>footer</footer>
</div>
I see what you're trying to do.You're trying to have the div in the middle center and responsive.Set margin:0 auto; and width:50%;.Get rid of other bits of codes in the div.To make it responsive to mobile screen do:
#media only screen and (max-width:set_your_max){
div { width:50%; }
}
Related
At the top level of my website layout are 4 div tags.
The first one is a full width header section, with css:
#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}
At the bottom is a full width footer:
#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
On the left is my main menu section:
#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.
My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My css is:
#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
width 80% works OK for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.
What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!
Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?
Using CSS3 flex
* { box-sizing: border-box; margin: 0; }
#parent{
display: flex;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
flex: 1; /* You... fill the remaining space */
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Using CSS3 calc
width: calc(100% - 170px);
Example:
* { box-sizing: border-box; margin: 0; }
#aside {
background: #1CEA6E;
width: 170px;
float: left;
padding: 24px;
}
#main {
background: #C0FFEE;
width: calc(100% - 170px);
float: left;
padding: 24px;
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using float: left; and overflow
* { box-sizing: border-box; margin: 0; }
#aside{
width: 170px; /* You, be fixed to 170 */
float: left; /* and floated to the left */
padding: 24px;
background: #1CEA6E;
}
#main {
background: #C0FFEE;
padding: 24px;
overflow: auto; /* don't collapse spaces */
/* or you could use a .clearfix class (Google for it) */
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using style display: table;
* { box-sizing: border-box; margin: 0; }
#parent{
display: table;
border-collapse: collapse;
width: 100%;
}
#parent > div {
display: table-cell;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Is this what you are looking for? You don't need any css3
Dont need any css3
.wrapper {
width: 800px;
height: 800px;
background-color: blue;
}
.content {
width: auto;
height: 100%;
background-color: yellow;
}
.menu {
width: 170px;
height: 100%;
float: left;
background-color: red;
}
<div class="wrapper">
<div class="menu">Menu</div>
<div class="content">
Aside
</div>
</div>
You can use 'calc' function supported by all modern browsers and IE9+, or switch to flexbox (supported by IE11+)
See this pen: https://codepen.io/neutrico/pen/MyXmxa
width: calc(100% - 170px);
Keep in mind that all borders matter unless you set 'box-sizing' to 'border-box' (or just remove these borders and apply them on child elements).
Website: ifnrussiacisforum.ru
It is 100% width on PC, but there's some empty space on mobile, likt this:
The code is:
HTML:
<div class="footer">
<div class="container">
<img src="images/logo-img.jpg" alt="beeboss" />
</div>
</div>
CSS:
.footer {
height: 60px;
width: 100%;
background: #000;
}
.footer .container {
width: 1003px;
margin: 0 auto;
}
.footer .container img {
margin:19px 0px 0px 20px;
}
Use this CSS code
CSS:
.footer .container {
width: 100%;
margin: 0 auto;
}
.footer .container img {
margin:19px 0px 0px 20px;
}
Solved the issue with this code:
html, body {
min-width: 1003px;
}
Weave: http://kodeweave.sourceforge.net/editor/#58fb912e2d456f902a77b8ebc76aa515
By default the body tag has a margin. You can fix that by either incorporating Normalize into your CSS or remove the margin in from your body.
EDIT: No wonder why your width was so grotesque you defined 800px and 1003px on most of your containers. Plus your CSS fairly very WET!
Change the following classes width to 100%
.footer .container
.main
.header
Then replace min-width/change your width from 800px && 1003px to 80% for the following classes.
.extra-bally
.request-form
.link
.plashka
.bally
.mac
Also focus on making your code more DRY.
body {
margin: 0;
}
.footer {
height: 60px;
width: 100%;
background: #000;
}
.footer .container {
width: 100%;
margin: 0 auto;
}
.footer .container img {
margin: 19px 0 0 20px;
}
<div class="footer">
<div class="container">
<img src="https://forums.gota.io/images/smilies/smile.png" alt="beeboss" />
</div>
</div>
I wrote this code in order to understand what does it margin, padding and position for the below code. the question are between these /* */. Thanks again.
html {
width: auto;
/* Does auto apply the background-color automatically to the display screen */
height: 100%;
/* 100% means 100% of the display browser??*/
margin-left: 1%;
margin-right: 1%;
/*does changing the value of the margin will change anything in the page*/
margin-top: 1%;
margin-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
padding-top: 1%;
Padding-bottom: 0%;
border: 1px solid black;
background-color: red;
}
body {
background-color: #00FF00;
width: 50%;
/* does it means 50% of the width stated above in the html (auto)*/
height: 50%;
/*does it means 50% of the height of the display browser or we have to add the padding-top(1%) in html*/
position: fixed;
top: 25%;
/* does it mean that the body is shifted to below 25% of it's heigh or 25% of the display browser? */
left: 25%;
/* what is the different if i give 0% to left and i changed the margin-left value to 25%*/
border: 2px solid black;
margin-top: 0px;
margin-left: 0px;
}
header {
width: 50%;
height: auto;
top: 25%;
left: 25%;
/* what does it mean here the value given to top and left??*/
border: 2px solid black;
margin-top: 10%;
margin-left: 25%;
}
h1 {
margin: 5px;
color: blue;
}
<body>
<header>
<h1> MY First webpage </h1>
</header>
</body>
Centering an item within the body is a simple combination of width and margins.
The margin applied below. margin: 0 auto; is shorthand for:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
Centered div.wrapper width a width of 960px
body {
margin: 0; /* REMOVE THE MARGIN FROM THE BODY */
}
.wrapper {
width: 960px; /* GIVE THE WRAPPING ELEMENT A WIDTH */
margin: 0 auto; /* USE MARGIN (0 AUTO) TO CENTER THE WRAPPER ON THE SCREEN */
}
/* demo styles */
#header {height: 100px; background: orange}
#content {height: 800px; background: grey}
#footer {height: 150px; background: pink}
<div class="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
The difference between HTML and Body has been answered in this StackOverflow post.
Yes the body contains everything.
If I understand your question all you should need to do is mess with the body in your .css
body {
margin: XXXpx
}
Replace the X's with a number that best suits what you are after
Not very good at this just starting but I just can't center these divs can someone HELP :/ I have looked online but have not found anything that will work with it... i'm only 12 and it's all quite new to me.
*{
margin: 0px;
padding: 0px;
}
#Title{
height:75px;
width:60%;
margin-top:5%;
background-color:black;
display: table;
margin-left: auto ;
margin-right: auto ;
}
#Wallpaper{
width:15%;
height:250px;
background-color:black;
display: inline-block;
margin-top:5%;
margin-left: auto ;
margin-right: auto ;
float:center;
}
#Logo{
width:15%;
height:250px;
background-color:black;
display: inline-block;
margin-top:5%;
margin-left: auto ;
margin-right: auto ;
float:center;
}
#YoutubeBanner{
width:15%;
height:250px;
background-color:black;
display: inline-block;
margin-top:5%;
margin-left: auto ;
margin-right: auto ;
float:center;
}
Here is one way of doing this, it's responsive and fluid.
DEMO: https://jsbin.com/puhixo/1/
CSS
body,
html {
margin: 0;
padding: 0;
background: #fff;
font: 1em/1.5 sans-serif;
}
.row,
.column {
box-sizing: border-box /*so padding and borders are included in width */
}
.row {
word-spacing: -1em; /* fix the inline block extra space issue */
letter-spacing: -1em; /* fix the inline block extra space issue */
overflow: hidden;
text-align: center;
padding: 0 20px;
width: 100%;
max-width: 1200px;
margin:0 auto;
}
.column {
vertical-align: top;
word-spacing: normal; /* reset child */
letter-spacing: normal; /* reset child */
display: inline-block;
border: 1px solid red;
width: 100%; /* the size UNDER the min-width in the media query*/
padding: 10px;
text-align: left; /* reset child */
}
#media (min-width:500px) {
.column {
width: 33.333%;
max-width: 250px; /* the max-width */
}
}
HTML:
<div class="row">
<div class="column">
Column 1 text goes here. Text goes here for column 1.
</div>
<!--/.column -->
<div class="column">
Column 2 text goes here. Text goes here for column 1.
</div>
<!--/.column -->
<div class="column">
Column 3 text goes here. Text goes here for column 1.
</div>
<!--/.column -->
</div>
<!--/.row -->
You can also write code like this.
html
<center>
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
</center>
css
div
{
display: inline-block;
border: 1px solid red;
}
div.wrapper {
-webkit-column-count: 3;
/* Chrome, Safari, Opera */
-moz-column-count: 3;
/* Firefox */
column-count: 3;
width: 80%;
border: 1px solid black;
text-align: center;
margin: 0 auto;
}
<div class="wrapper">
<div>Hi you</div>
<div>Yes you</div>
<div>Yup</div>
</div>
Would something like this work for you?
Soooooo I'm making a sticky footer in Css. It doesn't work the way I want it to. The footer sticks to the bottom, but I also want 100% height for the page. This doesn't work, and I've tried a lot. Currently, the footer gets in the way of the container, and they overlap. If i give the container margin-bottom: 70px;, it creates extra unwanted space when the content is very small, making an unnecessary scrollbar.
Here's my code:
<html><head>
<style type='text/css'>
body {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 800px;
height: auto !important;
min-height: 100%;
}
.bold-show {
font-family: Helvectica, sans-serif;
font-size: 96px;
background-color: rgba(0, 0, 0, 0.95);
color: #eeeeee;
padding: 50px;
}
#footer {
position: relative;
height: 70px;
width: 100%;
text-align: center;
display: table;
margin-top: -70px;
background-color: rgba(0, 0, 0, 0.9);
color: #eeeeee;
}
#footer div {
display: table-cell;
vertical-align: middle;
}
</style>
</head><body>
<div class='container'>
<div class='bold-show'>
Donuts. Food for thought. This is my place, this fox will guide you. Random filler text for the win.
</div>
</div>
<div id='footer'>
<div>
We support a free and open internet.
</div>
</div>
</body></html>
Also, this is not the actual site. Just testing to implement on real site.
I think that this is what you are looking for:
<div id="wrapper">
<header></header>
<div id="main"></div>
<footer></footer>
</div>
body, html, #wrapper { height: 100%; } /* Create space for elements to be 100% */
#wrapper { display: table; } /* Create a table-structure */
#wrapper > * { display: table-row; } /* All direct children behave as rows */
#wrapper > header,
#wrapper > footer { min-height: 100px; } /* These must be at least 100px */
#main { height: 100%; } /* Let the mid section fill up the remaining space */