CODEWITHSUNDEEP
htmlcssresponsive-design
user1517108
user1517108

Reputation: 2415

Responsive grid - Verically/Horizontally stacked with changing width/height

I want to make a responsive grid that fits the size of a mobile in both landscape and potrait mode.

So I have following components in my div/grid:

  1. An Image
  2. A Div Talking about its description.
  3. A Buy button.
  4. A share button.

So in potrait mode all of them have a same width and are stacked vertically, whereas in landscape mode all of them have a height and are stacked horizontally. Eg:

In Landscape

Landscape Mode

In Potrait

Potrait Mode

I am not well versed with css, and have been trying to do this for past two days. Any help will be deeply appreciated.

Upvotes: 1

Views: 77

Answers (1)

Johannes Reuter
Johannes Reuter

Reputation: 3547

There is a media-query to check for the orientation of a device: 

@media all and (orientation: portrait) { ... }

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation

You can use this to apply CSS-rules to your elements only if the device is in portrait mode:

@media all and (orientation: portrait) { 
  .column {
    width: 100%;
  }
}

Something like this

Upvotes: 1

Related Questions