Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Mum-Folk

Fonts not aligning to centre or formatting correctly on mobile

Question

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
 

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
  • 0

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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
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?

Share this post


Link to post
  • 0

Also realised I'd added an extra ! at the end of '!important' so removing this has aligned the text to the centre on mobile!

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...