RWD not working on iOS

Hello everyone, I'm having weird issue with RWD on a simple page i made for a friend. Section about me doesn't show properly on Iphone (navigation, styling) while it works perfectly fine in devtools. What could be the cause of this? Media queries?
10 Replies
Chris Bolson
Chris Bolson17mo ago
You would need to share the URL or some code to be able to help you identify the issue.
Gainzzu
Gainzzu17mo ago
Sure thing! Website is hosted here https://narewskamakeup.pl/ Github: https://github.com/klukas18/makeup-website Keep in mind I'm just starting using github so it's not the best thing on earth. I don't even know yet how to upload the project to make it look complete (imgs not loading, styles not working and so on). Well this is my 1st project so it's messy. I'll gladly accept any criticism 🙂 P.S. Any good git / github courses you could recomend? Thanks for your time
GitHub
GitHub - klukas18/makeup-website
Contribute to klukas18/makeup-website development by creating an account on GitHub.
Shadab🐐
Shadab🐐17mo ago
Sir, Why are you not changing the flex-direction of .intro to columns and rather using flex wrap. Perhaps you can try that approach once, and see if it is working. Somehow it is working fine in Dev Tools. P.S - I am a complete beginner and have been learning daily. So my answers are based on my knowledge till now.Thank you I changed the flex-direction and order the image to -1, it is behaving similarly.
Chris Bolson
Chris Bolson17mo ago
Your intro_text has a width of 70% which it maintains even on lower screen widths. However, I suspect that, as you mentioned in your inital post, the main reason why you are having issues could well be due to how you are defining your media query. You are using the newer range syntax @media (width < 768px) and this may not be supported on all the browsers. Try changing it to the traditional method and see if it works.
Gainzzu
Gainzzu17mo ago
Well I tried and changed it to @media screen and (max-width: px) and the issue persists... crrrrrrap
Chris Bolson
Chris Bolson17mo ago
Have you updated the live version? It looks better now on my iPhone. Earlier it was showing the intro section in 2 columns but now it is showing a single column
Chris Bolson
Chris Bolson17mo ago
Gainzzu
Gainzzu17mo ago
Yes I did. Actually @media screen and (max-width: px) helped. I thought it didn't first, but I tried cleaning website viewing history and after that the styles updated. I hope they work just fine now.
Azyrum
Azyrum17mo ago
It's looking good! A bit off-topic but for the carousel you can use swiper.js, no need for all that js x)
Gainzzu
Gainzzu17mo ago
Yeah I know there are plenty easier ways to make carousel 😛 I just wanted to make this one line-by-line
Want results from more Discord servers?
Add your server