Docs

[nikolasa]

I’ve got text I’d like centered in mobile, but it is in a column. I’d like all columns centered on all pages. Attached is how it looks now on desktop (which is fine, left is aligned right and right column is aligned left) but in mobile I’d like both columns centred (other attached image is how it looks).

Thanks in advance!

[nikolasa]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 767px){
    .page-id-24 #x-section-5 .cs-ta-right,
    .page-id-24 #x-section-5 .cs-ta-left,
    .page-id-24 #x-section-7 .cs-ta-right,
    .page-id-24 #x-section-7 .cs-ta-left {
        text-align: center !important;
    }
}

http://i.imgur.com/Pe4jnHQ.png

http://i.imgur.com/YNhXAsf.png

Hope it helps 🙂

[nikolasa]

Perfection!! I’ve tried to do the same on the home page but am having trouble working out which tags to include…

@media (max-width: 767px){
    .page-id-5 #x-section-1 .cs-ta-right,
    .page-id-5 #x-section-1 .cs-ta-left,
    .page-id-5 #x-section .cs-ta-right,
    .page-id-5 #x-section .cs-ta-left {
        text-align: center !important;
    }
}

I am using inspector to try to identify what code to use but am stumped. Sorry I’ve managed to get the rest of the page centred just that area of text is being stubborn! xox thanks!! Simply LOVE your support!!

[nikolasa]

This reply has been marked as private.

[Friech]

Hi There,

Please check your whole custom CSS here: http://csslint.net/ address all the errors (you can ignore the warnings).

And then add this on your @media (max-width: 767px) block.

.home #x-section-1 .x-text {
	text-align: center;
}

Hope it helps, Cheers!

[nikolasa]

This is what I have but it’s not working

media (max-width: 767px){
 .home #x-section-1 .x-text {
	text-align: center !important;
}

[nikolasa]

With the extra } at the end, sorry didn’t fully copy it but its there

[nikolasa]

With the extra } at the end, sorry didn’t fully copy it but its there.

I’d like both columns to be centred – and neither is.

[Paul R]

Hi,

Please try adding this as well.

media (max-width: 767px){
 .home #x-section-1 .x-column.x-sm {
    padding:0 !important;
}
}

Hope that helps

[nikolasa]

Ok, that is still not working >

@media (max-width: 767px){
.home #x-section-1 .x-text {
	text-align: center;
}
}

Attached is what we get. I’ve checked all my css and all errors have been sorted.

[nikolasa]

This is what I have in total:

@media (max-width: 767px){
.home #x-section-1 .x-text {
	text-align: center !important;
}
}

@media (max-width: 767px){
 .home #x-section-1 .x-column.x-sm {
    padding:0 !important;
}
}

[Christopher]

Hi there,

Please update your code to :

@media (max-width: 767px){
.home #x-section-1 .x-text,.home h4  {
	text-align: center !important;
}
 .home #x-section-1 .x-column.x-sm {
    padding:0 !important;
}
}

Hope it helps.

[nikolasa]

PERFECTION!! That worked perfectly!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts