+ 2

Read CSS on iPhone

I copied an HTML code with CSS and everything works perfectly fine on all my computer browsers, but when I want to open both files on my iPhone I can't read the CSS file and so, the HTML fine doesn't apply the css code. Is that normal? How can I fix it? The code comes from a YouTube tutorial: IT'S NOT MY CODE I just liked the tutorial and decided to copy the code (https://www.youtube.com/watch?v=sJcAgWkjMt4&list=PLyq9LGyObwbQuWKtyh37rqAwUYfTHSewI&index=11&t=1s). This is the HTML code: (I only modified one icon that works well on the computer browser) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neumorphic Radio Buttons</title> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <p>Are these buttons cOoL?</p> <div> <label> <input type="radio" name="cool"> <i class="fa fa-heart" aria-hidden="true"></i> </label> <label> <input type="radio" name="cool"> <i class="fa fa-times" aria-hidden="true"></i> </label> </div> </div> </body> </html> CSS code below as it does not fit here.

css html5

30th Dec 2020, 10:47 PM

Cristina ɐuᴉʇsᴉɹƆ

16 Answers

+ 5

Cristina ɐuᴉʇsᴉɹƆ I assembled the HTML & CSS as a web code here, and looks like it's working well. I don't know why it's not working in your phone, assuming you put both HTML & CSS file be saved in the same folder. It's also strange how the CSS file looks blank when you open it. https://code.sololearn.com/WdAX74I9U7tq/?ref=app

31st Dec 2020, 2:14 PM

Ipang

+ 4

Please clarify what you mean by "can't read the CSS file on my phone" the meaning is vague, it could be - Not able to open the file for editing - CSS doesn't effect page - CSS isn't visible in browser's code viewer/inspector Also if possible, save the code in SoloLearn and share its link in thread Description above, so everyone can take a closer look. https://www.sololearn.com/post/74857/?ref=app

30th Dec 2020, 11:09 PM

Ipang

+ 3

Cristina ɐuᴉʇsᴉɹƆ For future reference, please share a saved code link instead when posting a question. You wouldn't have to worry about character limits if you saved the code and share its link instead of raw code Follow this guide if you didn't know how (or forget) 👍 https://www.sololearn.com/post/75089/?ref=app

31st Dec 2020, 2:17 PM

Ipang

+ 2

I mean that the css file does not affect the html file and that when I open the css file it looks blank. I cannot share the code because I followed a youtube tutorial so I copied the code. Sharing it here would be very wrong as the code is not mine.

31st Dec 2020, 9:59 AM

Cristina ɐuᴉʇsᴉɹƆ

+ 2

Can you edit your original post Descripton and add a note that the code originated from a YouTube video, and including the YouTube link please? might help those who wants to check by viewing the video. There can be various reasons to these, from CSS link path problem to unsaved edited CSS file. It's difficult to tell with so little info available.

31st Dec 2020, 10:12 AM

Ipang

+ 2

CSS code: (There was no room for it in the OP) @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #091921; } .container { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } .container p { color: #215e65; font-size: 20px; font-weight: 500; margin-bottom: 5px; } .container label { position: relative; } .container label input { appearance: none; -webkit-appearance: none; cursor: pointer; } .container label .fa { position: relative; width: 40px; height: 40px; background: #091921; line-height: 40px; text-align: center; margin: 0 4px; color: #6f6f6f; font-size: 16px; border-radius: 50%; cursor: pointer; box-shadow: -1px -1px 3px rgba(255,255,255,0.1), 2px 2px 6px rgba(0,0,0,0.8); } .container label .fa:hover { box-shadow: -1px -1px 3px rgba(255,255,255,0.1), 2px 2px 6px rgba(0,0,0,0.8), inset -2px -2px 10px rgba(32, 31, 53, 0.5), inset 2px 2px 10px rgba(0,0,0,0.5); } .container label input:checked ~ .fa { color: #00fff1; box-shadow: inset -1px -1px 3px rgba(255,255,255,0.1), inset 2px 2px 6px rgba(0,0,0,1); text-shadow: 0 0 5px #00fff1, 0 0 20px #00fff1; }

31st Dec 2020, 1:32 PM

Cristina ɐuᴉʇsᴉɹƆ

+ 2

THANK YOU!!! It works!!

31st Dec 2020, 3:37 PM

Cristina ɐuᴉʇsᴉɹƆ

+ 2

Kode Krasher Thank you for stopping by And for explanation 🙏

31st Dec 2020, 4:01 PM

Ipang

+ 2

Ipang what I did was to open your assembly link, save it as one of my codes in my profile and it was perfect. Dummy me didn’t think of copying the code in this app to see it with my phone. As you said, there’s no way I can run files locally on my phone without using an app like sololearn. But it’s ok. Now I know that I can copy whatever code I have here and run it on my phone. I’m happy with that. I just wanted to click the buttons with my fingers instead of with my mouse cursor :) So thank you again and happy new year!!

31st Dec 2020, 7:36 PM

Cristina ɐuᴉʇsᴉɹƆ

+ 2

Kode Krasher thnaks for the tip. I also code on mac so I will follow your steps. Happy 2021!

31st Dec 2020, 8:17 PM

Cristina ɐuᴉʇsᴉɹƆ

+ 2

Not an Apple user so I got no idea what you guys talk about But still ... Happy new 2021 year Best of wishes 🙏

31st Dec 2020, 10:23 PM

Ipang

+ 1

You're welcome. But you didn't tell what did you do to solve the issue. You can share it here, in case it comes useful for someone who may be facing the same problem in the future 👌

31st Dec 2020, 3:52 PM

Ipang

+ 1

Kode Krasher oh thanks. I will stop trying to do the impossible then. Thanks for explaining clearly the issue.

2nd Jan 2021, 8:33 AM

Cristina ɐuᴉʇsᴉɹƆ

Maybe you don't have a good editor in phone Cristina ɐuᴉʇsᴉɹƆ or maybe the both files are not in same folder link tag href needs to be in same folder if not you have to give folder/folder/css and there are many issues can be happen So we can't say any specific solutions

1st Jan 2021, 5:58 PM

Sayyam Jain

Sayyam Jain Both files are in the same folder, I made sure of that. I don’t have any editors on my phone other than this app, so maybe that’s the case.

1st Jan 2021, 9:06 PM

Cristina ɐuᴉʇsᴉɹƆ

Try Spck Editor

19th May 2022, 12:40 PM

Llàtzer