CODEWITHSUNDEEP
htmlcssresponsive-design
Zlatko
Zlatko

Reputation: 19588

Responsive layout repositioning

I have a bit of a responsive layout content positioning problem.

I have a "card" that on one layout looks like bellow, the card gets repeated for each post, of which there are many:

  --card---------------------------------------------------
| 
|   div 1                                               |
|                                                       |
|  --------------------------------------------------   |
|   div 2                                               |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|  ----------------------------- ---------------------- |
|   div 3                        |                      |
|                                |                      |
|                                | -------------------- |
|                                |   div 5              |
-------------------------------- |                      |
|          |                     | -------------------- |
|    div 4 |                     |                      |
|          |                     |   div 6              |
|          |                     |                      |
---------------------------------------------------------

It gets a bit more intricate, but these are the main parts, let's say. The second version of this (mobile) adds a div, which is easy, and repositions divs 5 and 6, and resizes div 3. Kind of tricky, but I can do that in CSS. Specifically I grouped divs 3 and 4 in one inline-block wrap, and I float 5 and 6 up/down, and a few more things to do it. And now I have to center the div 4 horizontally relatively to the whole card, but I do that with some margin which isn't always right. Also, wrapper for 5-6 block gets relatively positioned, so it's kind of ok to stick it there in the corner.

--card---------------------------------------------------
| 
|   div 1                                               |
|                                                       |
|  --------------------------------------------------   |
|   div 2                                               |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|  ---------------------------------------------------- |
|   div 3                                               |
|                                                       |
|                                                       |
|                                                       |
------------------------------------------------------- |
|*new - 7* |               4     |  *6*                 |
|          |                     |                      |
|          |                     |                      |
|          |                     |                      |
|          |                     | ------------------   |
|          |                     |  *5*                 |
|          |                     |                      |
---------------------------------------------------------

Now it goes really crazy, on horizontal mobile design, I get this:

As you can see, now I have to float around divs 1 and 2, and totally pull out some boxen and put them in a different place, and generally make a different layout completely. 

--card--------------------------------------------------------------
| div 2                 |   div 1   |  div 7  | div 4          | n |
|                       |---------------------|                | e |
|                       |                     |                | w |
|                       |  div 5              |                |   |
|                       |                                      | 8 |
|                       | -----------------------------------------|
|                       |                              |           |
|                       |  div 3                       |  6        |
|                       |                              |           |
|                       |                              |           |
|                       |                              |           |
--------------------------------------------------------------------

Is there a way to do all this without resorting to duplicate content or relative positioning?

What I do specifically: - I now pull div 2 by floating it left, and I absolutely position div1. - I do some pos: relative and float divs around to pull divs 3 and 6 which seems dirty but it works. There are a few screen sizes where it's off, but I'm lost for now. - I duplicate some content around (like that wretched div 5) and use media-queries to show and hide around. - I make a mess in general out of it because as I was digging myself more, I found I needed more hacks to "fix" things on different layouts, so now I'm totally lost. FWIW this is an Angular webapp,but the layout thing is quite separate from that anyway.

How does one handle these kinds of problems in general?

Upvotes: 1

Views: 78

Answers (1)

Mario F
Mario F

Reputation: 47307

In general, if you have layouts that are completely different for different screen sizes you are going to reach a point where the layout just becomes very difficult to maintain without resorting to duplication.

My personal recommendation in your case would be to use a grid based on flexboxes (such as Bootstrap 4.0) for two reasons:

  • Dividing the layout in columns is much easier and can be done with pure css classes, without having to float everything
  • The flexbox gives you an additional layer of flexibility. For example, two convenience things that you could apply to your desgin are order (to make div 2 be rendered before the div 1 in the third layout), and switching the flex-direction (to make the last layout flow from left to right, instead top to bottom). It is probably some amount of work to get into it, but I believe that would give you the flexibility you need in order to get to a result.

This guide is very useful to understand them in more depth.

Upvotes: 1

Related Questions