Different layouts for different screen's width - html

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)

Related

automatically decrease container width while resizing broswer window

I am using CSS and HTML trying to reproduce the homepage of this website http://www.newsweek.com/ as an exercise.
If you open the page with a large screen you will see at both sides two empty columns that gradually decreases as the broswer width is reduced.
I want to reproduce this behaviour but can't make it until the end: I have set a container class with initial width 80% that become 100% at some point thanks to media query in CSS:
#media screen and (max-width: 1047px) {
.container {
width:100%;}}
What I miss is the gradually reduction of this container. How it can be made?
Thank you very much
For an experience like that, all you need is something like this:
.container {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
If .container is applied to a block level element (like <div>) then this element naturally goes to be as wide as it can. This just says don't go wider than 1200px, and designate the left over space equally between the left and the right.
If for some reason the element is not block level (e.g. a <span>) then simply add display: block; to the above code to make it block level.

CSS: limit image width to half page width if it's narrower than the page

I have an image floated to the left of some text:
<style>
img {
float: left;
}
</style>
<div>
<img src="anything.jpg">
<p>Lots of text.
</div>
The image could have any dimensions. I would like to do the following using just CSS, across all form factors:
if the image is at least as wide as the page, display it full width (width: 100%); and
if the image is narrower than the page, restrict its width to a maximum of half the page width (max-width: 50%).
Is that possible?
Edit
Ok, not possible is what I feared, but I really hoped I was just missing something.
I can't create CSS rules/media queries dynamically, all the content is static (in fact there's no server).
I'm wondering if there may be a kludge that's Good Enough: adding a class to the images depending on their size (e.g. .img-500 for images with a width 500px to 599px, .img-600 for 600px to 699px....), and using media queries based on those:
#media (min-width: 501px) {
.img-500 {
max-width: 50%;
}
}
Would be interested to hear if anyone has tried that, or knows of a reason that approach is doomed?
As far as I'm concerned, conditionals on width can't be done with CSS only. However you can use two classes one with width: 50% and the other width: 100% & use JavaScript to switch between them when needed:
$(document).ready(function() {
$("#image1").load(function() {
if($(this).width() < $(window).width()){
$(this).addClass("width50");
}else{
$(this).addClass("width100");
}
});
});

Why is width:100% relative to screen when within media query

If I have want to have the following layout:
[----foo-----][[-bar1-][bar2]]
I.e. two columns each half the width, and then in the second column two sub-column with a 3/5 and 2/5 split, I do something like:
<div>
<div id="left-section" class="half-width">
Foo <!-- lots of content -->
</div>
<div id="right-section" class="half-width">
<div id="three-fifths-of-this-section" class="three-fifths-width">
Bar1 <!-- lots of content -->
</div>
<div id="two-fifths-of-this-section" class="two-fifths-width">
Bar 2 <!-- lots of content -->
</div>
</div>
</div>
with the following CSS
div {
display: inline-block;
}
#media screen and (min-width: 48em) {
.half-width {
width: 50%;
*width: 49.9690%;
}
.three-fifths-width {
width: 60%;
*width: 59.969%
}
.two-fifths-width {
width: 40%;
*width: 39.9690%;
}
}
Why is the three-fifths-width class computed as 60% of the screen width (and two-fifths-width as 40% of the entire screen)? It's just a regular CSS width property which should be 60% (or 40%) of the parent element and so 30% (10% resp.) of the screen in practice.
By the way I am actually using PureCSS in practice but I'm interested in the underlying CSS.
Also, I aware that the min-width within the #media query is always relative to the screen, I'm asking about a regular width or even min-width as a CSS rule within the scope of a #media query.
I am not sure how your browser renders your output, but first of all it shouldn't be anywhere near 60% or even 30% due to the fact that you apply
display: inline-block;
to all div elements.
This causes two things: (1) your divs will only be as wide as necessary to display its content and (2) whitespace between inline elements may cause unwanted effects. Therefore, your example looks like this: http://jsfiddle.net/8jrewj71/.
Note, that I have added your code twice and applied different classes to the parent div to see the difference between your CSS being inside a media query and not.
Now, if we add
.media, .nomedia { display: block; }
we get a complete different picture: http://jsfiddle.net/n4aw8pcd/
As long as the preview/result window is small enough, the media query part looks like before. However, as soon as the viewport exceeds 48em, it looks exactly the same as the part without media queries below.
Long story short: The answer to your question must be, it doesn't. width: 100%; is relative to the next parent element with a width property.

