How do I centralize the text in shapely on my phone?

Hi!
I’d like to get help, when I access my site through my computer it looks nice, but when I do it on my phone the text is all aligned on the left.
My site is http://anaishimoto.com/

thank you!

Hello Anna

this is how it should work normally, however this CSS code can help you to center them:

@media only screen and (max-width: 600px) {
#shapely_home_parallax-3 .mb32 {
text-align: center;
}
}

Hi! Thank you it worked, but only with the text from one widget!

The buttons, the titles, the images and the text from other widgets are still aligned to the left :frowning:

Good morning Ana

Well, code actually was created only for that section, you can use this code for global changes:

@media only screen and (max-width: 600px) {
.mb32 {
text-align: center;
}
}

Hi there! good afternoon

I don’t think it worked :confused: the text is still centered as I’d like but every other element is still aligned to the left.
Is there any way I can get everything to be in the center? The title, the button and the images?

Good evening Ana

Ok, try this code instead:

.mb32, p {
text-align: center;
}

Hi there! Good evening :slight_smile:

Still nothing… The text is centered but all the other elements are not!

Good morning Ana

Hm, can you show me and screenshot? im curious why I can’t see it

Sure!

Thank you Ana :slight_smile:

use this code now and I believe this will work :slight_smile:

a.btn.btn-lg.btn-filled {
margin: 0 auto;
display: table;
}

Hi there!
It worket with the buttons! :slight_smile:
I’m sorry to keep bothering you with this :confused: But I have two other questions now, do you think you can help me with that?

  1. centralize the titles and the pictures
  2. is there any way to keep just the home parallax button side by side?

Thank you

Let’s do it Ana :slight_smile:

Now, use this css code:

div#shapely_home_parallax-4 h3 {
text-align: center;
}

#shapely_home_parallax-3 a.btn.btn-lg.btn-filled,
#shapely_home_parallax-4 a.btn.btn-lg.btn-filled {
margin: 0 auto;
display: table;
}

and remove this one:

a.btn.btn-lg.btn-filled {
margin: 0 auto;
display: table;
}

AW PERFECT IT WORKED
I ONLY NEED TO CENTRALIZE THE IMAGE NOW <3

Good morning Ana :slight_smile:

let’s add this code now:

@media only screen and (max-width: 768px) {
#shapely_home_parallax-4 .col-md-7 {
width:100%
}
}

IT IS PERFECT NOW THANK YOU SO MUCH merry christmas <3 hahaha
I’ll miss you though thank you!

Thank you, my dear :slight_smile:

If you have any question about this theme about anything im always happy help you

Following you on Insta

This case is closed