CSS box layout not playing nicely

I'm trying to design a css and html website but I am having some issues making it responsive. http://finfeeder.x10host.com/

Below are the pictures of what I'd like it to look like when on mobile and desktop.

Essentially, As the monitor gets smaller and smaller, the pictures should get smaller and stay in the same place until it becomes and certain size to completely change for mobile devices. Instead, it just gets smaller and more misaligned...

At the heart of it I know I don't understand how CSS layouts work but W3schools just didn't get the point across for my dumb self.

<!DOCTYPE html>
<html>
<head>
<style>

div.main {
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
}

div.buttons {
    position: absolute;
    left: 330px;
    top: 550px;
    z-index: 0;   
}

</style>
</head>
<body>

<div class="main">
  <img src='https://xo2.x10hosting.com:2083/cpsess6981183432/viewer/home%2ffinfeede%2fpublic_html%2fimages/desktop_betta.jpg' style='width:100%' alt='[]' />
</div>
<div class="buttons">
<a href="http://facebook.com">
<img src='http://i.imgur.com/dhFsqcW.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://pinterest.com">
<img src='http://i.imgur.com/qatEe7q.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://instagram.com">
<img src='http://i.imgur.com/IoRiRiD.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://twitter.com">
<img src='http://i.imgur.com/eqsUM0m.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://kickstarter.com">
<img src='https://xo2.x10hosting.com:2083/cpsess6981183432/viewer/home%2ffinfeede%2fpublic_html%2fimages/kickbutton.gif' style='width:100%' alt='[]' />
</a>

</div>
</body>
</html>

Please see my reply for links to what website should look like. Thank ya kindly!

Answers


Firstly, the div itself is designated with a hard-coded absolute position. If you change that to a percentage, it will stay in the same part of the screen regardless of how narrow the screen is.

You may also potentially use max-width and min-width properties to prevent elements from getting too small or large.

You should also make sure to define the width and height of your html and body as 100% of the viewport. This way and elements with in it will inherit the correct width and height.

<style>

html, body {
height: 100%;
width: 100%;
}

div.main {
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
height: 30%; /* This could also be coded with a px, pt, etc */
}

div.buttons {
position: absolute;
left: 5%;
top: 5%;
width: 90%;
z-index: 0;   
}

</style>

Since the html, body and div.main are all 100% the width of the viewport, positioning the div.buttons to be 5% from the left and setting it's width to 90% positions it to have 5% of space on either side, no matter how big or small the viewport is.

It's generally good practice to define things like height and width even if you don't think you need to because at some point another element may inherit that property, or be positioned relative to it.

If you use Google's Chrome browser you can enable the developers tools with control + shift + i and preview how your page with look on a variety of devices.


Need Your Help

<MailSettings> Use deliveryMethods 'Network' and 'SpecifiedPickupDirectory' simultaneously

asp.net .net email smtpclient configurationmanager

Exactly as it says on the tin: is it possible to specify both delivery methods in a single configuration? I'd figure it'd be a quick (and cheap) solution to log all e-mail messages that were sent

Can I use Objective C codes with Delphi XE5

ios objective-c delphi delphi-xe5

I am trying to write an ios program wiht Delphi XE5.