# Max width of containers?

**URL:** <https://forums.realmacsoftware.com/t/max-width-of-containers/43857>\
**Category:** RapidWeaver Elements\
**Created:** [July 25, 2024, 8:07pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857 "2024-07-25T20:07:16Z")\
**Posts on this page:** 19\
**Page:** 2

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 31, 2024, 5:47pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/21 "2024-07-31T17:47:50Z")

</div>

Might not help but basics of flex

[https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png](https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png)

---

<div class="post-metadata">

**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\
**Post date:** [July 31, 2024, 5:48pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/22 "2024-07-31T17:48:22Z")

</div>

Will do! I’m learning, I’m sure I will master this. Getting lots of help reading about all the beta. RM has done a great job with this and it will only get better. They cannot account for my lack of web skills. 🙂

---

<div class="post-metadata">

**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\
**Post date:** [July 31, 2024, 5:49pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/23 "2024-07-31T17:49:53Z")

</div>

Thank you Steve!

---

<div class="post-metadata">

**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\
**Post date:** [July 31, 2024, 5:51pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/24 "2024-07-31T17:51:11Z")

</div>

a picture tells a thousand words! This is wonderful! Thanks!

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [July 31, 2024, 5:51pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/25 "2024-07-31T17:51:52Z")

</div>

> [@klap](#):
>
> They cannot account for my lack of web skills. 🙂

I would argue (and hope) that you shouldn’t need any web skills with Elements. While there are benefits to using actual terms from CSS and HTML in regards to developing an understanding the underlying tech/concepts, doing so can also create confusion as they don’t always translate to non-devs intuitively.

---

<div class="post-metadata">

**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\
**Post date:** [July 31, 2024, 6:06pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/26 "2024-07-31T18:06:15Z")

</div>

That would be an amazing goal to reach for RM. In this simple example in the photo, I wanted to left align the heading and the paragraph. I had to do that in a few places and use “Start” as there was no left. But I got there… This is not word processing Ken… I keep telling myself. 🙂

 ![2024-07-31_14-00-42](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/a/3a49e827924caed195627b43695af2f0bf5576ab.jpeg)

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 31, 2024, 6:21pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/27 "2024-07-31T18:21:30Z")

</div>

This image is fantastic and answers many questions; thanks for sharing.

---

<div class="post-metadata">

**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\
**Post date:** [July 31, 2024, 6:29pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/28 "2024-07-31T18:29:54Z")

</div>

Agreed! Steve thank you again. I have made some today progress because of this!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 31, 2024, 6:47pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/29 "2024-07-31T18:47:21Z")

</div>

you don’t need to read the code just check against Elements flex options  
check whether you are vertical or horizontal (column or row)

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 31, 2024, 7:18pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/30 "2024-07-31T19:18:36Z")

</div>