How can I make a div element "float" up when resizing the browser window using css and html?

I have been trying to figure this out, but am unable. I am looking for a way (through coding html/css) to "float" a div element up as the browser window's width is decreased.
Here is the browser window at full width with the div elements side by side.
After resizing (decreasing browser window width), I'd like for the 2nd div element to "float" above the 1st div element.
I would appreciate any help. Thank you.
UPDATE: First, thank you all for the help. After reading/trying recommendations, I am looking for a solution that is functional across all browsers. Also, the elements will be dynamic images. And, it doesn't have to be strictly limited to html/css, but the most simplistic implementation is always appreciated! :) Thank you again for your input and help.
Just place the second div first in your code like this:
<div id="second"></div>
<div id="first"></div>
And add float: left; attribute to the first div with CSS. You won't need jQuery for that:
http://jsbin.com/ERutocO/1/
You need to put number 2 in front of number 1 in your html code, then use float: right on both of them.
http://jsfiddle.net/4sCrQ/
If you want only CSS answer then you will need to use CSS3's media queries which word depending on the screen type and its size!
Use this :
#media only screen and (max-width: 900px;) { // screen size 900px
// if screen size 900px then position them here as
.div1 { // first div
margin: 10%; // margin
}
.div2 { // second div
// whatever property
}
}
And when the size decreases to lets say 500px width then
#media only screen and (max-width: 500px) { // if screen size is 500px
.div1 { // first div
// position it above,
}
.div2 { // second div!
// position it below by using min-width attr, and by adding paddings..
}
}
Good luck!
For more: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries (Mozilla Developer's Network)
Float the blue div left, the yellow div right. Demo
#yellow {
float: right;
height: 30px;
width: 200px;
background: yellow;
}
#blue {
float: left;
height: 30px;
width: 200px;
background: blue;
}
Here is a demo
While making this example some answers where posted here, and they are almost simular to my, so excuse me for duplication, but here is another possible solution.
I've reorder the div's and add float: right; instead of left.

css - grid div 2x2 centered but turns to 1x4 on smaller screens

hello this is driving me mad can anyone help. i want a grid of divs 2x2 centered on a large screen but when viewed on smaller screen moves to 1x4 but still centered. so far i have this it works but aligns left on small 1x4 view. i have tried to us inline-block instead of float:left but then you cant add any further content with the #frame-block. the width must be fixed widths at 500px
#frame-block {
width: 500px;
border: 2px #0066FF solid;
margin:5px;
height:400px;
float:left;
}
#frame-container {
text-align: center;
}
#frame-main {
display: inline-block;
vertical-align: middle;
}​
<div id="frame-container">
<div id="frame-main">
<div id="frame-block"></div>
<div id="frame-block"></div>
</div>
</div>
Here you go: http://dabblet.com/gist/3734237.
One of your problems was reusing IDs. IDs are unique and should only be used once per page. Here's even more reading on it: http://csswizardry.com/2011/09/writing-efficient-css-selectors/.
In my amendment to your code, I changed the IDs to classes, gave .frame-block 'display: inline-block' instead of 'float: left'.
I'd suggest using relative units as opposed to pixel units so that you need only change the base font-size on your 'body' to adapt on smaller screens that are below 500px. You can read more about it here: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
How about using media queries to make the #frame-block twice as wide on a certain resolution?