Align Content Center on Mobile View

Support
#1

The product category section on my homepage looks good on desktop, but the left alignment looks bad on mobile. Is there any way to make that section centered on mobile view only?

Thank you!

Jesse

#2

Hi Jesse,

Thanks for reaching out.

That’s doable, first, please inspect your text element and add this CSS to Element CSS

@media ( max-width: 767px ) {
$el, $el.cs-ta-left {
text-align: center !important;
}
}

Cheers!

1 Like
#3

Sorry, Element CSS does not appear to be an option for me. I’m not using Pro, i’m using regular X Theme. Can solutions for regular old X theme? I haven’t updated to Pro because every time I’ve updated to Pro in the past it removes my ability to edit any of the websites content. It always forces me to remake any page I want to edit, and I don’t have that kind of time unfortunately.

Jesse

#4

Hi Jesse,

To clarify, the feature Element CSS is available to both X and PRO.

We can actually make this simpler, by using a CLASS. To do this, please add this to Theme Options > CSS

/*center text on mobile*/
@media (max-width: 767px) {
	.mobile-text-center {
		text-align: center !important;
	}
}

Then apply the class mobile-text-center to your text/headline element.



With that class the text/headline alignment will change to center on mobile.

Hope it helps,
Cheers!

#5

Ok, thank you, that worked for everything accept the buttons.
I find a different post that referenced a code, but it makes the buttons full-width.
Is there anything I can change within the code below that will make the buttons max out at 60% width?
I tried max-width: 60%; but it didn’t work.

@media (max-width: 480px) {
.x-btn {
display: block;
float: none !important;
margin: 0 auto !important;
}
}

#6

Hello Jesse,

The max-width should work in your code:

@media (max-width: 480px) {
  .x-btn {
    display: block;
    float: none !important;
    margin: 0 auto !important;
    max-width: 60%;
  }
}

Just make sure that after your site changes, clear all you caches before testing the site again.

Please let us know how it goes.

#7

PERFECTTTTT.
Thank you!

#8

You are most welcome!

#9

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