0

Page in question: https://princetonfireandsafety.com/contact-info/

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="mailto:princetonfire@gmail.com"><i class="icon-envelope" style="margin: 7px 7px 0;color: #990000"></i> princetonfire@gmail.com</a>
</div>
<div style="float: left; width: 310px;">
Princeton, BC <br>
PO Box 1054
</div>
</div>
</h2>

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?

  • You might try asking over on StackOverflow because this is a very CSS-specific question unrelated to WordPress. – WebElaine Oct 22 at 13:52
  • @WebElaine Is it? Good to know, I'll head over there thanks. So there's no simpler way to do this within the block editor or anything then either? – Silbernagel Enterprises Oct 22 at 13:55
  • Adding HTML with inline CSS like this as a block really isn't the WordPress way. WP has a columns block built in that you can try - if it isn't responsive in the way you prefer, you can either create a child theme to style the Core block, or look for (or build) a block specifically the way you like it. If you just want to continue putting HTML and CSS directly into the Editor, it's a CSS question. If you're looking for more of "the WordPress way," this is the right site but you'll want to rephrase the question. – WebElaine Oct 22 at 13:59
  • @WebElaine I would much prefer the WordPress way! The problem is I can't figure out how to actually center the columns themselves using the block editor, although it is responsive as I would like. When I tried to search for ways to do it, I found the system I used on some older similar question on this site, hence why I figured here'd be the place to ask about it further. – Silbernagel Enterprises Oct 22 at 14:11
  • Gotcha. So your question sounds like it is really 2-part: one question is what CSS to use to get the layout you want, and the other is where to put that CSS. I would inspect a core Columns block and copy that HTML, then present it in a question on StackOverflow to see if someone can help you with the CSS. Once you know what CSS you want to add, you can then look up how to create a WordPress child theme - it's mostly just adding a few comments in a .css file and then pasting your styles right in. – WebElaine Oct 22 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.