Website URL is https://parkkafeengjovik.no/
Everything looks good on my phone (I have an iphone plus) and on desktop, but I’ve had several people with the normal sized iphones say that the phone number in the footer is appearing a bit wonky. The number is just meant to be in one line instead of two. I’m not sure why it’s appearing like this, is there any way to fix it?
I’m using the horizon theme.
Try this css
.footer a[href^=“tel”],
.footer p {
white-space: nowrap;
}
in
Online Store - themes - edit code - base.css (or theme.css)
This is just standard text wrapping. Smaller screens run out of room, so the browser breaks the text at the spaces in your phone number.
Two ways to fix it:
The easy way: In your theme editor, replace the regular spaces in the phone number with non-breaking spaces. On Mac press Option + Space, on Windows press Ctrl + Shift + Space.
The CSS way: If the editor strips the special spaces, go to Edit Code and add this to the very bottom of your main CSS file (usually base.css or theme.css):
footer a[href^="tel:"] {
white-space: nowrap !important;
}
Just a heads up, forcing it to one line might make it overlap other footer elements on super narrow screens, but usually it’s fine.
I can see what’s happening! In your footer the number has a line break between “Telefon:” and the actual number, so on smaller screens it wraps onto a third line and looks off.
Quick fix — go to Online Store → Customize → Footer and find the phone number text block. Put “Telefon: +47 952 85 459” all on one line with no break between them.
Then add this small CSS under Online Store → Themes → Edit Code → base.css (or custom CSS):
css
.footer p { white-space: nowrap; }
That forces it to stay on one line regardless of screen size. Should sort it on all iPhones!
Option 1 worked! Thank you so much