- This topic has 14 replies, 2 voices, and was last updated 3 years, 1 month ago by
.
-
Posts
-
Hi,
The majority of our job-hunting users are mobile.
I have a course listing that is a Date/Description list.
i.e.
Week 1: one sentence description here
Week 2: one sentence description here
and so on…On mobile – I want them to stack as opposed to scrunching.
QUESTION: Can you substitute a grid for a table in this instance?
Or is there a smarter solution?Thank you!
Customer Support
Hi Tom,
Yes, Grid can do so.
You can set the Grid container width to 100% on mobile.
Ying, thanks!
Another question – how do I handle rows? Do grids have rows? Or is it 2 column grid, then a two column grid after that?I looked – but could not find anything.
Appreciate your help!
You can use one Grid block with multiple containers.
- Grid -- container a-1 -- container b-1 -- container a-2 -- container b-2 -- container a-3 -- container b-3For example:
– On the desktop, set container a-1 to 30% width, and container b-1 to 70% width, the rest of the containers will automatically wrap to the next row.
– On the mobile, set all containers to 100% width, they will stack.
Will try this – thanks Ying!
No problem 🙂
When I have a 2 column grid:
30%[A-1 Week 1:] | 70%[A-2 one sentence description here]
30%[B-1 Week 2:] | 70% [B-2 one sentence description here]I get this when mobile:
[A-1 Week 1:]
[B-1 Week 2:]
[A-2 one sentence description here]
[B-2 one sentence description here]When I WANT this:
[A-1 Week 1:]
[A-2 one sentence description here]
[B-2 Week 2:]
[B-2 one sentence description here]I hope this is a clear explanation of what I am getting.
Should I be using a discreet grid for each entry to get what I want?
[GRID A-1 | A-2]
[GRID B-1 | B-2]I re-read your post and think I understand what I did will try it again!
Let us know if you run into any trouble 🙂
Apologies Ying –
I cannot figure out how to do this within the single grid (like your illustration above).
– Grid (1)
— container a-1
— container b-1
— container a-2
— container b-2
— container a-3
— container b-3I can only seem to get it to work when I have a SEPARATE grid for every pair
Grid (1) -> A1 | A2
Grid (2) -> B1 | B2
Grid (3) -> C1 | C2
and so on.Any help is appreciate – sorry I’m not getting it!
I cannot figure out how to do this within the single grid (like your illustration above).
What is the thing you can’t figure out?
Is that how to add extra containers to the grid?
If you select container a-1, click on the
+icon of its floating tool bar, it will duplicate a new container a-1 for you.
check the gif here: https://docs.generateblocks.com/article/grid-overview/#grid-items-with-same-or-similar-stylesIf you run into difficulties, please let me know what it is so I can help you more efficiently 🙂
Perfect! I was not understanding how to ADD other containers other than the initial screen of choices.
The sample GIF’s illustrated it exactly.
Thank you YING!
Awesome 🙂
Glad to hear that!
Ying,
I created two grids – each with multiple containers – using your advice. In one grid I styled each container separately. But it was time consuming.I want to now create a style that adds a bottom border and a right border to each container within the grid.
I tried this (added style to advanced CSS):
.gb-grid-wrapper>gb.grid-column>.gb-container .border-test {
background-color: var(–base);
border-right-style: solid;
border-right-width: 4px;
border-bottom-style: solid;
border-bottom-width: 4px;
border-color: #ff9900;
}Then added the .border-test to the grid “Advanced CSS” box. But it did not work.
Any hints are appreciated.
Thank you!If you have GB pro, there’s a feature that allows you to copy the style of one block and paste the style to another block which is really an efficient tool.
Then added the
.border-testto the grid “Advanced CSS” box. But it did not work.Make sure it’s only
border-testbeing added to the additional CSS class field, do NOT include the.🙂
- You must be logged in to reply to this topic.
