Alignment of content within columns

Design help General
1

Hi all,

Just have a quick question regarding alignment with columns. I have a section with a row of two columns and have text in one column and an image on the other column. I’m having difficulty setting the text to float left and the image to float right. Currently, the text and image are stacked.

I’d like it to be like this:

Take Photos
Take Photos1440×844 158 KB

Currently like this:

57 PM
57 PM986×558 105 KB

My read-only site link is below and my question is regarding an issue on the Kickstand page.

Here is my site Read-Only: https://preview.webflow.com/preview/deans-portfolio-d2c64f?preview=b0c423b17f6383ac29c59cd98b08dc86

2

Why don’t you just do this with Flexbox? Add a Section for full width, no styles needed. Add a Div set to flex - horizontal. Add 2 Divs that stack side by side - set to expand.

3

Thanks so much for your response! I did everything as you suggested and it’s appearing in the editor, but when I preview it’s not showing. And in other sizes (tablet/ mobile) it seems to be fixed on top of other sections. :upside_down_face: Working with Safari @ the moment.

4

Hmm… I looked again, you must be in it now? Did you move the hands, I don’t see them?

5

That’s the thing. I see it in editor, but when I try to preview it, it doesn’t show up (?)

6

Oh you’re doing this from the Editor, not inside the Designer, right?

7

I’m sorry, I was a bit confused! (I’m learning Webflow as I go.) But I was working in Designer. Sorry for that!

8

Haha, no problem, we’re all glad you’re here!! Okay I see “Select Mechanic Based on Reviews”.
Go to Take Photos layer and change it to “Inline Block” in display settings.

9

Hey Dean,

I don’t want to pry, but here’s what you’re going to need to do … ehh… start again by:
For each section named, add a “Section” component! It will go full width and you’ll only need height value. Then drag in your individual elements and remove all those margins and padding settings to everything. You should get all that back to basics. Then I’ll help move elements around. But add all your Sections first.

Click on the Body layer in the Navigator, and simply go click on Section component, don’t drag in. It will show up at the bottom in Navigator. Then you’ll drag to top just under the Body layer. Give it a class of: Section - (Name). Do this for all your layers.

Trust me, it’s the best organizational layering. Your divs are overriding each other. But individual Divs don’t control themselves like Sections do. Sections are the best for the beginning of all your content. Others do it differently, but it’s my strongest recommendation. :mage:

10

Here’s a video example, give me a sec. I’m gonna do it in your link. Okay I see those that have Sections already, so no need to video it. The ones below that don’t just move them into a Section, then the flex will work. I couldn’t see what they were. Let me if you get it.

11

Thanks so much for taking the time to explain and show me how to do this. I’ll follow your steps and let you know how it goes! :pray:

12

Just to clarify, you’re suggesting that I start from scratch (for that page), right? For that specific section, I’ve added the elements as you’ve guided and not sure how to move around the elements to achieve the layout in the original post. Also, side-question: how do I adapt this layout for mobile? I’m very new to flex and how it functions. I’ll have to do some reading on what it is and what it’s capable of.

13

Yes it’s a little challenging at first, but after a little while it makes a lot of sense. I may have over-spoke, not necessarily starting over, but using those Sections without styles as the beginning. Then using a div wrapper as the container of content. Then divs as inner blocks. You’ve done the first part.

Using flex as positioning, does require a little thought; a tad bit more than columns, but similar in nature. Flex gives more (oh boy, I can’t help myself), more ‘flex-a-bility’ :sunglasses:

The major benefit is fluidity with responsiveness. Columns don’t really have the same capabilities. Do this; once you get started adding the suggested div layering, don’t hesitate to message me on my profile, and I’ll be available anytime to help you get across the finish line. I’ll create videos with step by step clips that will help add clarity. Just shout out whenever you need!

14

Thanks for helping out! I’ve placed all of the elements for that section in a div wrapper and have a question regarding the positioning. I would like to have the paragraph text under the header, but not sure how to do that :upside_down_face: Also, for the image to float right. How would I achieve this?

Currently it looks like this:

55 AM
55 AM990×382 118 KB

Read-only link:
https://preview.webflow.com/preview/deans-portfolio-d2c64f?preview=b0c423b17f6383ac29c59cd98b08dc86

15

Hey there, okay let me view your file now… one sec. Oh I see, you’re using columns throughout. So the way to stack/wrap the “Paragraph 3” layer, is to Clear Left.

@deanchung
@deanchung1867×754 244 KB

16

Thank you for the solution for that section :sunglasses: Could you explain the function of the clear left/ right/ both? Couldn’t find an answer looking through the forums.

I was actually referring to the section named “3. Take photos of your bicycle” – that section is setup with flex. But not sure how to stack the text.

17

Oh sorry :blush: I’ll look again now…

18

Can I ask why all the sections are overlapping and touching each other? Add flex to “Section Take Photos”.

@deanchung-1
@deanchung-11874×791 215 KB

19

@garymichael1313

Just two quick questions. First, thank you for your continued help on this issue. I was able to use Flex to work out the issues that I had!

  1. I was wondering if it is ok to use the column setup and flex setup mixed throughout the website.
  2. And for some sections with flex…in mobile, it doesn’t scale down properly, so I’ve manually copied and modified it manually without flex. Is this common practice? Or is there a better workflow method?

Thanks again and hope you have a happy new year!

20

Hi Happy New Year!

No you’re fine in your questions. Look at this way. This questions can be identified in your mind as:

LAYOUT

For this, it’s about consistency throughout your site. There should be a flow, or alignment for the eye that creates complete understanding in the user experience. Page layout is “Exactly” the same as sitting at a table and speaking in person. Therefore, clarity is the goal.

That can be done with Columns, Tables, Divs, Sectons, Lightboxes, etc. However, be consistent on how the content visually hits the users eye. You can use any combination of these content containers - there’s no set rule. But, each page needs to follow a closely related layout structure. If one page has a column for features, then on the next page, try to refrain from using four divs to show about items. Go ahead and use a column.

Keep in mind, each content container will have different reactions to the web and responsiveness when it gets “squeezed or smaller”. Primarily where you’ll see the effects is “Horizontal Sizing”. Vertical is not that big a deal, focus on horizontal spacing when adding any content containers.

With that, you’ll need trial and error.

  1. Take one section, add your chosen content container, insert multiple types of components; image, buttons, whatever it may be.
  2. Then start shrinking it to table, mobile.
  3. Test it with other container choices, using combinations that you feel may be used in the site.
  4. Start by sketching a page - and deciding where content will be - then decide what is going to hold it, but do this consistently throughout. (Base on your tests) It sounds backwards, but do the test first.

Then you’ll get an idea on how things flow. As well, remember your text and photos will grow and may begin to max out it’s parent container. Mixing containers in month 1 is fine, until 8 months later, you want to add a new section; now your going back to the development phase to tweak layout. But it’s the sales phase, and now you’re delayed with design - again! … No fun.

When deciding between wrappers/containers, think what’s the max size I can get out of this structure? I think, you can see where this is heading?

My recommended layers:

  1. Section
  2. Div
  3. Div

I’d start moving away from ALL columns, but having one inner column is okay with small amount of content.

I hope this helps ya. And you’re not alone, web development is actually really hard. (Unless you’re selling wix) :wink:

Keep grinding!