Text under images at 563 breakpoint not wrapping

[rongreen]

At breakpoint 563, the text inside LayoutGrid9 and 6 are truncated and no matter what I try and change for the grid or text propterties I can't seem to fix what is being displayed in WYSIWYG. It does display correctly in "Preview in Browser". What am I not seeing? Help!'


Web URL for active site: https://www.alljoyjewelry.com/index.html

URL to ZIP file: https://www.greensphotoimages.com/alljo ... _help3.zip

[crispy68]

If it looks correct when you preview it but not when you publish it then more than likely you are missing some files or didn't update all the files that need updated. There is no difference between previewing and publishing.The same files are generated.

[rongreen]

Thank you for responding. I am now more confused than ever? What files outside of WYSYWIG would I be managing? When I make the changes it has been strictly within it, save, and then preview. I had no idea that there are other files to manage outside of it? What ones are you specifically referring to? If images, they are displaying as expected. If the text under them, as far as I know those are controlled by WYSIWYG settings.

[crispy68]

Do you have WB set to create separate CSS or JS files? If so, make sure you are publishing all files to the server so the most recent files are updated. Depending on what your page contains and your settings, there could be other files, folders that are created.

[rongreen]

Further clarification: I am talking about what I see in WYSIYG editing versus “previewing” it in the browser. It looks all wrong in WYSIWYG in the design view.

[crispy68]

I will have to download your file to see what you are referring to. Will be home shortly.

[crispy68]

I checked your project. The text does wrap and is not truncated. Just try double clicking on the text boxes.

However, the text doesnt look good in that breakpoint. I would look at using nested grids to get a better look for the images and text. Also, why did you create a breakpoint at 563 and 440. Seems awfully close together with only a 123px difference but you have a 717px difference between the default view and the 563px view.

[crispy68]

I took your project, changed the 563px breakpoint to 768px breakpoint (as it is more common) and used nested grids. You can download the changes here to see how it was done: LINK

[rongreen]

Thank you very much for the help and feedback!! I will take a look at the link and the example you did. Btw, there are about 8 other pages in my project. Some are the same structure, but differing in content. So I was hoping that what I mods I did on a specific page and breakpoint that when I picked under manage breakpoints to apply to other pages it would propagate across them, but they didn’t. Is that to be expected and I need to go page by page and configure each one separately?

[crispy68]

You can add the same breakpoints from 1 page to all other pages. But as to content, changes to grids, etc, no you can't do that. You can certainly clone a page and then just change out the content if the layout is the same.

[rongreen]

Thanks again for responding and your help, as well as the sample design. It greatly helped in clarifying things.

[Pablo]

The text is not truncated, but it is wrapped to the next line because there is no enough space to show the text on a single line.
If you make the text object taller then you can see the full text.

[rongreen]

Yes, I see that! Also, I reduced the text size down 2pnts as well. Thanks!

[rongreen]

Crispy68, so in lay terms what are the key advantages to using nested grids?

[crispy68]

I personally think it looks better the way the grids collapse and are stacked versus what you had and the flexibility for more complex layout. They get too small the way you had it.

What if you had 12 columns horizontally? squishing 12 columns into 768px width would be really tiny! For example, nested grids give you the flexibility to go from 12 x 1 to 6 x 6.

[rongreen]

Makes sense. You had two grids nested in one and the third row nested in a top level grid. Is that because you can only go 2 deep in a grid layout? What is the right practice to move a grid into one to make it part of a nested structure?

Lastly, I noticed that you had the top level grid set to 2 columns. I was wondering why not just 1 since you are nesting another two grids within it?

Thanks again for your help.

[crispy68]

You can go more than 2 deep but I would only do so if absolutely needed. I could have put grid #11 into the grid with the other 2 but that would change the order of how they are viewed when the grids hit their breakpoints. If it doesnt matter the order in general then you could put them all inside the same grid.

I only use nested grids when I need more control over how multiple columns will stack in breakpoints. Example, you have 4 objects. In a grid they would look like this horizontally:

X X X X

at the breakpoint they go to 1 column:

X
X
X
X

but I want it to go from 4 x 1 to 2 x 2 then 1 x 4:

X X X X

X X
X X

X
X
X
X

That's where nest grids come into play. Make sense?

[rongreen]

So in the last example, that is using 3 breakpoints, correct? Then at each one would you physically change the grids layout to meet those design goals (i.e. 4x1, 2x2, and then the last breakpoint 1x4)?

[crispy68]

I usually set the inner grids bp to change sooner than the outer grid. You should see that looking at my demo.

[rongreen]

Sorry, but I need to ask "bp"? Sorry, breakpoint! I think I need to take a break

[rongreen]

Sorry for all the questions. When I am looking at the Layout Grid properties for LayoutGrid3 at 780 bp, the field value for Breakpoint says "480". Shouldn't that be 768? For the 440 bp all the field values are set to 440.

[rongreen]

I just changed it to 440 and it stacked all the cells vertically. So the 480 is correct because you want it to not change until then.