Having problems with text inside flex container

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
Spinner
 
 
Posts: 16
Joined: Tue Nov 18, 2014 6:05 pm

Having problems with text inside flex container

Post by 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.
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Having problems with text inside flex container

Post by 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
 
 
Posts: 16
Joined: Tue Nov 18, 2014 6:05 pm

Re: Having problems with text inside flex container

Post by 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?
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Having problems with text inside flex container

Post by 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.
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

Re: Having problems with text inside flex container

Post by 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
 
 
Posts: 16
Joined: Tue Nov 18, 2014 6:05 pm

Re: Having problems with text inside flex container

Post by 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.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Having problems with text inside flex container

Post by 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
 
 
Posts: 16
Joined: Tue Nov 18, 2014 6:05 pm

Re: Having problems with text inside flex container

Post by 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
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Re: Having problems with text inside flex container

Post by 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
 
 
Posts: 16
Joined: Tue Nov 18, 2014 6:05 pm

Re: Having problems with text inside flex container

Post by 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
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Re: Having problems with text inside flex container

Post by alan_sh »

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