I am trying to center a button horizontally within the middle column of set of 3 columns.
I am having a really hard time figuring this out in a way such that it looks good across devices. I feel like I’ve had this problem a number of times and so it would be great to know going forward.
Hi @josh_elkin
Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.
Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow
Thanks in advance! 
Here is a screenshot. What else do you want to know? When you say ‘environment info’ what do you mean exactly?
We would also need your read-only link to dig into your project:
Like this?
The way I usually do it:
Here is the link: https://preview.webflow.com/preview/centered?preview=ac8f372aeaded5f93fd9f3e0b3dfa8ab
HTH.
-Dave
I need to put a read only link to my website on a public forum? Can I just send it to you?
Thanks Dave - that did the trick.
Thanks to @dkenzik I got the horizontal center piece figured out, but I now have a problem with the Vertical.
@PixelGeek - I now have the following issue:
When I go into preview mode at first on home, it works fine - it’s centered vertically. LIke this:
When I go to another page on the site, though, and then go back to home, it is no longer centered vertically. It looks like this:
Why the change here? I am looking at the same page in both cases - Is this a glitch in Webflow or am I screwing something up?
Hi @josh_elkin, perhaps instead of using columns to center your content, I would put the button inside a div that is 100% width, and then set the button to relative position, left and right margin set to auto and display block. This will center the button horizontally.
Then you could adjust the top relative position of the button and vertically center it quickly. That is one method you could try to get a consistent result
I am happy to look at the site directly, if you do not want to share your link, you can send it to me via PM.
Fantastic - thanks @cyberdave!
Hopefully this isn’t bad etiquette but this was virtually the same problem I was encountering
Good to hear these things are simply solved. I was having the same issue so tried some of the tricks and it seemed to work. But I wanted to do something slightly differently which is to put a button in each column to fill the full ‘Horizontal mobile’ and repeat 3 more rows.
The first button seemed to fill the 1st column perfectly but when I copied the Div to next 2 columns it looks different.
Any suggestions that can help me fix this?
Hey @Blake_Duerden , try sharing your site via this method instead:
Thanks. Hopefully this is the correct link
https://preview.webflow.com/preview/thanxmas?preview=ede5c15aa47edc27bc289de4631973d6
Hi @Blake_Duerden, thanks for the link You could try removing the Column class on the column and give your Lightbox a class and set that to 100% width. Select the grid image class a width of 100% also.
See if that helps, see my screenshot, is this what you are trying to achieve?
Cheers,
Dave
Hi Cyberdave. That’s not quite what I’m aiming for. I’m trying to create a fullscreen grid of buttons that when clicked launch videos (see below). I’d like this grid to be flexible to fit all mobile screens and so I’m putting the titles as live text rather than graphics
The concept is to have the video screen grid only available when in landscape mode. When phone is vertical, it will show a landing page with message.
Hi @Blake_Duerden, thanks that helps. So you want to show the grid on landspace mobile and hide that and show some other content on mobile portrait right?
