mobile site css

[nikita_a]

Hi everyone

so not a coder by trade so new to css and I am having issues already … So problem is I had to create just a sort of coming soon/basic contact page

however there is white spaced line between images and I can’t figure out where thats coming from in the code as there is no padding etc.

SEE SITE HERE

CSS:

/* General Setup

/*

*/

html{ height:100%;}

body{

font-family:Arial, Helvetica, sans-serif;

padding:0;

font-size:12px;

margin:0;

color: #333333;

background-color:#FFFFFF;

}

.home{height:100%;}

.homeiphone{height:116.85%;}



body#page{height:auto;}



/* Structure

/*

*/

#container{ width:640px; height:100%; margin:auto; position:relative;}

#pagecontainer{width:640px; height:auto; padding:0px 0 0px 0; margin:auto; background-color:#FFF no-repeat center top #cacaca; position:relative;}



/* CSS Media Queries

/*

*/

@media screen and (max-width: 640px) {

#container{width:100%; height:100%; padding:0 0 0 0; margin:0 0 0 0;}

#pagecontainer{width:100%; height:100%; padding:0 0 0 0; margin:0 0 0 0;}

#bottom_nav{ width:100%;}

.icons_nav .slides li a{ float:left; margin:0 0 0 0;padding:0 0 0 0; font-size:12px; color:#FFFFFF; text-align:center; line-height:20px; width:19.2%;}

}

html

[Tcooper]

Add either display: block; or vertical-align:bottom; to your img elements.

[ernest]

You could apply a negative margin to the bottom of your images.

#pagecontainer img { margin-bottom: -1px; }

[nikita_a]

thanks that worked will reupload … is there a way to make the page load to correct size? seems when i load the page it doesn’t readjust to the mobile screen size …. I have to adjust it myself.

[ernest]

I think part of the problem here, is that all your content is images… they just aren’t as flexible as text when it comes to resizing… If you are designing this ONLY for mobile browsers, perhaps you could set an image size percentage…?

#pagecontainer img { margin-bottom: -1px; width: 80%; height: 80%; }

This may not work for what you need…

[nikita_a]

nope that didn’t work :( any other suggestions??

[Anonymous]

Just helped someone else out on a similar question.

All you need to do is add this to the header of your file.

I would also apply this styling to the img tags so they fit the width of the viewport.

#pagecontainer img {

display: block;

max-width: 100%;

height: auto;

}

[nikita_a]

@TheDark12

thanks so much! that worked!!! appreciate it!

[Author]

Posts