Help! H1, h2, h3 headings do NOT appear on iPhone mobile website (iPhone 11 - to latest model).

SUNSEASOL
Tourist
12 0 1

Please can someone help me asap, I am even happy to pay a small fee. As really need to get this sorted.

 

Headings (h1,h2,h3) do not appear on iPhone devices ranging from iPhone 11 - iPhone 15 Pro Max. They flash once and then disappear forever.

 

They display perfectly fine on iPad and Desktop and earlier iPhone models. Please can someone resolve asap? It makes my website look incomplete and unprofessional.

 

I have circled in yellow - where they should appear. 

 

Using broadcast theme.

 

Website: https://madsunsea.myshopify.com/

 

image0 (7).jpegimage1 (6).jpegimage2.pngimage5.jpegimage6 (1).jpegimage7 (2).jpegimage8 (1).jpeg

Replies 5 (5)

BSSCommerce-HDL
Shopify Expert
750 246 255

Hi @SUNSEASOL
I checked your site and i see it worked

BSSTechVenture_0-1716201935993.png

If you need any assistance, please let us know. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
SUNSEASOL
Tourist
12 0 1

hey, what iPhone model are you on? I have iPhone 13 Pro max and it doesn't work. Many thanks, Mads

tim
Shopify Expert
3578 304 1332

I also can see your fonts on both Simulator IOS 15.4 and my iPhone SE 2020  IOS 17.4.1. Safari. Here is the actual shot of my screen 🙂

Photo on 20-5-2024 at 8.38 pm.jpg

 

The only thing I am not quite happy about is 

 

h2 {font-family: mark my words !important;}

 

 

As I already said, I'd prefer it to be like 

 

h2 {font-family: "Mark My Words" !important;}

 

 

What's your IOS/browser?

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
SUNSEASOL
Tourist
12 0 1

Hey Tim! Thanks, can you screenshot where that code appears? As i cannot see it in my coding without the quotations! Many thanks 🙂 

tim
Shopify Expert
3578 304 1332

These are in your Custom CSS settings, I believe.

You have a lot of similarly looking codes in different places -- better to keep it in one place and avoid duplication

Screenshot 2024-05-20 at 8.58.06 pm.png

Line 2887 -- opens style tag 

Line: 2889 -- nested style tag -- invalid HTML

Line 2892 -- everything after </body> is technically invalid HTML

Line 2890 -- defines font-face Mark My Words. Also contains h2 {font-family: mark my words !important;}

Line 2893 -- defines font-face "Mark My Words" -- duplicate definition.

Line 2908 -- another rule for h2 font-family.

2906-2909 -- triple nested style tag -- invalid HTML.

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com