Pushing & Pulling Totally Confused

User 2699991 Photo


Registered User
4,798 posts
Online Now

Hi Guys from sunny bali,

I know that the good advice is to play with the designs etc etc and always save a copy..... Done that .............. and believe me I have been trying to get this all day.

I have a layout on a page (which will be eventually many pages with same layout),

Basically its a row a column (obviously) and the within the column is a sub-grid with 1subgrid- row divided into 3 subgrid-columns, the first column is 6 spans and contains a table, the second is 4 spans and has a container with heading 6 (for image title) and an image-link 4:3 (width limited to 250 px) and the last is 2 spans with another table See attached layour at large sceen resolution breakpoint 1, )

Looks ok to me down to breakpoint4 (see attached screenshot breakpoint4)

somewhere between it needs changing (I think the term is "STACKING" (I have actualy done that at breakpoint 5 (see attached screenshot ; breakpoint5)

Actually what I want to do is REVERSE STACKING which brings the linked image and the last subgrid column to the top with what was the first column (table) underneith.

I have read and read the article about this, downloaded the example taken many aspirin, and coffee and apart from not really being clearly demonstrated, my simple mind just wont follow and compute whats going on.

Is there another tutorial somewhere that I have missed that explains the process step by step,
is there someone out there that can take me through it step by step
or have I to change the layout completely and start again.

Thanks in advance to all you geniouses out there wherever in the world you are have a great day.
Attachments:
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 122279 Photo


Senior Advisor
14,450 posts
Online Now

I'm not sure that my answer is correct, but I think it is not possible to do the 'reverse stacking' in RLM. What is to the right of another element will drop below the other element when the viewport gets narrower. Push and pull will work sideways, but not vertically. I tried to do something similar once, but it didn't work. Also tried solving it with negative margins, but it got all messed up.

If this was not a correct answer, someone please correct me.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,798 posts
Online Now

Yes I sort of thought that was the case
I can pull the image in the sub-column to the top left position but then if I make it 12 columns wise it drops down again.
Ahh well back to the drawing board
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 379556 Photo


Registered User
1,535 posts

I am a novice, and so may have missed the point, but I did what I consider to be reverse stacking in RLM as follows.

1. I started with a 12 column grid, and two 6 span columns adjacent to each other in a row at full width.
2. I set the background colour of the left column to red, and the background colour of the right column to yellow.
3. I used Push and Pull to reverse the order of the columns, pushing the red column 6 spans and pulling the yellow column 6 spans, and treated that as the position I wanted to be seen at full width: yellow on the left, and red on the right.
4. At the break point where I wanted the columns to reverse stack I
a. reduced the push and pull figures to zero;
b. set the width of each column to 12 spans.
That put the red column above the yellow column as required.

N.B. During the above process it became necessary at times temporarily to reduce a column width so as not to obscure the other column: otherwise it became difficult to select the other column.

Frank
User 122279 Photo


Senior Advisor
14,450 posts
Online Now

So you changed the left/right order before doing anything else? That sounds interesting. Have to try that when I get home to my own machine. Maybe this will solve Wayanjaya's problem.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 38401 Photo


Senior Advisor
10,951 posts

Also keep in mind that with columns you can also use the compass arrows (for lack of a better term haha) that are on the Layout tab towards the bottom. You should see some left right up down arrows there and if you click one of your Columns you should be able to manipulate that column in various directions. Left and right will usually go up and down if you make your columns 12 spans wide and that will help you manipulate them where you want them in various breakpoints.

Good luck!
User 379556 Photo


Registered User
1,535 posts

My experiments suggest that changes made with the 'compass' affect not only the break point at which one is, but all the other breakpoints as well, whether to the right or to the left. It thus seems not to help directly with reverse stacking, but does help when getting things in place prior to step 3 in my previous post.

Frank
User 2699991 Photo


Registered User
4,798 posts
Online Now

Thanks Guys
Yes Frank you are right about the move arrows, it changes the position of the subgrid column for all of the layout so not what I would like to achieve.

I think the problem is that I have 2 subgrid columns inside the row column (if you follow,

I can pull the right sub-column to the left so consequently the left column goes to the right, but then when I try to make both columns the full 12 spans, the whole layout just collapses.

I am now going to try re-design without using sub-grid column. Will let you know if successful.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 38401 Photo


Senior Advisor
10,951 posts

When you say the whole layout collapses, what do you mean by that? It seems to me that when you go to the 12 span with the columns that you have pulled, just remove the pull from them and see if that fixes them at that breakpoint. I haven't tried it yet myself, but logically it would seem that if you alter something and then put it back at different breakpoints it should remove the "collapsing" you're talking about. Let us know on that.

My apologies on the arrows suggestion, I've been knee deep in getting ready for company and I misread your post on what you were trying to do, I had read some of it and "assumed" (silly me lol) that you meant moving the columns around, not reordering them temporarily.
User 2699991 Photo


Registered User
4,798 posts
Online Now

It's ok now thank you everyone,,, don't need trouble you about this anymore
made a new design layout that doesn't need all that mucking about.

I did remove all the push and pulls when I reset the widths, but still the columns moved back to their original positions.

I have been pushing and pulling all day and all night I don't know if I am on this earth or fullers

Thanks again have a great day wherever in the world you are
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.