www.wysiwygwebbuilder.com

I have some long articles that need a couple pictures inline all in one column. I've started to watch tutorials on layout grids, but they don't seem to have what I need, or I don't understand. Before I dive into long videos, could someone suggest the best way to approach my simple layout?

When you say inline all in one column, do you mean picture at the top and all text underneath? Do you have an example of what you are looking for?

Thank you. Well I'm not sure how to add a photo here. But my screen print looks like this:

[A bunch of paragraphs]

Image

[A bunch of paragraphs]

Image

[A bunch of paragraphs]

Image
etc.

I'm thinking...

Use a layout grid and a card.

Here's an example https://www.dropbox.com/s/c1rb0c573ua0m ... c.zip?dl=1

Have fun

Alan

Thank you....that link didn't work...I think it's missing something.
Oh I see the all the link is there. I tried some other dropbox links from your posts, but they didn't come either.

The link works ok for me.

Got it. Thank you. Really appreciate your help.

A simple layout grid also works. Just insert your text followed by your image and repeat. To add spacing between your text and the previous image just add some top padding to the text object.

Crispy - I tried that first and it all depends on the width you select and how wide the layout grid cell is. Also, as you reduce the size, the text can 'underlay' the image as it resizes itself.

I found that a card was much easier and produced the results the OP wanted.

Alan

@Alan,

I guess i'm not understanding. How is the text going underneath the image? If the image is set to full width this doesn't happen. If I select the image to not be full width and just use it's original size, I still don't get the text to go underneath the image. It still works for me. Maybe i'm not understanding your exact set up. To me adding a card to a grid only adds additional code to the page that may be unnecessary if the layout is very simple.

Did you look at what I uploaded? (the WBS file). What issue are you having with it?

Alan

Yes, it's just a card in a layout grid.

I was referring to your statement:

tried that first and it all depends on the width you select and how wide the layout grid cell is. Also, as you reduce the size, the text can 'underlay' the image as it resizes itself.

While cards have their purpose, I think crispy68 is right.

teterpi, what you are looking to do is very basic grid layout functionality. With the layout grid you have the option of setting your text and image pairs in a single column all the way down the page, or as an alternative side-by-side (2 column) for larger screens, then "stack" (single column) with image on top of text (or vice versa) when being viewed on smaller screens by setting a breakpoint in the layout grid settings.

You can see an example in a website I am currently working on:
http://compasssleep.com/
and
http://compasssleep.com/aboutus.html

It is text left of image, then text over image on smaller screens, but you can easily reverse that by switching where you place the objects in the layout grid. I hope this helps.

I started a new project file after reviewing help from forum. The layout grids for text and pictures are staying lined up. So it seems like my old file was just not working, maybe because I made so many changes on many pages...?

Can you provide me a demo project with what you're trying to do? You can send it to me at ron@wizbangwebdesign.com

What i envision is very simple but maybe I'm missing something and seeing your setup will help.

To protectourlands -i just saw your Post. Yes, if I could only do something like Compass and it does seem simple. That's very nice by the way. The layout grids seem to have their own mind. I generally understood what you were saying....I'll keep trying.

You bet. But take crispy68 up on his offer. He is top notch when it comes to using the layout grid.

Layout grid is a very powerful, feature rich tool. Remember each column in the grid can have its own justification value (left, right, center). These can also vary by breakpoint. It is likely you were not setting the correct justifications in your first attempt.

Also, If you need to change the order of columns or the vertical alignment in different breakpoints you will need to set the Grid System to Flexbox or CSS Grid instead of the default layout grid. You run the risk of older browsers not supporting these attributes, but I don't think there are many users left with browsers that old so I don't worry about that.

So glad it eventually worked out for you.