I need instruction on how to create a simple image grid with fluid resizing. I would like to place three (about 300px) square images on my front page that span the width and respond when the window is resized or if viewed on. If screen size is smaller, the three images will stay horizontal, but shrink. When viewed on a phone, the three images will stack with the first being at the top, the middle one second and the last one third.
I can get the images to show up, but I'm having trouble with CSS.
<div id="content" class="col-full">
<div id="grid">
<img src="http://lorempixel.com/320/320">
<img src="http://lorempixel.com/320/320">
<img src="http://lorempixel.com/320/320">
</div>
<style type="text/css">
#grid img {
float: center;
margin: 25px;
}
</style>
Any advice is appreciated for this NOOB. :-)
Try "text-align: center;" on container and "display: inline-block;" on images.
Must do the thing.
Example: http://jsfiddle.net/SvR6Z/1/
EDIT: Added ways to shrink screen.
To change images position on the page it response to window width you can do following:
Specify tags with relative sizes. For example with "width: 80%;" page width will always be 80% of the parent container (if the parent container is body, then it will be 80% of windows width). By default block-level element have width 100%; If you don't want it to be more than some value you can specify max-width property to do so. Element with: "width: 100%; max-width: 906px;" will always have width of 960px or less, no matter of window size.
If you want to have more control to the grid and decoration for mobile viewers (hede some elements for example) oyu can use css media queries ( read more about them here: http://css-tricks.com/6731-css-media-queries/ ) to do so. For example if you link css to page this way it will be working only when window width is more than 701px and less then 900px:
<link rel='stylesheet' media='screen
and (min-width: 701px)
and (max-width: 900px)' href='css/medium.css' />
Related
I am new to media queries. I have it setup to swap an image based on the portal size. That is working great with the following code:
<header>
<div class="logo_div">
<img src="images/logo_full.png" class="logo_full">
<img src="images/logo_small.png" class="logo_small">
</div>
</header>
/* Logo DIV */
.logo_div {
margin: auto;
width: 50%;
}
/* Logo */
.logo_small {
display: none;
}
#media (min-width: 1200px) {
.logo_full {
display: block;
text-align: center;
}
.logo_small {
display: none;
}
}
My large logo is centered just fine. My small logo however sits to the right. I have tested this by simply changing the browser window size as well as on my iPhone XSM. On my phone, it is obvious that the small logo is to the far right.
Am I missing something here?
You can see this live also by going to http://thelavender.net/_fades/
For me the best way to center any object is:
#myobjectid{
display:table;
margin:0 auto;
}
In your case put it to your div container, and remove width.
Inside your image, put your width tag.
I want to add that you're making two http requests, for both the large and small logos, when you really need only one. Have you considered using picture?
The HTML <picture> element contains zero or more <source> elements and
one <img> element to provide versions of an image for different
display/device scenarios. The browser will consider each child
<source> element and choose the best match among them; if no matches
are found, the URL of the <img> element's src attribute is selected.
The selected image is then presented in the space occupied by the
<img> element.
This following snippet will produce only one logo at a time and shrink your CSS significantly.
<picture>
<source srcset="logo_full.png" media="(min-width: 1200px)" />
<source srcset="logo_small.png" />
<img srcset="logo_full.png" alt="My default image" />
</picture>
Let's say I have a website which uses Twitter Bootstrap and has the responsive features included. In this example, I have a div with a picture in a div with span1 as the class, and some text in a div with span11 as the class. I don't want to display the image while the site is being viewed from a mobile phone. Here's the code I would use:
<div class="row-fluid">
<div class="span1 hidden-phone">
<img src="path/to/image">
</div>
<div class="span11">
<p>Here is some text</p>
</div>
</div>
From this example, the span1 div is hidden if the site is visited from a mobile phone, however the span11 div is still visible.
If I use this code, will the contents of span11 span across the entire width of the page (given that it's being viewed on a mobile phone), or will it still only span across 11 out of 12 spaces on the Bootstrap grid? If this is the case, how can I specify that I want the paragraph in span11 to span the entire width of the page and not just 11 out of 12 spaces as defined by the grid?
It will span the entire width.
The css of Bootstrap converts all elements with a span* class to block elements with 100% width for devices with screen width less than 767px; consequently, there's not really a 'grid' for mobile.
Here's the code that does this:
[class*="span"],
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
Source: The Bootstrap mobile layout .less file, line 60
I am putting together a HTML5 page. I notice that divs without specified widths within elements such as "header" and "footer" only fill the width of the window. So, if for example you have:
<header>
<div id="header-background" style="background: #ddd">
<h1 style="width:960px">Hello World</h1>
</div>
</header>
And you reduce the size of the window to below 960px (e.g. 600px) and scroll horizontally, the "header-background" will only stretch to 600px, and to the right will be a white space.
You can see this in action even at stackoverflow.com
Is there a way around this?
Any block level element will take up 100% of the page width by default. If you have a width that you can't ( or don't want to ) go under, then you can use min-width
header {
min-width: 960px;
width: auto;
}
Simply, I want the body of the site to occupy 100% of the browser in 1024x768 monitors, and for monitors with higher resolution (1024x768 and higher) to display the body in the middle (center aligned) leaving equal amounts of space on the left and right.
This is very common in many websites but I don't know how to implement it. Can anybody show me how, please, and finish up the CSS code I started? Thank you very much.
HTML
<div class="header">content</div>
<div class="side-bar">content</div>
<div class="container">content</div>
CSS
html body{
margin:0;
background:#fff;
}
.container{float:left}
.side-bar{float:left}
"Today, most visitors are using a screen resolution higher than 1024x768 pixels" - http://www.w3schools.com/browsers/browsers_display.asp
so if you need to have a 1024 pixels width website you just make your container to be 1024 pixels fat :) and margin:auto;
http://jsfiddle.net/kx2nE/3/
I used a smaller size one so you can see better the result in jsfiddle, but you can replace those values in your css.
#container
{
width:300px !important;
height:500px !important;
border:1px solid red;
margin:auto;
}
<div id="container">
container with equal margins on window resize<br />
<br /><br /><br />
<b>
width and height values set to yours 1024x768
</b>
</div>
Check out the Fluid 960 Grid System - http://www.designinfluences.com/fluid960gs/
It lets you nicely organize content divs in a horizontal grid that takes up 100% of the browser's width.
Typically this type of question is not encouraged on stack overflow due to the fact that you didnt actually present a problem. However there is a very good css coder who has solved this for you. Here is a link the download for you to try.
http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm
Set width to a percentage and min-width for fixed size on 1024 monitors:
#main {
width: 95%;
min-width: 990px; /* I suggest a number around 990, due to scroll bar width, experiment at will or use javascript to apply dynamically */
To align the site centered, use an automatic horizontal margin:
margin: 0 auto;
}
Note: You need to apply these to a div directly beneath the body (The body itself cannot change size)
<body>
<div id=main>
<div class="header">content</div>
<div class="side-bar">content</div>
<div class="container">content</div>
</div>
</body>
Edit: Ah I see what you mean, fluid with maximum width, most of the aforementioned stands, change 95% to 100% and min to max:
#main {
width: 100%;
max-width: 990px;
margin: 0 auto;
}
I am creating an HTML5 web page with a one column layout. Basically, it is a forum thread with individual posts.
I have specified in my CSS file the column to be 600px wide and centered it in the window using margin: 0 auto;. However, some images that are in the individual posts are larger than 600px and spill out of the column.
I'd like to widen an individual post to fit the larger images. However, I want all the other posts to still be 600px wide.
Right now, I'm just using overflow:auto which will create a scroll bar, but this is less than ideal. Is this possible to have the an individual post width grow for larger content yet stay fixed for normal content? Is this possible using just pure CSS?
Thanks in advance!
try using min-width: 600px instead of width, though it won't work in old versions of internet explorer.
You can use display:table on divs that contain your posts. You can see the effect with this example markup:
<html>
<head>
<style>
.post{
margin:0 auto;
border:1px solid red;
display:table;
}
</style>
</head>
<body style="width:100%;border:1px solid blue;">
<div class="post" style="width:600px;">
asd
</div>
<div class="post" style="width:900px;">
asd
</div>
</body>
</html>
Of course this will not work IE under version 8.