Jump to content

How can I fix the heading of the Mobile version of my website?

Go to solution Solved by tuanphan,

Recommended Posts

I've noticed when viewing the Mobile version of my website that the heading for it is off-center and is hugging the right side of the webpage, I've tried adjusting the size of the text as well as adjusting the size of the block. I've had some results where the text has gone from this(See Ex. 1) to somewhat of a correct format(See Ex. 2). However once it had the 'correct' format, it was still hugging the right side of the page and at this point reached a size small enough if ruined the look all together. How can I go about fixing this issue with the heading? It's almost as if it doesn't allow me to utilize the space I have set for my block, no matter what I do I can't get the text to leave the right side of the page. Adjusting the alignment did no good either, it adjusted the text to align on the left while still hugging the right side of the page, this was the same for all alignment changes. I've also noticed that while making these changes it also changed the way my Desktop website appeared. How could I go about making this change specifically for the mobile version of my webpage?

IMAGES FOR EXAMPLES ARE PROVIDED AT THE BOTTOM!

Ex. 1 (How mobile looked, hugs right side of page):
"H

E

L

L

O"

Ex. 2(Somewhat of a correct format, while being too small + hugging right side of page)
"hello, we-
lcome to
the web-
site"

The goal is for my mobile website to display the header in the center of the page, just as it does on the Desktop version of my website. I know some adjustments will need to be made in regards to text size and such which I'm fine with, I'm just genuinely looking for a way to properly have this scaled, positioned, and only affect the Mobile version of the site. Any information would be a massive help, thank you in advance!

Example 2.png

Example 1.png

Edited by OfficialBoog
Noticed it affects my Desktop website after posting!
Link to comment
  • Replies 3
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

Not sure why, but I see some code appears in source code, make text align right

image.thumb.png.d5e583b45af3aa094d59766c3c25a506.png

You can use this code to Website > Website Tools > Custom CSS to fix this

Or you try remove section > add new section > Add text again

@media screen and (max-width:767px) {
h4[style*="margin-left"] {
    margin: 0 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.