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
You would need to share the URL or some code to be able to help you identify the issue.
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.
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.
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.Well I tried and changed it to @media screen and (max-width: px) and the issue persists... crrrrrrap
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
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.
It's looking good! A bit off-topic but for the carousel you can use swiper.js, no need for all that js x)
Yeah I know there are plenty easier ways to make carousel 😛 I just wanted to make this one line-by-line