My buttons are stretching vertically

Design help General
1

So I’ve been making some good head way and this sit is beginning to look almost respectable .

https://preview.webflow.com/preview/sunfoundrysolarmarket?preview=7b15381b53b846918e1c8e504418c3d4

I am a complete noob. Two questions

  1. I’m considering keeping a video for the top hero but my understanding is that background videos do not work well on mobile. How to disable and replace with a different image on mobile?

  2. I placed a button at the bottom of each GIF (step of service process) as a call to action but when viewed on mobile the button gets all weird.

Any other feedback would be awesome.

Thanks,

https://preview.webflow.com/preview/sunfoundrysolarmarket?preview=7b15381b53b846918e1c8e504418c3d4

Here is my public share link: LINK
(how to access public share link)

2

Answers:

  1. New video background on mobile? - General - Forum | Webflow

  2. Add a fixed width to your buttons, or use columns and add the button inside of them, using padding will not do the trick; when switching to mobile the result is too much padding, that is why your current method does not work.

Hope this helps. :sunglasses:

3

Thanks Vladimir. I see now how to make fixed buttons. But I think I’m missing something more fundemental.

Again forgive the noob, but how do you arrange the layout so it is properly responsive when cascading down devices.

Clearly I’m using too much padding and my buttons are ending up off the viewable screen on the phone devices etc.

Do I have to manually make changes at each device level to to properly display? That seems the opposite of what webflow is intending to do?

918×589 101 KB

4

The better way to do this and get the results you are looking for is to NOT use Margin as you do … rather add a div, have the CSS of the div added text align in the middle, add your button inside the div, and give the button a set width, This way the button will always stay in the middle, and after that simple edit the width of the button for the different devises if needed.

Also, its good to use columns when possible.

Hope this helps. :sunglasses:

5

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