Jump to content

Fonts not aligning to centre or formatting correctly on mobile

Recommended Posts

Site URL: https://www.mumfolk.com

I'm having trouble formatting fonts on mobile. 

Couple of issues:

1. The fonts aren't displaying correctly when I view the site on my mobile phone (iphone 7) although they look differently when you look on mobile view on desktop

2. I would like to centrally align the text and buttons (standard buttons and buttons for forms)  on mobile but it's not seeming to work

I have 9 font styles in the CSS, not sure if that's causing a problem! Here is the code I have

@media only screen and (max-width: 640px) {
body {font-family: "aktiv grotesk", sans-serif; font-size: 14pt;
line-height: 25px; text-align: centre !important!;}
h1 {font-size: 35pt; line-height: 55px; text-align: centre;}
h2 {font-family: "Bely", serif;
font-size: 25pt; line-height: 38px;}
h3 {font-family: 'aktiv grotesk', sans-serif;
font-weight: 600; font-size: 12pt; line-height: 22px;}
h4 {font-family: 'Bely Display', serif; font-weight: 700;
font-size: 25px; letter-spacing: 0.03em; text-transform: none;
line-height: 1.3em; color:(#E7B1F2); text-align: centre !important!;}
h5 strong { font-family: 'Bely Display', serif; font-weight: 700;
font-size: 20px; letter-spacing: 0.2em; text-transform: uppercase;
line-height: 2.2em; color:(#000000); text-align: centre !important!;}
h6 {font-family: 'aktiv grotesk', sans-serif;
font-weight: 500; font-size: 12px; letter-spacing: 0.2em;
text-transform: uppercase; line-height: 2.5em;
color:(#000000); text-align: centre;}
h7 italic {font-size: 21pt; text-align: center !important!;}
}

Any suggestions would be very welcome! Thank you
 

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

I'm trying to align all text on mobile to align centrally as well as all buttons - have screenshot the homepage on mobile view which shows text isn't aligning as I've inputed in the code.

Also side note - some body copy text is appearing in bold and I have no idea why!!

Thanks so much in advance to any help 

Screen Shot 2020-04-12 at 11.06.01.png

Screen Shot 2020-04-12 at 11.05.50.png

Link to comment

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* Hey alen */
section#new-page-59 * {
    text-align: center;
}
/* want to know */
section#new-page-43 * {
    text-align: center;
}
}

bold text. Which text? You mean text under hey i'm helen?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
36 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
/* Hey alen */
section#new-page-59 * {
    text-align: center;
}
/* want to know */
section#new-page-43 * {
    text-align: center;
}
}

bold text. Which text? You mean text under hey i'm helen?

Hey thanks so much - yes the text under 'hey I'm Helen' is showing up bold for some reason, but not in the preview when formatting in the backend?

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.