Question

I think this is my second post regarding Adaptive HTML/CSS layout. I got a helpful answer in my previous post where I implemented the adaptive layout, which was more straight where I need to remove the float and place the containers one below another.

This time I have got some what complex design. Let me show the designs how it should be looking in Landscape and Portrait modes.

Landscape Design:

In the portrait mode that is if the width is less than 1024px then the design should be looking like this

Portrait Design:!

Would be helpful if someone guides me how to approach this design. In case if some more information is required then please feel free to ask

Thanks
Raaks

Answer 1

You can try using media queries

@media all and (max-width: 1023px) {
  /* CSS you need for portrait */
}

You can read a lot of good articles about “Responsive web design”.