how to create a 2x1 structure - Post...

User 2815556 Photo


Registered User
6 posts

Hello,

Been trying around now a while, but it seems with trying I won't get any further :(

I need the follwing structure:
2 coloumns of which the left is split in two rows, the right one spans over these two.

The cells include HTML content with slideshows from WOWSlider.
Right now i only manage to build the structure without spanning the right one over the left two.

Does look like http://tm-dac.coffeecup.com/index.html, the right slideshow should span over the left two.
Originally the right slideshow is the same height as the two left ones so that it looks like a square picture made of three slideshows... I don't know why the right slideshow is shrinked.

Would be so happy if you could help me.

Thanks a lot
Thomas
User 122279 Photo


Senior Advisor
14,622 posts
Online Now

First: Start with rows. You can divide them into columns, but not the other way around.
Maybe you can make one row, divide it into two left narrow columns, and then put a subgrid into the first one in order to make two subgrid rows in that one.

I don't know what you intend to do with the rest of the page, but you may need to drop a subgrid into the 3rd column too.

See attached image of what I'm suggesting
Attachments:
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
5,305 posts
Online Now

Hello from sunny Bali,
Sorry to sort of repeat what Inger has suggested
Here is my way to do it if I have got what you are after right
(assume your top slider is 600 px wide and the other two below are 300 px)
1st row
= 1200 px wide(can be as wide as you want),
Drop in a sub-grid to this column
Divide the top sub-grid column into 2 with the new left and right columns being 6 spans (600px)
in the left sub-grid column below make that 3 spans and the right column 9 spans)
keep the right column you have just made active, and add another column (this will drop in below
make that column 3 spans, (add another column if you want and make that 9 spans)

Drop your slider stuff into the relevant left hand columns (adjust for center, left or right positioning as you so wish)

You can add text or anything you want leave it out in the right hand columns




2nd row =
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2815556 Photo


Registered User
6 posts

Thanks a lot for this way forward.
Will check this tomorrow and come back with feedback!
User 2815556 Photo


Registered User
6 posts

Hello again!

Havent tried until now, since I have to do some other things, but will immediately in the afternoon.
Wayanjaya, if your way does look like the attachment then it is not exactly what I need.

In the end it should like this: michefashion.at

Thanks so much for the quick responses.
Thomas
User 2699991 Photo


Registered User
5,305 posts
Online Now

Hello from sunny Bali again
Yes I misunderstood what you was requiring

Here is my take on what I think you need again

open blank page
make row 1200 px wide (up to you how wide once again)

change column display to flex
direction = row (this can be changed to column or reverse column at smaller screen sizes)
wrap = no wrap
other settings up to you

drop in 2 containers

make left container width of your smaller sliders
change display to flex
direction = column (this can be changed to row at smaller screen sizes_
other settings as you desire
use left column for your sliders
You can adjust flex, margins,centering and sizes accordingly

make right container size of your large slider
use right container for large slider

you can adjust margins padding flex according to your requirements for all screen sizes up to you

hope this time is more what you are after for the layout

Have a great day wherever you are in the world
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2815556 Photo


Registered User
6 posts

Thanks a lot! Will try it and give feedback!
Greetings from Austria :)
User 10077 Photo


Senior Advisor
1,096 posts

Keep in mind that the html elements are containers. You can do everything what Wayanjaya said with the 2 html elements.

You can also use Inger's method above using subgrids in two left columns.

In my experience, what works at a desktop width does not always adjust the way I want when I set smaller breakpoints. You may want to experiment with both methods to see which one actually behaves the best at various widths for your project.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 122279 Photo


Senior Advisor
14,622 posts
Online Now

OK, I misunderstood at first. I thought all the slide shows were to appear on the left side of your page. Now I'd do what Wayanjaya or Brian say.
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 2815556 Photo


Registered User
6 posts

Just one more question: how to set column display to flex?
Sorry fo asking this, but I am quite new to RSD.

Thanks a lot for the feedback fo you all! Great forum!

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.