Website not working on mobile phones

Hi there!
I built a website for my company recently using Rapidweaver 8 and Stack 4. (www.lorganisation.ca)
Everything was going well until I realized I have no clue how to fix this problem: the whole page just appears really bad on mobile phone (tested on 3 different models of Iphone).
Site banner, titles and slogans on most page don’t get properly resized so there are words missing… Let just say I’m not recommending my clients to consult the website because it’s barely usable, and it’s very likely that people will consult it on mobile phones.

If I remember well I started with the ENGINEER theme in Rapidweaver 8.

Can anyone help me? This is beyond my knowledge of html or codes. I convinced my business partner that I could make the website myself instead of contracting a webdesigner but they’re starting to make me regret my decision :slight_smile:

Thanks a lot

![prob2%20copie|281x500]
LINK TO MY PROBLEMATIC WEBSITE


This is what it looks like on a iphone 8 using Safari as webbrowser.

Happy to look at the project file and try to see what’s going on - if you want to send it.

The font size on your header is too large.

Another option is to use…

.hero{overflow:hidden;}
1 Like

Hello Joeworkman.
Sorry for asking, but due to my minimal experience,
can you tell me where i am supposed to paste that code you mentionned?

I looked everywhere also how to reduce the size of header font size, but couldn’t ajust it

@manofdogz Please! I would be really grateful if you can find what’s my problem!!

In the css part of the site wide code in the left side pane.

Tryed it, doesn’t fix the problem on mobile version (tried it again with Safari on Iphone8

Hello,
I’m afraid I have the same problem.

Unfortunately the text in title and slogan in the mobile version bursts over the edge.
The font size is set to the minimum of 14px, but that doesn’t change anything.

I have no idea where to change the font size of the title and slogan.

Do you have any suggestions?

Kind regards,
Arne

Hi again,

i’ve managed to shrink the title size with
h1.hero-title {
font-family: ‘helvetica neue’, helvetica neue;
font-size: 1.4rem;
}

but i’m not able to change the slogan.
With zero experience in coding i’ve guessed that it might be

h1.hero-slogan {
font-family: ‘helvetica neue’, helvetica neue;
font-size: 0.1rem;
}

but this didn’t work.

Kind regards,
Arne

This works

.hero-slogan {
font-size: 2.0rem;
}

or whatever you want the size to be, but you want to target a specific screen size. Maybe someone else can help with the correct @media argument which is what I think is required?
Rob

Dear Rob,

it worked, thank you very much!

Best wishes,

Arne