I'm trying to learn designing a website.
Is there any way I can set my whole page width to 1000px with the current responsive sticky footer I have?
If possible, on top of the condition mentioned above, I want the left and right div to be horizontally align and the div will become vertical align when the screen collapse.
Here is my html/css code:
JSFiddle
Add max-width:1000px; to the .wrapper class and make the .content class float:left
.wrapper {
margin: 0;
height: auto;
max-width:1000px; /*add this line*/
}
.content {
background-color: slateblue;
width: 500px;
float:left; /*add this line*/
}
Demo at http://jsfiddle.net/Sp2ZW/
you mean something like this?:
http://jsfiddle.net/S3hMH/1/
html, body {
margin: 0 auto;
display: table;
height: 100%;
width: 100%;
width: 1000px;
}
.content {
background-color: slateblue;
width: 500px;
display: inline-block;
float:left;
}
Fiddle
If you are relatively new to responsive design i suggest using a framework as
Foundation
bootstrap
Coming to your questions.
Ya You can set your page-width to 1000px.
#wrapper{
margin: 0 auto;
width: 100%;
max-width: 1000px;
}
.content{
width: 50%;
float:left;
}
#media screen and (max-width: 480px) {
.content{
width:100%;
}
}
Content will occupy 100% width and stacks horizontally if the screen resolution is less than 480px because of the query above.Using % width helps you when designing responsive web pages
Related
I am new at HTML and CSS and I want to make a responsive header that contains:
logo picture with margin-left in pixels when full resolution
pogo picture must have it's full size when full resolution
navigation menu with 6 and width of 1500 when full resolution
No Bootstrap. What are your suggestion to accomplish that? What I have made so far is not responsive, on full size (width:1920px) measures are fine and it looks exactly how it should, but when I try to resize browser it is not in one row, even if I declare that div "inner" that contains them is width:100%, and both of them are also width:100%.
Code is something like this:
.inner{
width:100%;
}
.navigation {
display: inline-block;
float: right;
text-align: center;
padding-top:47px;
padding-bottom:27px;
max-width:1555px;
width:100%;
}
.navigation li{
display: inline-block;
width: 16%;
}
.navigation ul{
max-width: 1500px;
}
.wrapper-logo{
display: inline-block;
max-width:365px;
width:100%;
}
.small-logo{
max-width: 143px;
width:100%;
padding-left:220px;
}
<div class="inner">
<div class="logo-wrapper">
<div class="small-logo">
<img src="https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F24%2F31%2Fb7bd820a-ecc0-4170-8f4e-3db2e73b0f4a%2F550250_artsigma.png?auto=format&ch=Width%2CDPR&w=250&h=250">
</div>
</div>
<div class="navigation">
<ul><li>......</li></ul>
</div>
</div>
Use media queries.
Here goes my Desktop resolution css
#media only screen and (max-width: 600px) {
/* Here goes my Mobile resolution css */
body {
background-color: lightblue;
}
}
You'll want something like the following for bullet 1
.small-logo {
margin-left: 10%;
}
#media only screen and (max-width: 600px) {
.small-logo {
margin-left: 0;
}
}
Bullet 2 I'm guessing should say Logo not Pogo. Based on the code provided .small-logo is your only logo so you'd do something like this.
.small-logo{
width: 100%
}
What does the navigation menu have 6 of? Columns? Buttons? Unicorns?
Set the inner class or preferably an id of the largest content div to the max I generally like to center the content and give some side white space so I put the basics in the comments.
.inner{
max-width: 1500px;
width: 100%;
/*width: 85%;
margin: auto 0;*/
}
Are you trying to have logo-wrapper and navigation horizontally aligned?
display: inline-block;
My page has a max width of 1280px. The body is centered on larger screens using margin: 0 auto; Now I want to place an element in the bottom right corner. That has to be fixed as it should scroll with the content. On screens larger than 1280px the element should stay on the corner of the centered body and not stick to the right side of the window.
The element should stick there, independent of the current viewport width.
I've solved this by using a combination of media-query and CSS3-calc operation. It feels like an overkill for this simple task but I can't find a solution simpler as mine. Here is some sample css (I've changed the maximum page width to 500px here):
body {
max-width: 500px;
height: 1000px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
div {
position: fixed;
right: 0;
bottom: 0;
height: 30px;
width: 30px;
margin: 0;
padding: 0;
background-color: red;
}
#media all and (min-width: 515px) /*max body width + (element width / 2)*/ {
div {
margin-right: -webkit-calc((100% - 500px) / 2);
margin-right: -moz-calc((100% - 500px) / 2);
margin-right: calc((100% - 500px) / 2);
}
}
JSFiddle: https://jsfiddle.net/nh95dc8u/
My JSFiddle shows exactly what I want. I'm just asking if this is possible to achieve with more "standard-CSS" (I'm not really sure about calc across different browsers)? What could be a simpler solution?
#media all and (min-width: 515px) {
div {
right: 50%;
margin-right: -250px;
}
Moves fixed div to 50% of window width and then to 50% of container width
https://jsfiddle.net/nh95dc8u/5/
You could also do it with just one more element and a bit of CSS.
As example, your HTML could be:
<div class="content">
Your content here
<div class="fixed-wrapper">
<div class="fixed">HEY</div>
</div>
</div>
And then, the CSS:
.content {
max-width: 500px;
margin:0 auto;
position:relative;
}
.fixed-wrapper {
position:absolute;
bottom:0;
right:0;
width:30px;
height:30px;
}
.fixed-wrapper .fixed {
position:fixed;
width:30px;
height:30px;
bottom:0;
background:red;
}
By adding position:relative to .content and using a wrapper to the fixed element, you can position it where you would like. As an element with no specified position renders where its parent is, you can just omit the right property from the fixed element and let the wrapper position it for you.
For an example, see this FIDDLE.
You can get rid of both calc and the media query by wrapping it in another div, which is horizontally aligned like body, and has the same width as body, but is fixed and sticks to the bottom of the screen.
Inside that div, you can then float the red little box to the right.
Although the outer div only seems to behave like body with max-width: 100% and width set to body's max-width + 2 (for the left and right border):
body
{
max-width: 500px;
height: 1000px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
.hack
{
position: fixed;
bottom: 0;
max-width: 100%;
width: 502px;
margin: 0 auto;
padding: 0;
}
.box
{
height: 30px;
width: 30px;
margin: 0;
padding: 0;
background-color: red;
float: right;
}
<body>
This is the centered body
<div class="hack">
<div class="box">E</div>
</div>
</body>
Updated fiddle.
Tested and working in Chrome 44 and IE 8.
Remove media-query also it will work,
Remove and see the output again
Output
Try this in simple css -
.main{
width: 500px;
height: 1000px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
.footer {
position:fixed;
bottom: 0;
height: 30px;
width: 30px;
left:510px;
background-color: red;
}
Here is the fiddle - https://jsfiddle.net/maL5nvbu/
I have 2 divs that I'm setting up to be next to each other in the desktop version of my site, and on the mobile / tablet version, I would like the right div to be on top and the left div to be underneath, with both of them centered inside their parent div. I have it set up like this:
<div id="right-top">right & top</div>
<div id="left-top">left & bottom</div>
And my CSS is like this:
#right-top {
position: relative;
float:right;
width: 430px;
height: 300px;
max-width: 100%;
display: block;
background-color: #ddd;
margin: 0px auto;
}
#left-top {
position: relative;
float:right;
width: 430px;
height: 300px;
max-width: 100%;
display: block;
background-color: #666;
margin: 0px auto;
}
They're floated right so that I can have the right div on top in smaller browser windows. How do I get them to be centered on smaller browsers, rather than aligned to the right side?
I would do it using mobile first design
That means defining how it will look first on small devices and progressively adding more rules for bigger screens
<div class="my-div" id="right-top">right & top</div>
<div class="my-div" id="left-top">left & bottom</div>
So we define the common rules (most of the stuff) between the 2 divs to a class (.my-div), the specifics to ids (#right-top, and #left-top)
And set a breakpoint in 860px (430px times 2 for each div), and only then, float the divs to the right.
.my-div{
width: 430px;
height: 300px;
max-width: 100%;
display: block;
margin: 0 auto;
}
#right-top {
background-color: #ddd;
}
#left-top {
background-color: #666;
}
#media only screen and (min-width: 860px) {
.my-div{
float: right;
}
}
You can test it here
You can use #media queries for responsive layout.
For eg:
#media (max-width: 769px){
#right-top,#left-top{
float: none;/*unset the floated div*/
}
}
demo
Hi so i have a line that i want to put on my website. Although i have tried a few things like z-index, position: fixed ect. i can't seem to get the line to span the whole browser length, while still having the margin-auto width for the website 900px;. Is their anyway to "override" the margin width of 900 and for the line to span the whole website while being static. I have also tried taking the div out of the body tags and that didn't seem to work either.
.line {
position: static;
background-color: #d1d1d1;
width: 100%;
height: 1px;
margin-top: 20px;
}
body {
margin: 0px;
padding: 0px;
margin: 0 auto;
width: 900px;
}
If the line is part of your body then width:100% will make it 900px (the width you set on your body)
They way around is to set body width to 100%, and then create a wrapper (with width 900px) for your main content and a separate line div for the line across the full width.
Added a fiddle: http://jsfiddle.net/xrqezvxz/
your css would look something like:
body {
margin: 0px;
padding: 0px;
width: 100%;
min-height:500px;
}
.line {
position: fixed;
background-color: #d1d1d1;
width: 100%;
height: 5px;
margin-top: 20px;
}
.content_wrapper
{
width:900px;
background-color:red;
min-height:500px;
height:500px;
margin:0 auto;
}
I have problem in rescaling my page according to the screen. I am doing coding in my laptop, where it seems ok, But when I open this page on desktop with wider screen it doesn't look nice.
div.fullWidth {
width:100%;
height:100%;
}
This is what I am trying in my CSS file, but it is also not working.
Use CSS3 and stay trouble free :
div
{
resize:both;
overflow:auto;
}
(or) without CSS3
Just drop you width and :
body{
position: absolute;
margin: 0 auto;
}
height: 100% will not work, try using 100vh
div.fullWidth {
width:100%;
height:100vh;
}
Browser support here
if you create an adaptive design that will help you bootstrap framework, but if you create a fixed design is the main wrapper is necessary to specify the width like this
<div class="fullWidth"></div>
.fullWidth {
display: block;
background: #ddd;
margin: 0 auto;
height: 500px;
width: 100%;
min-width: 960px;
}