1

I am working on a project for which i have to make responsive version of the website. The site is a one page website made with jquery,fixed height and width and absolute positioning. The contents of the site must fit in within the viewport of the browser, view it here,

Now the problem is, i have to take care of not only the width but also the height of the screen, and if i target both fixed device height and width, the code will be huge, any suggestions, what i have planned to use,

@media screen and (max-width:479px) {...}
@media screen and (min-width:480px) and (max-width:639px) {...}
@media screen and (min-width:640px) and (max-width:959px) {...}
@media screen and (min-width:960px) and (max-width:1279px) {...}
@media screen and (min-width:1280px) and (max-width:1599px) {..}
@media screen and (min-width:1600px)  and (max-width:1919px){...}
@media screen and (min-width:1920px) {...}

but this does not give be desired results because fixed height percentage in the current design.

Please, any suggestions.

Suman.hassan95
  • 3,895
  • 8
  • 26
  • 24

2 Answers2

0

What I understood is - You have a 100% width and responsive height.

For this you can set width to 100% and use media queries for maintaining height.

I've done something similar here.

See if it helps.

Thanks

Manik Arora
  • 310
  • 4
  • 12
0

There's no need to set both width and height in each screen size.

In your case, the website's height is always 100%. What you need to take care of is just the content width.

for example, in large screen the content is 80% width, in small one the content may be 100% width;

I strongly recommend you to take a look at some css frameworks with grid system like skeleton and foundation. they are both great in responsive design, you may use and learn from it!

btw, to deal with background image, you can use css attr

-moz-background-size: cover;       
-webkit-background-size: cover;     
-o-background-size: cover;  
background-size: cover;

this may solve some problem!

Ian Wang
  • 342
  • 2
  • 13