Noripsni Noripsni - 5 months ago 11x
HTML Question

Adjusting elements with css according to the browser size

So I have html page like this:
enter image description here

I'd want to make it so that when I resize my browser or use it on a machine with different resolution the images and buttons would adjust accordingly. I guess their width should be in relationship with the browsers size somehow.

And I also want the buttons to remain in the oder listed above not that they go under each other when I resize (

At the moment the following happens:
enter image description here

As you might notice the map part adjusts well but I can't figure out why the buttons wont.

Here's my index.html file part:

<div class=wrapper">
<div class="toolbar">
<a href="" onclick="touch('football')"><img alt="Football"
src="images/iconsB/football.png" class="toolbarButton" /></a> <a
href="" onclick="touch('basketball')"><img alt="Basketball"
src="images/iconsB/basketball.png" class="toolbarButton" /></a>
###and so on until the end of icons###
<div class="loginbar">
<a href="#logged-in-box" class="loggedin_button"
onclick="touch('addingplaces')">Add places</a>
<div id="loggedinbutton">
<a href="#login-box" class="login-window"
onclick="showLoginForm('a.login-window')">Log in</a>

And here's my css

Any ideas where to start? Thanks in advance!


You are looking for CSS Media Queries. With Media Queries you are able to declare CSS rules for specific resolutions only.

If you assign a class to every image, you are able to set the width of the images through media queries. Here is a quick example:


<img src='#' class='icon'>
<img src='#' class='icon'>
<img src='#' class='icon'>

The CSS:

/* Default rule */
.icon {
    width: 64px;
    height: auto;

/* Rules for horizontal screen resolution <= 800px */
@media (max-width: 800px) {
    .icon {
        width: 48px;

/* Rules for horizontal screen resolution <= 600px */
@media (max-width: 600px) {
    .icon {
        width: 32px;