Having problems with text inside flex container

[Spinner]

I am running the very latest version 17
I'm brand-new to using responsive tools so please go easy.

The problem is if I create a flex container and then open up a text box and type in some text then copy/paste that text box a few times, some of those text boxes when I put inside the flex container justify to the center (as the flex container is configured and as expected) and some of them left justify.

After inspecting the text boxs (outside of the flex container) I noticed that nine squares that define the text container go ultra wide on some of them after being put into the flex container which forces the left justification. And if I removed the text box from the flex container and drag that text container to just be the size of the text and put it inside container it goes right back to being ultra wide this is only on some text containers and not others and I can't figure out why? Full width option in the text box properties is de-selected..
Don't seem to have any problem with images.

[Pablo]

There is most likely a conflict in your flexbox settings.

To be able to help you, I need a DEMO project so I can see all your settings.

Note: I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Please see this FAQ for further details:
viewtopic.php?f=10&t=82134

[Spinner]

Thanks Pablo

It is here:

http://www.datapath.mobi/

When I put the image in it was centered in the flex container, when I added the text that forced it over to the left.

Is there no way for me to upload a screenshot to the forum?

[crispy68]

@spinner, we need a copy of your project file. Due to the numerous options in WB, we cannot tell what your issue is by looking at the generated html. Please provide a copy of your project file (.wbs) to download and look at. Also, please describe what it is supposed to look like when correct (ex: is the picture to be on the left and text on right? text below the image?, etc.) In other words, please describe the results or desired outcome you are trying to achieve in this example.

[BaconFries]

Is there no way for me to upload a screenshot to the forum?

Uploading images to the forum is blocked for security reasons. If you wish to show a screenshot then either upload it to your own host or upload to one of the many image sharing hosts. As mentioned to help you need to upload a basic copy of your project this is the .wbs file this allows us to view all settings you have applied.

[Spinner]

Thanks guys,
okay, that makes more sense, I have put a button on the page to download the WBS file and a screenshot of the program at http://www.datapath.mobi/

What I'm trying to accomplish is what I think I specified in the flex container which is the text and the picture are centered and equally spaced not crammed over to the left.
The problem is that when I will move the text into the flex container it expands the size of the text box and I cannot shrink it in or out of the flex container.

[crispy68]

So here is what you need to do to center the image and text inside the flex container:

1. Right click on the text box and select Flexbox. In the settings change Flex Grow and Flex Shrink to 0 and click ok. Select the textbox and you should now be able to grab the side of it and resize it down to the size you want.

2. Double click on the flex container and set the Justify Content = Center.

If you need some spacing between the image and text box, simply add some left padding to the text box.

[Spinner]

Thanks crispy68,

That worked, like I said first day trying to figure out responsive websites.. Lots of options in different ways to do things and its hard to know which path to go down.

In a larger general sense what I'm trying to create Ultimately is a page (at 1920 pixels wide maximum) that has multiple images with text associated to each image (along with a PayPal Buy box) . I'm thinking 5 to 6 images and text boxes wide on each row maximum. I want the text to stay associated with each image as the width of the screen decreases on tablets and smart phones and the rows turn into columns. I'm trying to figure out if I should use a flex container, flex grid, layout grid, card container, blocks or what the heck?

Any light you could shed on this would be greatly appreciated.
also any places to go for instructional videos besides YouTube?

[alan_sh]

Have a look at cards and card containers.

There's a not very good example here http://www.giantsseat.org.uk/whoweare.html

Alan

[Spinner]

Thanks Alan,

Looks like cards and containers might work for me, do you know if there is a way to have it dynamically change the number of columns depending on screen width without using breakpoints?
For example on a fullwidth screen you have six cards wide and as you shrink the screen it then goes to three wide and two high and then it goes to two wide and three high then it goes to one wide and six high as you shrink the width without having to specifically set that up within each breakpoint?

[alan_sh]

I think it's automatic. But I bet Crispy can find some code to fix it