How to center entire columns on a page, and have it stay responsive?


Page in question:

I just want the two columns to be centered in the page (but the text left-aligned still). I would prefer to use the columns block over the html one, but the only suggestions that I’ve found so far (with results close to what I want) involve the html block. I am currently using the below code to achieve what you see:

    <h2><div style="position: relative; width: 700px; margin: 0px auto;">
<div style="float: left; width: 310px; margin-right: 80px;">
<a style="color:#000000" href="tel:+1-250-295-0766"><i class="icon-phone" style="margin: 7px 7px 0;color: #990000"></i> (1)-250-295-0766</a><br>
<a style="color:#000000" href=""><i class="icon-envelope" style="margin: 7px 7px 0;color: #990000"></i></a>
<div style="float: left; width: 310px;">
Princeton, BC <br>
PO Box 1054

Which looks ok on desktop, although still not quite as centered as I’d like (which I imagine I can fix by playing around with the widths and margins more), but on mobile the entire second column is off the page on the right side – not what I was after lol.

How can I fix this?
Or better yet, is there an easier way to center columns using the blocks?

Silbernagel Enterprises 4 years 2019-10-22T08:45:22-05:00 0 Answers 74 views 0

Leave an answer