Suppose I display thumbnails (~200px width each) in a web page. In a midsize screen (e.g. 15") I can display 5 thumbnails in a row.
Now what if I resize the browser window so that 5 thumbnails don't fit the page width ? I would like the number of thumbnails to be changed automatically to fit the page.
For example: suppose, 5 thumbnails with spaces between them take ~2000 px. Now I am resizing the window. When the page width becomes < 2000 px but > 1600 px. I would like to display 4 thumbnails in a row and so on.
What HTML/CSS markup should I use to achieve that behavior ?
I once made a fiddle to explain media queries to someone. You can use a similar design, although it's usually much simpler just to float:left or display:inline-block your elements and let the browser take care of the rest.
DEMO
One way is to use a responsive layout. Twitter Bootstrap provides the same by default.
Another way is by using #media tags. Refer http://www.w3schools.com/css/css_mediatypes.asp . Here, you will need to make a function like this:
Get the screen size using mediacheck and then set up thresholds using #media.
You can use the float property for this:
float: left;
Floating elements will wrap when they do not fit in the parent's width.
Example (try resizing the page)
Related
I have been teaching myself front end web development for a while now and have taken on several client projects with good success so far. I am currently working on the site www.thrivetech.com and having an issue. There are 3 text columns with images above each on the home page of this site, and I cannot come up with a good way to make them all stay the same height. At different screen widths these 3 columns change height and sometimes don't match. Squarespace objects are natively responsive, and when the screen gets small enough these 3 columns stack on eachother and look fine. I have added a lot of Custom CSS to change background colors, text colors, etc. but can't figure out how to make this work. Even if I remove ALL CSS and just have a plain white page with black text, these columns still do this and don't stay the same height. I have even contacted Squarespace support and they haven't come up with a solution. See image below:
I would include some CSS source, but it's best to navigate to the site at thrivetech.com and inspect the CSS to see what is going on. I have considered doing something like using JS and jQuery to get the height of all 3 of these, determine which is the greatest, then set the height of all 3 to the greatest height, but it seems like there should be an easier, more elegant pure CSS solution?? Thanks for looking!
RESOLVED:
I fixed the issue by using a media query to set the parent element of these 3 columns to display: flex; when the window is at least 640px wide. The reason I need the media query is because they need to display as blocks when the window gets smaller so we can take advantage of Squarespace's native responsive design so the columns will stack on top of eachother on mobile and smaller screens. Here's some simple pseudocode:
#media only screen and (min-width: 640px) {
#parentDiv { display: flex; }
}
I am having a problem with the positioning of elements on my page.
When I try to open the website on an different computer with an different screen size it gets kind of messy.
That same happens when I resize my window. Certain elements stack in each other. Every element is positioned as absolute.
I greatly appreciate any help!
Without seeing you code, it is kind of hard. But I'll try to guess the answer.
You probably have set some width, define the total width of your elements and set that a minimum width of the body. Then when the viewports size is smaller, scrollbars will appear.
Add this to your CSS:
body {
min-width: 800px;
}
Sharing some code would be good.
To handle different screen size you might have to make your site responsive. A responsive layout uses percentages instead of pixels for defining layout element sizes. If you are creating a new page you could try BootStrap http://getbootstrap.com/. Bootstrap will make your layout look the same across different screen sizes.
I do not know how resolutions work. If I set the width of my container elements to 1000px and the user opens the page from a 1300px resolution screen, then the right part of the screen 300px would be left white. I don't want that to happen. One way I know is with CSS Media Query but that way I'd have to write tonnes of lines of code. Also I don't want to do it with jQuery. Can someone explain me how resolutions work and how I can create resolution independent elements on my web page?
Use percentages instead of pixels.
for example
div {
height:60%;
width:40%;
}
Using percentages instead of pixels will make it the right size no matter what screen.
I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.
Sorry if this post is too many of question, but because i weak in web design but i want to do these effect in my website, could you guy please let me know on how to do it ?
First...Please visit this site
http://net.tutsplus.com/
Question 1 : May i know how could i do the effect of resizing in Asp MVC 3 ?
when our site got a sidebar user screen size less than 1280x800, it will display single column of sidebar. When user screen size larger than 1280x800, it will display two column of sidebar.
Question 2 : when the screen size is too small, left side of site will display only about 20px of margin. All the image and background will hidden. exact like when you re-size your browser when opening nettuts site.
The best way to adjust the layout of a page with respect to the size of the viewport that it is being displayed on is with CSS Media queries. Before you do anything, read this:
http://www.alistapart.com/articles/responsive-web-design/
It's practically the bible on the subject.
After that, give the specs a read:
http://www.w3.org/TR/css3-mediaqueries/
The less CSS framework comes with a set of useful media queries and is something I use as a very simple framework:
http://lessframework.com/
It depends of the positioning atribute: absolute, relative or fixed..
Try to use percentage rather than an absolute, relative or fixed value.
Otherwise try to control the left-margin, right-margin, top and bottom and test, test and more test until it get what you expect.
I do this myself all the time, and always work.
Answer to Question 1
This is not ASP but JavaScript. Basically you will need a script that is launched each time you resize the browser. It should then check the new viewport width and modify some of the CSS for the sidebar