Text aligned right on web is not center aligned on mobile

I have center aligned the whole website for mobile (CSS used is attached below), however this particular section does is not center aligned while viewing on mobile. Could someone please assist me on this matter? Thanks

@media only screen and (max-width: 640px) {
p, h1, h2, h3 {
  text-align: center;
  }
}

Web view:

Mobile view:

Can you share your website URL so I can give you some correctly targeted CSS for this? Thanks!

6 hours ago, Ziggy said:

Can you share your website URL so I can give you some correctly targeted CSS for this? Thanks!

https://www.ucollabholdings.com/values

If every piece of text on your website wants to be center aligned on mobile then you code (with a slight tweak) should work fine:

@media only screen and (max-width: 767px) {
h1, h2, h3, h4, p, a {
  text-align: center !important;
  }
}

If you want to target it just to certain pages, I would suggest adding page IDs like this:

@media only screen and (max-width: 767px) {
  #collection-63c8259c98ccce0339280130, #collection-63c865b2552b551c7de79343 {
    h1, h2, h3, h4, p, a {
      text-align: center !important;
    }
  }
}

This would just target the home and values pages. More IDs can be added, comma separated.

I have a similar problem, whenever it's viewed on mobile the text that should be aligned in the center appears to be shifted to the right, could anyone please help?



https://swan-coyote-5l6c.squarespace.com/

pw = bongo

21 minutes ago, Assad said:

text that should be aligned in the center appears to be shifted to the right

I can't see any text that is center aligned or shifted to the right. I don't see the problem you're having on the website or in the screenshots you provided.

Can you provide a little more context? 

On 4/21/2023 at 4:03 PM, Assad said:

I have a similar problem, whenever it's viewed on mobile the text that should be aligned in the center appears to be shifted to the right, could anyone please help?



https://swan-coyote-5l6c.squarespace.com/

pw = bongo

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.fe-643d37df5d41246dce6a7211 {
    grid-column-gap: 20px !important;
}
}

@Ziggy @tuanphan unfortunately this did not resolve the issue, I'm afraid. Would you have any other suggestions? Thanks a lot for thinking a long, appreciate it!

3 hours ago, Assad said:

@Ziggy @tuanphan unfortunately this did not resolve the issue, I'm afraid. Would you have any other suggestions? Thanks a lot for thinking a long, appreciate it!

 

 

You can fix this by going into Mobile view in the editor and aligning the blocks.  Your blocks all start on grid column 2 (slightly to the right) in this section.  

Grab each block and center it on the page.

Your current position is

grid-area: 2/2/5/10

I think you want:

grid-area: 2/1/5/10

Once you have your blocks centered, you can just choose to center align the text.