Alternating columns, change order on responsive mobile view

Hi, hope you’re all well,

In short classic alternating columns on desktop view to change ‘order’ on responsive-mobile-view to standard image then text.

It seems quite straightforward I’m afraid; 2 of us have followed this guide here to the T, but can’t seem to get it working :frowning: How to make responsive alternating content layout stack on top of each other on mobile

Any advice would be greatly benneficial!

Many Thanks

G


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

This can be done with flexbox.

1 Like

A BIG cheers @aaronocampo! :grin:

Thanks so much for getting back and answering that, explains a lot!

1 Like

Still can’t get the order of the video/text - text/video to change on mobile to be video text, video text. Can anyone help? https://fortress-8fb916.webflow.io/

Hi Lea, looks like you got it working?

If not, on mobile view, change it to ‘flex’ like in the image and press ‘reverse’ :+1:

Screenshot 2021-04-23 at 17.03.51

Cheers

G

1 Like

Yes managed to sort it though not sure I am handling the video div size correctly - It needs to scale up and down proportionally - on some screen sizes it is cutting

Cant see the read-only link, but cropping usually happens when there is a set size in px, have you set the width only to be 100% or auto, another point mentioning is sometimes having divs within divs can give better control as they create child elements.

Hey thank you for helping me out https://fortress-8fb916.webflow.io/ the thing is that when I set it to auto the proportions of the video are not maintained

Can be frustrating that send over a read-only link and I’ll have a look

Cheers

https://preview.webflow.com/preview/fortress-8fb916?utm_medium=preview_link&utm_source=designer&utm_content=fortress-8fb916&preview=d365baa4ed7a7ababa2201a1cf4b105b&mode=preview

cheers :slight_smile:

2 possible ways for this -

  • bring in a standard video block with no settings - I often find background elements can be hard work, also worth noting that background images don’t go through the auto-optimizer leading to large file sizes (not 100% if this applies to the thumbnail on the video). Also the server may not love uploaded media files leading to glitches (this was the case with wordpress i cant be certain on webflows servers.
  • Apply width 100% and auto to the parent div ‘animation 1’.

It’s all about the content dictating the size and not forcing or stretching dimensions.

This may be more what you’re after, but i find controlling space before/after can be tricky

as you can see the only dimension we are dictating is the height of the parent div, but play around with this, the basic concept is; get the content to dictate the size, then you can set it to widen or shrink with perspective according to the screen size.

See how you get on.

Cheers :+1:

G

Thank you so much for helping me out with this much appreciated will give this a try - though for a normal video I don’t want the users to have to press play and I want the video to loop.

I tried the video like this https://d2mdid28tvyhht.cloudfront.net/videos/animation-section.mp4
and like this https://d2mdid28tvyhht.cloudfront.net/videos/animation-section.webm? but it didn’t work.

yeah nothing is straight forward right!

So with youtube vids and the like, you can instructions in the address - HOWEVER, different browsers act differently, so chrome may stop autoplay embed, have to test. Maybe stick to the second method if you don’t want to go insane testing!

but it would look something like this:

https://www.youtube.com/embed/Yo19ZhO7CAc?autoplay=1&loop=1&cc_load_policy=1rel=0&controls=0&showinfo=0&playlist=Yo19ZhO7CAc
```

It doesn’t seem to be working on all screen sizes https://preview.webflow.com/preview/fortress-8fb916?utm_medium=preview_link&utm_source=designer&utm_content=fortress-8fb916&preview=d365baa4ed7a7ababa2201a1cf4b105b&mode=preview

It’s really difficult to control

I think you’ve fixed it now over at - Alternating columns with background videos - responsiveness - #3 by Lea_Munzer

Good luck with the rest of the build :+1:

Yes! Thank you so much.
Though I wonder for accessibility reasons if background videos are the right solution.

There are two bugs that I am still struggling to fix! Been on it for hours… the menu on mobile disappears and the ‘start free trial’ button is not linking.

Pleasure.

Not sure about the accessibility, i’d just be mindfull if those thumbnails are being auto compressed, or having to load to the max, check gt metrix for that.

‘Start free trial button’, this one always catches me out, so see everything on layers - bump it to the top by setting it to relative and check 999 in the z index (higher the number the higher the layer) this will make it not get hidden and hence clickable.

As for the mobile nav, i usually save a big headache by dragging in a new nav element and then see why that works by comparison, in my case it’s usually that I’ve deleted an element by accident.

Hope that helps, Site is looking great by the way :slight_smile:

Yes! Yes! it worked thank you so much! :blush:

Hey!

May you help me with this please? - struggling to get answers on my posted topics…

My register interest modal only works once second time around it loads the background only.
Do you know what might wrong there?

Really appreciate your help! https://preview.webflow.com/preview/6point6fortress-8fb916?utm_medium=preview_link&utm_source=designer&utm_content=6point6fortress-8fb916&preview=d365baa4ed7a7ababa2201a1cf4b105b&mode=preview

Hi, Sorry it’s hard to check as I don’t have the published link,

But if you’re on the same user page visit, the forms usual behaviour is (send > capture > success) as a one-off and not looped, maybe this can be changed via javascript, probably a reason for this one time deal though covering anti-spam.

The form is standard html though, so if you export it the answer may be out there on a larger code specific forum like stack overflow etc, or start a new thread here via code issues.

Cheers

G