Website not working on mobile phones

Classic Themes
1

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

prob
prob320×568 36.5 KB
![prob2%20copie|281x500]
LINK TO MY PROBLEMATIC WEBSITE

2

prob3%20copie
prob3%20copie320×568 38.2 KB

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

3

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

4

The font size on your header is too large.

5

Another option is to use…

.hero{overflow:hidden;}
1 Like
6

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

09
09564×998 229 KB

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

7

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

8

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

57
571607×396 66.3 KB

9

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

10

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

11

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

12

Dear Rob,

it worked, thank you very much!

Best wishes,

Arne

13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.