Mobile website design?

Question

My website includes media queries to make the site mobile friendly and it works when I resize the browser on the desktop, but not on an iPhone or Samsung galaxy. I included the meta tag with content="width=device-width, initial-scale=1.0, user-scalable=no". It's like the newest css/html updates I push out are ignored on our smartphones even though they show on our desktops. We have tried clearing our cache as well. I have tried everything I can think of. The site is www.jakekellysarosiek.com. Any ideas? Thank you for your help!

Answer 1

Hello Jake!
I don't know if you've been changing anything since yesterday, it seems better now, no? Am I wrong?

Anyway, the main issue I see here is that you include the css framework that's responsive, but you're not really implementing it. You are using neither classes, nor grid that would grant you responsiveness like: w3-container, w3-row, w3-col s4 l12 m8 etc. Take a look at thier demo to see what I'm talking about:
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_gourmet_catering&stacked=h
In such a simple website, you didn't even need a css file, that's my point.

Anyway, using a lot of margins and width and height in pxs will generally mess up your site's responsiveness. Avoid that and use flex-box instead.

Apart from that, I just changed tdstory and tdimg and font-sizes in many places and I left a w3.css navbar, so you see how it would look like. I haven't changed much I think.
Is this what you had in mind?
https://code.sololearn.com/WqiLY467tc69/?ref=app

Answer 2

It doesn't seem to be working for me either. I will have to check the code, it doesn't look optimized to me.

Answer 3

For one, tell me, have you used any framework like bootstrap?

Answer 4

I've used w3.css once, it looks normal in the playground, I'm not sure what causes the problem but it's probably html structure, I'll have to sit at my computer and see what I can do. I hope it's not something urgent, I'll get back to you tomorrow. ✌️

Answer 5

Thank you! I appreciate any help

Answer 6

Your website need to be configured well in desktop version then mobile version works well.
I can see you have not structured the html well with their positions!
Fix all of the above problems will solve this issue.

Answer 7

Congratulations, by the way! 🎊🎊🎊

Answer 8

What do you need from me to check it out? I'm really stuck

Answer 9

No bootstrap.

Here is the code:
https://code.sololearn.com/WbmXGRufrVGF/#html

Answer 10

Adarsh, what do you mean by structured the html with their positions? Do you mean like put them nested in more div tags? Would you be able to give me an example? Thank you for your response!