This question already has an answer here:
How to change CSS of website if accessed through a mobile browser [closed]
(1 answer)
Closed 7 years ago.
I wanted to know how a html /css design can be made responsive so that (if that's what responsive means) the div are arranged according to the screen size(in case of desktop browser being resized manually at runtime).
for example :
i have div1, div2, div3 set as float left. they appear as 3 columns in my browser. Now if i resize(to a smaller size) my browser i want the div1 to come on top. div2 below it and div 3 below div2.
similarly, if i resize my web page fully i want the divs to again appear as 3 columns.
apart from the normal defalut behavior , is there any way through which changes can be specified separately?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="div1" style="width:500px;height:200px;background-color:red;float:left;"></div>
<div id="div2" style="width:500px;height:200px;background-color:yellow;float:left;"></div>
<div id="div3" style="width:400px;height:200px;background-color:green;float:left;"></div>
</body>
</html>
please any help would be greatly appreciated. I am completely new to responsive design layout.
This is mainly achieved with CSS3 Media queries. You can use a CSS frameworks and follow the grid system to reduce your workload.
CSS3 #media Rule
Frontend Frameworks
Twitter Bootstrap
Foundation
Semantic UI
Pure
Duplicate of following stack overflow questions
How do I make a website responsive?
How to create a responsive web design?
The basics of a responsive layout are the use of percentage insteed of pixels and adding breakpoints with media queries.
In your example, you have 3 divs floating so the css should look like this:
#div1, #div2, #div3 {
float:left;
height:200px;
}
#div1 {
background-color:red;
width:40%;
}
#div2 {
background-color:yellow;
width:40%;
}
#div3 {
background-color:green;
width:20%;
}
Always making the sum of all your floating widths 100%.
Then add a breaking point (or as many as you need) like this:
#media (max-width: 600px) {
#div1, #div2, #div3 {width:100%;}
}
where you tell your browser to change the css properties of your divs when window width is 600px or lower. In this case you make each div 100% width so they will stack as you want keeping the html order.
JSFIDDLE
You have to use percentage instead of fixed pixel-values. This is called "making the design fluid".
Have a look at this: https://teamtreehouse.com/community/pixel-to-percentage-conversion
There will be points (when the width becomes to small) at which you're layout doesn't work anymore. Then you use media-queries to re-structure your layout.
Related
I'd like to use a centered, single-column HTML/CSS layout similar to stackoverflow's for both, desktop and mobile use, i.e. very different screen widths and resolutions.
I'd like to avoid having to use code (client or server) to detect and handle devices differently (i.e. deliver different layouts / styles).
The layout
should be centered (currently using centered div using auto property for left and right margins - this requires a fixed width)
should be variable width depending on device screen width, i.e. a comfortable column width on desktop computer but full width on mobile
will have header bar that visually extends to the window edges (same as stackoverflow's) and a have footer that should be at the bottom of the page, even if there's not much content (for this, CSS Single-column layout centered fixed-width 100% height w header and footer may have an answer)
Can this be achieved based on a simple centered div such as the following or what is the state-of-the-art? The following is rendered tiny on Firefox for Android:
#center {
margin: 0 auto 0 auto;
width: 10em;
background-color: gray;
}
<div id="center">
Content div<br/>
<ul>
<li>should be centered</li>
<li>should be variable width depending on device screen width, i.e. a comfortable column width on desktop computer but full width on mobile</li>
<li>will have header bar that visually extends to the window edges and a have footer that should be at the bottom of the page, even if there's not much content (for this, https://stackoverflow.com/questions/23651942/ may have an answer)</li>
</ul>
</div>
Note I'm using 10em for the width (to make it fit in the snippet editor preview) - is there a more appropriate unit or additional properties for an "absolute" size to ensure readability (and sizing) on all screens?
Desktop:
Mobile:
The awswer you found already gave a big hint in what you should be using for this, namely display: flex;. Building on top of the fiddle provided there, you could do something like this:
Which is giving the main content column a 100% value of width in combination with a max-width of, let say, 768px. In this example flex-grow:1; is used to fill up the height completely but maybe not be necessary for your project.
html,
body {
height:100%;
padding:0;
margin:0;
width:100%;
}
body {
display:flex;
flex-direction:column;
}
#main {
flex-grow:1;
background:#f3f3f3;
max-width: 768px;
width:100%;
margin:auto;
}
header {min-height:50px; background:green;}
footer {min-height:50px; background:blue;}
<header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>
I am working on a webpage, and I want to use JavaScript to center some text (contained in a "p" with the display:inline-block attribute) when the text is shifted under everything else (on a smaller window). When the window size is big enough, I have the text on the right of the screen (where I want it for larger windows).
Basically, I have content on the left and right of the screen for bigger windows, but I want that content to become centered and vertical when the browser is smaller.
I've tried using .addEventListener() but my JavaScript knowledge is pretty limited.
Any thoughts? Does this make sense?
I see you're trying to do some sort of responsive design. You're better off doing this without any javascript.
You should look into Css Media Queries, that are meant to set specific css styles depending on the screen size:
#media screen and (max-width: 500px) {
Similar to your scenario, here's a sample showing the concept: http://jsfiddle.net/xkJ3G/
Resize the window and test it!
You can achieve desired effect using only HTML and CSS.
JSFiddle
HTML
<div class="outer">
<div class="A">A</div>
<div class="B">B</div>
</div>
CSS
div.outer {
width: 100%;
text-align: center;
}
div.A,
div.B {
width: 40%;
min-width: 250px;
display: inline-block;
}
Linebreak will be when width is lesser than min-width (in this example when 40% < 250px)
I've got a question about optimizing webpages... hmm, let me start over from the beginning.
HTML Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title></title>
</head>
<body>
<div id="header"> Text... </div>
<div id="body"> </div>
</body>
</html>
CSS Code:
#header
{
background-color: green;
width: 50%;
height: 25%;
left: 25%;
position: absolute;
}
#body
{
background-color: red;
width: 50%;
height: 55%;
left: 25%;
top: 25%;
position: absolute;
}
The problem is that whenever I minimize the window a bit, my divs shrinks together. That's not how I want it to appear. After figuring out a while how to solve this problem I came up with this "great" idea to make a div wrap that cover all the other divs.
So then my divs need a wrap right?
<div id="wrap">
<div id="header"> </div>
<div id="body"> </div>
</div>
#wrap {
width: 600px;
height: 800px;
position: absolute;
}
Now in my css code I need to set the px of height and width of the wrap div, right? Now this will work but the problem is. How do I get to optimize this then on another computer screen? I mean this wouldn't work on all the users right?
Anyway.. Let me repeat the question once again...
How do I my webpages to optimize to minimizing windows in the browsers and to work on all screens? I mean everything has to relate to pixels right? Now how the ** is that suppose to work If all the screen has different size's? I mean then you need to use the % to make it work. I don't want you guys to mainly sort of this exactly problem but give me some advice how to generally optimize a webpage in the best way.
Ok here is what I usally do:
Whenever I want to create a website that doesn't fill 100% of the page I create a wrapper around ALL the content, like you did. You can either do this with fixed values or with % values. In case you want to use % values it's often smart to use min-width or max-width for your wrapper. This way you only need to define fixed values once and all the inner content can be defined by using %. This helps especially if you want to resize the whole content later on, if your realize that it might look better with a little bit more width.
Height values rarely use % values, only use % values for the height if you are using a fixed height for your container. If you want to create different layouts for different screen resolutions you can always have a look at the #media tag which allows you to create resolution specific css code. This however is only recommended for a small set of resolutions, let's say, 2 different resolutions for desktop computer and maybe 2 different resolutions for mobile phones (4 different css definitions).
I usually try to use min-width and max-width with % values, and if that isn't possible for example for popup windows or fixed elements like a sidebar I use px values. And if I for example want to support multiple columns for my content if the user has larger screens I make use of #media
I also don't get why you're using absolute positioning. If you just want to center content use margin: 0 auto; on your container. Btw in html5 you can also use the <header> tag if you want to specify a header. Using a div and giving it a class/id isn't wrong but I think you should know that there is some new stuff out there in the world of html5/css3
EIDT:
Your title is a little bit confusing, since your question is totally different. For website optimization I strongly recommend http://developer.yahoo.com/performance/rules.html or for advanced optimization you can use https://developers.google.com/closure/ and https://code.google.com/p/closure-stylesheets/
Four your above code:
you can use:
#wrap {
margin:0 auto;
width: 600px;
height: 800px;
position: absolute;
}
instead of
#wrap {
width: 600px;
height: 800px;
position: absolute;
}
And to make make your webpage look same when window is re-size or you have to learn abut Responsive Web Development. Start using media queries in you pages.
For responsive design use media queries: Here is good example of media queries . Also learn how to use it.
I want to create a new website with Bootstrap and I need it to be 100% in width, but I do not want it to be fluid. At least not for now.
The issue I have is: using bootstrap standard limits you to 960px and with a fluid layout it is full width but behaves like a fluid layout should by moving elements to become stacked when the window is shrunk in size.
Is there a way to have 100% width with a static bootstrap layout?
This is easy to achieve in Bootstrap 3, just replace the .container div with your own:
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Thanks to Erik Flowers for the heads-up:
http://www.helloerik.com/bootstrap-3-grid-introduction#fluid
UPDATE
Bootstrap 3 now offers a built-in fluid container class, just use <div class="container-fluid">. See docs.
100% width ... static
This is a bit of an oxymoron. A 100% width layout isn't static.
Bootstrap uses a .container class to set a predefined width. Increase this to your desired page width if you want it to be greater than it's default. Be careful though that the sizing of Bootstrap's span* and offset* classes will need their widths adjusted accordingly.
Just don't include the bootstrap-responsive.css in order to disable the responsive function.
If you don't want a .container gutter/margin you can put your content outside the container but keep in mind you must maintain your content layout by yourself(still can use grid but lost an ability to centering your content) and don't forget most of the Bootstrap component like .navbar need .container to control its width.
One of my work need a full screen carousel to holding all contents so I wrap my content with .container to center the content.
I can't quite figure out how to reply to the main question, but here's what you want OP
As said above, don't use .container, use your own class like:
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Then when you build your grid, just use col-xs-* for the columns. You will now have a 100% width site that doesn't stack in the "mobile" view. Welcome to the 90's ;)
I guess what you mean is you don't want margin/padding on the sides. (that's the only way your message makes sense - a 100% width will take the full size of the screen so it will never be static - the size will change depending on how big the window is)
We don't have a use-case or JSFiddle from you so I can't give you exact code but you need to make sure your body has margin:0 and padding:0 and then look for the other divs with Firebug or Chrome Web Dev tools.
If you want your layout to be fluid but stop at a certain point growing, then you need to apply max-width:1000px (for example) to your body or your general container/wrapper element.
Three columns must fill the width of the parent container. The width of the left and the right columns must not be less than 150px. The center column must not be greater than 200px width.
I've made a reference page that uses JavaScript to do the layout. Is it possible to do the same layout with pure CSS?
screenshot http://elv1s.ru/files/html+css/min-width_max-width_columns.png
It should work at least in IE 8, Firefox 3.6, Chrome 7, Safari 5, and Opera 10.63.
Table-based solution by #PanyaKor.
I'm no expert, however I'm pretty sure that if the answer is yes that it is on this page:
Perfect multi-column CSS liquid layouts. iPhone compatible.
That page (and the entire site) is brilliant - it shows you how to achieve a lots of different layouts (using just CSS), and explains exactly how and why they work. Even if that page doesn't contain a layout which suits you, there is a good chance that page will give you a rough idea of the approach you need to take.
Also, good luck!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#container { max-width:960px; width:100%; min-width:400px; overflow:auto;}
#aside { height:300px; width:40%; min-width:150px; float:left; background-color:grey; }
#primary { height:300px; width:20%; max-width:200px; float:left; background-color:red; }
#secondary { height:300px; width:40%; min-width:150px; float:right; background-color:grey; }
</style>
</head>
<body>
<div id="container">
<div id="aside">Leftmost content</div>
<div id="primary">Primary content</div>
<div id="secondary">Secondary content</div>
</div>
</body>
</html>
A couple things about this layout:
I specified the height and background for display purposes only.
Overflow auto is on the containing element to clear the floats; though you can use a clearer div too.
The container has a fluid width, but is maxed out at 960. I choose this number arbitrarily, but it is a good idea to max out fluid widths before lines of text become too long.
If you keep the container fluid, the layout will break if the viewport gets small enough. EDIT: I added a min-width of 400px to the container, this should fix the problem.
Additionally, I would take a look at http://www.alistapart.com/articles/holygrail/ . Although it is an article detailing a fixed-fluid-fixed three column layout, I reckon there are a few ideas there that you could use to improve upon my layout, if you were so inclined.