Can't get mobile view to work with Rows/Columns (using Twisted template)

I’m using the Twisted template to build off of.

I’m having trouble figuring out how to get my sections to properly stack up in a mobile view. I know it has something to do with how I’ve setup the images and that I’m using fixed position for my text content, but I can’t figure out what to do to fix it.

Any insights or help is appreciated.

Here is my published site: LINK

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @rishi

Thanks for reaching out regarding your issue with the mobile layout of your site.

I see that you’ve used position:absolute for your text. That is the main reason why your layout is broken on the smaller devices.

Are you using the absolute position simply to align the text to the bottom of the column?

One of the easiest and best ways to do that is to use flexbox.

  1. Remove the absolute position from your div block
  2. Select the Row and change the display setting to flex. Choose Align:End
  3. Now make note of the class that is applied to this row. Then, select each of the other rows on your page and apply the same class to them.
  4. Now, go to the Tablet view and fix the padding on the Section Main features class
  5. On Mobile, change the flex setting of the row to Vertical.
  6. Make any other changes to get the design that you want.

Here’s a video I made showing you how I did the above steps: Screen Recording 2018-09-05...

Hope this is helpful. If you have any other questions, please don’t hesitate to reach out again, and we’ll be happy to help!

All the best,
Anna

1 Like

Hey Hi Annakelian thanks for your answer its very helpful.

1 Like

You’re most welcome @vigneshbe

Glad to help :relaxed:

Thank you Anna, this was extremely helpful! I was able to make the changes and for the most part get things to look as I needed!

The only thing I would prefer to change, and I’m not sure it’s possible, is the ordering in mobile portrait of the columns. I’d prefer to always have the text first if that’s easy to do.

This should be possible within flexbox but I noticed your read-only link isn’t live anymore. If you’re still having trouble I’d be happy to take a look at it once you get another link created.

Thanks @mikeyevin. I’ve reactivated the read-only link. I’ve got most everything else cleaned up. Just the ordering of the columns when in mobile view. Any insight you can provide on that would be appreciated!

Hi again @rishi

I’m glad you were able to make the changes and fix the layout.

And yes, as @mikeyevin said, you can do that with flexbox.

  1. Go to the mobile view (landscape or portrait) where you want to switch the text to the top
  2. Select the column that contains the text for the first section
  3. Add a class. Call it “text column” for example.
  4. Under the flex item settings in the style panel, choose override order. Place first will be selected by default.
  5. Now select the column that contains the text in each of your other sections and apply the same class to them.

Like this:
https://cl.ly/fd01623d41bc/Screen%252520Recording%2525202018-09-06%252520at%25252009.14%252520AM.gif

Hope this is helpful.

1 Like