Help with switching column content layout in mobile

Design help General
1

https://preview.webflow.com/preview/hassans-stunning-project?preview=99cd355d809680dd1979279a4cb75ebf

http://hassans-stunning-project.webflow.io/

Hello Webflow family,

I am a new user (2 weeks) and could really use some design help from the community.

My product page has several product screen shots. The meat of the content starts with the heading, DISPLAY OUR SMS SHORT CODE ON ALL YOUR LISTINGS and ends with the heading, JOIN THE CONVERSATION AT ANYTIME.

The Desktop view, alternates the text and image in collumns from left to right. For example, in the first product screen shot, the image of a newspaper, yard sign, and website in circular format is in the left column, while the text, DISPLAY OUR SMS SHORT CODE ON ALL YOUR LISTINGS is in the right collumn.

998×474 32 KB

And then it alternates. The text is in the left column and the image is in the right column.

997×458 62.5 KB

The PROBLEM occurs on the mobile PORTRAIT version of the website. I want the text to show above the image, like this:

322×559 39.4 KB

Unfortunatly, Webflow defaults by putting ANY CONTENT in the left column above the content in the right column when STACKING the columns atop one another (like it does on the mobile version). Thus, my content is showing up incorrectly for every section when I put the image in the left column and the text in the right column:

322×542 17.2 KB

When I manually alter the mobile PORTRAIT content, all other views (desktop, iPad, mobile landscape) of the website are negatively impacted.

How can I fix this problem?

Thanks for any recommendations.

Best,

2

Hello @hassanriggs

I’m so glad you are using Webflow and your website really looks great already! :relaxed:

For this particular design, I suggest you use divs and Flexbox instead of the columns component.

This video here explains how you can use flexbox and starting min 3 it shows exactly what you are trying to achieve:

You can learn more about flexbox here as well: Flexbox | Webflow University

Please, let me know if this is helpful or if you have any additional questions, I’m happy to help further.

3

Hi Anna,

I watched the Flexbox tutorials and tried to use Flexbox on my site. But the interface in the tutorial doesn’t match the current interface. I left confused and frustrated.

Columns are much easier for me to understand. I watched a full website rebuild and I immediately understood how to use columns.

I know Webflow wants us to use Flexbox (and I’m sure it’s a great tool) but is there no way to use columns for my design? Until Flexbox gets more user friendly, I’d prefer to stay away.

1 Like
4

Hey @hassanriggs,

Do this

1359×1069 657 KB

And this on tablet breakpoint

1359×1069 326 KB

2 Likes
5

Hi @hassanriggs

I understand your decision.
But keep in mind that with columns, you can’t change the orientation of the content inside each column.

While with Flexbox, you can customise everything inside a column, from order, orientation, and even if it needs to change places on mobile.

This however won’t be done automatically, you’ll need to switch to mobile view, and set the flexbox as you want :slight_smile:

1 Like
6

Thank you @IggsTP, @zbrah and @AnnaKelian. I guess Flexbox is the only way for me to make this work.

I (really) did try to recreate the sites that were built using Flexbox. The design and interface in the tutorials are different than those in the current version of Webflow.

I’ll give this another shot and regroup. Thanks again.

2 Likes
7

@hassanriggs It’s completely normal… First time I tried Flexbox, I threw my laptop through the window and punched the wall (too much?)

It takes time, but it’s easy once you get a hang of it :slight_smile:

Basically, you want to have 2 columns (divs inside a section/container/div) and then alternate their position depending on devices :slight_smile:

But keep in mind that you give the flexbox to the parent, aka the box where the 2 columns are :slight_smile:
I’ll do some printscreens and drop them here soon :stuck_out_tongue:

8

No problem @hassanriggs,

Try the Flexbox game maybe :

https://preview.webflow.com/preview/flexbox-game?preview=d1a26b027c4803817087a91c651e321f&m=1

The best way to understand flexbox :wink:

Also have a look at this

And this

1 Like
9

@zbrah thank you for that, I hope @hassanriggs will give it a try
But in my case, that game only confused me :stuck_out_tongue:
I actually had to study the system by myself (I learn better that way)

@hassanriggs I’ve done some prints for you to see what I was trying to say.
I’m better at drawing than explaining something :L

I added one section, and then 2 divs inside :slight_smile:

1362×697 52.7 KB

Made it both divs to fill the space of the section, and then gave more flexbox settings so I could centre the text (horizontal for now)

1365×539 49.1 KB

This is how it looks without changing anything one mobile… not what I’m looking for :L

1363×552 51.9 KB

So I simply changed it to vertical, and inverted the divs :slight_smile:
But the information inside them, stayed the same (your headings and paragraphs)

1365×632 51.9 KB

I hope this helped :slight_smile:

1 Like
10

To say you @IggsTP are amazing would be a huge understatement. Thanks so much for the drawings; they help a bunch.

And thank you @zbrah for sharing the Flexbox game. You all @AnnaKelian, @zbrah and @IggsTP are top notch folks.

I’m having an issue with sizing one of my graphics, but I’ll create another post for that.

Thank you again friends. Can’t say enough good things about you.

3 Likes
11

We’re happy to help :slight_smile:

After all, I was once in your position and had help from everyone :stuck_out_tongue:

1 Like
12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.