> [@anon68150607](#):
>
> I’m at the point where I don’t want all of the various container choices (container, section, flex + flex item and grid + grid item), but rather one container with the option to define it’s behaviour (block, flex, grid, etc).

I see what you’re saying, but my worry would be that this approaches leads us towards a “god component” (a very large, complex component that has many, many options). I think this could become even more confusing.

Let’s say we only have a Container, but it can be a grid, or a flex, or just a “div”. When the user switches the type we would need to present all the options for that type. It would be a lot of options appearing/disappearing and with no consistency across the Container (sometimes it has the grid options, sometimes the flex, sometimes neither).

> [@anon68150607](#):
>
> In terms of flex and grid, it can be assumed that any elements that are direct children of the flex or grid component are flex items or grid items. Having yet another container type to define flex items and grid items only complicates things.

You are correct, direct child elements are just “items” in a grid/flex. We’re aware this adds some complexity as it stands today.

We discussed this exact topic quite a while ago, and we want to improve on this so that a component could be assigned controls based on the parent component, but that’s not something that’s going to be added right now.

When we have this we will be able to remove the “flex item” and “grid item” components completely - as all they serve to do is expose flex/grid layout options.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 31, 2024, 7:28pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/31 "2024-07-31T19:28:40Z")

</div>

> [@klap](#):
>
> I have struggled with the Container, Section, Grid flex options for a few days now. I finally got a four card grid working

> [@klap](#):
>
> The biggest issue I’m having is learning how to nest the components. then trying to align the items in the components. I keep trying to align the actual text object and such. But the alignments are in the flex items, grid items, grids and sections and so on.

The idea behind the Core components is to allow complete flexibility to create any layout you can imagine. We want to give you as much power as possible with these components - that’s why there are a lot of options and the property controls use technical names.

Our vision is to help you to learn these powerful Core components so you can create any layout you wish, however, we see most users going to the pre-built Section components as a first stop.

There will be a lot of Sections to choose from covering all types of layouts and designs; menus, footers, cards, galleries, banners, and so on.

The Sections will cover most use cases for most users. They will have less options, be more user friendly with regards to property names (left/right instead of start/end), but still allow you to customise them enough to make them your own.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 31, 2024, 7:37pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/32 "2024-07-31T19:37:02Z")

</div>

I can understand why you decided to put a flex in a grid item (it can be useful/needed in some layout situations), but this can actually be achieved with a much simpler component structure:

 ![Screenshot 2024-07-31 at 21.31.19](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/4/a471a89936689e1c55ab458665a599b9fcdb055f.jpeg)

The only really “tricky” bit was knowing the right sided Grid Item with the text in needed to have the `Align` option set to center:

 ![Screenshot 2024-07-31 at 21.35.18](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/f/3f6d0bd3eacc7e94768ecf6c94b42e146cd3e7cd.jpeg)

Let me know if you have more questions 🙂

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 31, 2024, 7:54pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/33 "2024-07-31T19:54:14Z")

</div>

grid poster, might help or not

[![](https://css-tricks.com/wp-content/uploads/2022/02/css-grid-poster.png) ](https://css-tricks.com/wp-content/uploads/2022/02/css-grid-poster.png)

---

<div class="post-metadata">

**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\
**Post date:** [July 31, 2024, 8:06pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/34 "2024-07-31T20:06:58Z")

</div>

Hi Bon,

I did as you suggested and it worked well. I think this is the issue for non-coders, which way to do this. Your solution is beautiful and does the same thing. Today’s lesson learned is to try and perform the task at hand with the least amount of components and see if the task can be achieved. if not add from there. I’m just thrilled that your solution worked. I overworked it for sure. It shows that more is not always better. Thank you for the help, it is most appreciated. I did go back and remove the padding on the grid and added the grid to a container as you did. All works good.

 ![2024-07-31_16-01-30](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/b/1b9f5ce5db9de7c58c40e906069d607d3e28fd7d.jpeg)

---

<div class="post-metadata">

**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\
**Post date:** [July 31, 2024, 8:08pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/35 "2024-07-31T20:08:39Z")

</div>

Thanks for the Grid Poster Steve!

---

<div class="post-metadata">

**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\
**Post date:** [July 31, 2024, 11:57pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/36 "2024-07-31T23:57:15Z")

</div>

> [@klap](#):
>
> Ok heart on sleeve here with this reply. I’m the perfect user candidate. I’m not a coder. I have struggled with the Container, Section, Grid flex options for a few days now.

I’m a ‘me too’ here. I’m not a (web) coder but have fairly decent Wordpress experience.  
I appreciate all the answers in this thread and I’ll be looking at the attached posters shortly.

The Elements market will be less code focused so having the GUI clear and logical is important. For me it would be clearer if the supplied sections were functional and could be studied ( that’s not intended as a criticism, just an observation).

Maybe @dan could do a Dev Diary going through the various components and describe their best use cases. If you want to have a background image use this, if you want a centred hero image use this, if you want a responsive group of items use this.

I’ve really enjoyed his videos but his familiarity with the product makes it look easier than it actually is, and it’s easy for him to skip over the reasoning for doing particular things in a particular way.

---

<div class="post-metadata">

**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\
**Post date:** [August 1, 2024, 11:20am UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/37 "2024-08-01T11:20:00Z")

</div>

+1 for this idea.  
I am trying to wrap my head around when to use container vs section vs flex

---

<div class="post-metadata">

**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\
**Post date:** [August 1, 2024, 5:03pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/38 "2024-08-01T17:03:31Z")

</div>

@ben  
Ben, I’d have to say for simplicity, a master ‘container’ component is the way to go here. I found it very confusing to have to choose between two different ones & I can imagine how confused regular users would be. Any advanced controls can be collapsed or put in their own sub column to hide them from the casual user.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 1, 2024, 7:00pm UTC](https://forums.realmacsoftware.com/t/max-width-of-containers/43857/39 "2024-08-01T19:00:50Z")

</div>

> [@trinube](#):
>
> Maybe @dan could do a Dev Diary going through the various components and describe their best use cases. If you want to have a background image use this, if you want a centred hero image use this, if you want a responsive group of items use this.

Yes, we certainly plan to do videos for all Components to show the basics. We’re just holding off slightly as everything is still changing and any tutorial videos we record now will be out of date VERY quickly.

Having said, in the meantime, maybe I could start to cover the basics in the weekly dev diaries 🤔

[Previous page](https://forums.realmacsoftware.com/t/max-width-of-containers/43857.md?page=1)
