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

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

SUNSEASOL
Tourist
12 0 2

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 Partner
2305 835 907

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

SUNSEASOL
Tourist
12 0 2

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

tim
Shopify Partner
3955 407 1466

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 2

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 Partner
3955 407 1466

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