Center align 3 columns only in specific mobile mode

Hello,

When in mobile mode (only needed in mobile mode for screens size 767px and smaller), I am trying to align 3 red buttons which each currently sit in a column (3 columns wide) on the homepage.

I’ve added the code below, and class name to the section and row, but doesn’t seem to work… What would I be missing?

@media screen and (min-width: 480px) and (max-width: 979px) {

.align-center .x-container.marginless-columns .x-column, .align-center .x-container.marginless-columns .x-column img {
left: 50% !important;
transform: translateX(-50%) !important;
text-align: center !important;
}
}

Hi There,

Thank you for writing in, please remove your custom CSS and add the custom CSS below to each of your 1/3 columns Element CSS area.

@media (max-width: 767px) {
	$el.x-column {
		text-align: center;
	}
}

Hope it helps,
Cheers!

Hey there! I’ve accomplished the above mentioned tasks, however the issue still exists. Would you be able to assist?

Hi there,

The solution @friech provided should have worked. Kindly make sure you have added the code in the Element CSS of the columns. Please see the screenshot below as a guide:

You may also add some padding to the code to add some space between the buttons like:

@media (max-width: 767px) {
	$el.x-column {
		text-align: center;
        padding: 8px 0;
	}
}

Hope this helps.

That’s the trick, thank you! Thank you @Jade for the added explanation!

Could that same code work for the same purpose but using it to center text, instead of a button? I’ve added it to the column in the teal bar “Buy your Tickets”…and nothing happens. I’ve saved and refreshed a bunch, what could it be?

Hi There,

Yes, you can use the same trick for other columns with text, just update my given CSS code to this:

@media (max-width: 767px) {
	$el.x-column .x-text {
		text-align: center;
	}
}

Add that to the Column’s Element CSS area.

Hope it helps,
Cheers!

That works! What about for a headline? I’ve changed .x-text to .x-headline below, but doesn’t seem to work?

@media (max-width: 767px) {
   $el.x-column .x-headline {
	text-align: center;
    }
}

Hi There,

The headline has a class of x-text as well, so the previous custom CSS should work with a headline too.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

Thank you. When I view the CSS code selector with the developer toolbar, the code seen is “x-column .x-text .x-text-content-text-primary”… when I apply, there are no changes? I must be missing something about this…

@media (max-width: 767px) {
$el.x-column .x-text .x-text-content-text-primary {
	text-align: center;
        padding-bottom: .5em;
}
}

Hi There,

Sorry for all the confusions, maybe let’s clarify this first, you’re referring to this text right.



So the selector .x-text .x-text-content-text-primary will not work on it.

Maybe instead of adding the Element CSS on the Columns, let’s target the text itself instead. So that would be.

@media (max-width: 767px) {
$el.x-text {
 /*css rules here*/
	}
}

For the headline element, that would be.

@media (max-width: 767px) {
$el.x-text.x-text-headline .x-text-content-text-primary  {
 /*css rules here*/
	}
}

You need to put this now on the Text/Headline Element CSS area (not on the column).

Element CSS Features

If that does not work still, please point us the said headline element, so we can take a closer look on it.

Thanks,

That makes sense , I understand now. Thank you for your help with explaining!

No worries, @RocktheHouse1876. Thanks for building with X & Pro, and have a great day!

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