Hi,
I´m trying to design a simple 2 items flex.
On mobile, small and medium device it ok but on larger devices the area where I want blue background it is white. I tried setting the background of the flex to blue but then the problem is the image to the left.
I tried doing this with grid instead bit this kind of design it´s probably best to use a Flex?
You want the blue background and text to appear on the left hand side and the radio on the right when on larger devices?
If that is what you want to do I can record a video showing you how, but here’s a screenshot to get you started.
I want the radio on the left and the blue background and text on the right side on all exept for mobile. Problem is that the blue color does not fill the space.
It looks like you have some padding/margin set on the the larger size around the blue box.
Without seeing the project or how you’ve built it, it’s hard to know how to fix it. Feel free to share the project via Elements Cloud and we can take a look for you.
This screenshot makes me wonder how Containers and Flex relates to each other:
Should Flex always be nested into a Container?
Must there always be a Container inside of a Flex?
How does a Container of type Flex Item behave without being nested into a Flex?
I would be happy if you could provide more details about the commonalities, differences and inter-dependencies of these two components. Thanks.
No, you can mix and match components in whatever makes sense for the page you’re working on.
No. The reason to add a Container inside of a Flex is if you require fine grain control over CSS flexbox settings.
You would place a Container inside the Flex, and then set the Container to be a Flex Item - this then exposes detailed controls for flexbox settings on the Container.
If you just need a simple flex layout you can place any component directly within a Flex.
I can’t see any reason why you would do this, but you can! If you did, then the Container would get the applied the flexbox settings, but they (likely) won’t have any effect.
