Trying to horizontally center two columns within a row (or container or section)

Support
#1

I show a two column section on a smaller page width (section 3 “PartersMedium”). I cannot figure out how to get the two columns to be horizontally centered within the row. The text within the column should not be centered. The columns are fixed to 315px via CSS.

#2

To see the section with two columns drop the page width to below 980px.

#3

Hello @DodgersWin,

Thanks for asking. :slight_smile:

Can you please confirm whether section has been added as I am trying to see the page on mobile device and Chrome dev tools responsive simulator and I don’t see the section PartersMedium? Please confirm.

Thanks.

#4

It’s there but I misspelled it. Should be “PartnersMedium”. Not sure how it will look on mobile. Haven’t taken it that small yet.

#5

Hi There,

You can set your columns text align option to center and that will center everything inside it.



Then set your text elements text align option to left, if you want it to keep left align.

Or

You can add an ID partnersmedium to your section



And then add this to the page CSS area.

@media (max-width: 979px) {
	#partnersmedium .x-anchor.x-anchor-button {
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
}

Hope that helps,
Cheers!

#6

Thank you for your help. Unfortunately, it didn’t seem to work. I attached a screen shot showing the columns continue to align left. I’m sure I’m doing something wrong. I would like the text to keep their existing alignment.

#7

Hello @DodgersWin,

Thanks for updating the thread.

Please try adding following CSS under Pro > Theme Options > CSS:

div#partnersmedium .x-container {
    display: flex;
    justify-content: center;
}

Please let us know how it goes.

I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#8

Works perfect. thank you. I’ll check out the crash course.

#9

We are delighted to assist you with this.

Cheers!

#10

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