Hello,

 

This is the site i'm designing :

 

http://www.lucasnascimento.com

 

If you go through the splash you will find a static website, with images (jquery cycle with pager).

 

My issue is to do with how this site is viewed on different platforms.

Different screen sizes, resolutions etc.

Ideally, I would like it to resize so it fits the screen of the user.

 

I've incorporated the 'max-width:100%' on images and it seems to be doing something...But in terms of height, it is necessary to scroll....

 

Also, img { max-width: 100%; } makes some of the larger images stretched or it even cuts them off if i resize my browser. How can you make them resize with proportions constrained?

 

And ALSO,

 

when I resize my browser, the #content changes position in layout.

 

Help?

Edited October 14, 201114 yr by alexandros

Have a look at 'Media Queries'

Couple of links for you

 

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

http://www.alistapart.com/articles/responsive-web-design/

 

and a great link to a book...

http://www.abookapart.com/products/responsive-web-design

You can start off with a fluid grid using percentages instead of fixed measurements. And then if the layout 'breaks' at lower resolutions you can use media queries to alter the styling. If you give an image a 100% width but no height measurement it will scale proportionally. You can also use maximum width to stop the layout expanding too much on higher resolutions. Responsive design is a big subject to be honest.

Why is everything really big, except the Enter text which is the most important part??

 

not gonna lie tuck me a short wile to notice it

Thank you

 

It sure looks like a big subject.

....When you say fluid grid, you mean the :

 

container (or wrapper) div

which includes :

 

menu (div)

content (div)

right?

 

All CSS should be in %.?

 

Here's how these look in the CSS :

 

 

html, body {

background-color:#FFF;

text-align:center;

padding:2%;

}

 

body {

font-size: 12px;

letter-spacing:-0.02em;

font-family: Verdana, Geneva, sans-serif;

}

 

 

 

#container {

max-width:100%;

text-align:left;

}

 

 

.menu {

line-height: 20px;

text-align: left;

float:left;

position:fixed;

}

 

img { max-width: 100%;

}

 

 

#content {

max-width:100%;

max-height:100%;

text-align:left;

overflow: hidden;

padding-left: 25%;

padding-top:0.3%;

 

 

}

 

 

Does this look ok?

Thank you

 

It sure looks like a big subject.

....When you say fluid grid, you mean the :

 

container (or wrapper) div

which includes :

 

menu (div)

content (div)

right?

 

All CSS should be in %.?

 

Here's how these look in the CSS :

 

 

html, body {

background-color:#FFF;

text-align:center;

padding:2%;

}

 

body {

font-size: 12px;

letter-spacing:-0.02em;

font-family: Verdana, Geneva, sans-serif;

}

 

 

 

#container {

max-width:100%;

text-align:left;

}

 

 

.menu {

line-height: 20px;

text-align: left;

float:left;

position:fixed;

}

 

img { max-width: 100%;

}

 

 

#content {

max-width:100%;

max-height:100%;

text-align:left;

overflow: hidden;

padding-left: 25%;

padding-top:0.3%;

 

 

}

 

 

Does this look ok?

 

Yes, that's basically what I meant. You can use a div as a container for your images, say that div is 30% width. Then set the image size to 100%. The image will than scale down with the layout.