CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
kingkhan kkhan
kingkhan kkhan

Reputation: 179

Media query working in chrome and Firefox desktop but not in mobile devices

I have a website, when i did the media query its working correctly on my chrome and Firefox when i resize it for different devices, but when i view the website in mobile devices its got alignment problem, mainly in iPhone mobiles which i am not able to view in chrome and Firefox, so am not able to fix it

My head section is like below:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- css file -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Responsive stylesheet -->
<link rel="stylesheet" href="css/responsive.css">
<!-- Title -->
<title>BookTheParty</title>
<!-- Favicon -->
<link href="images/favicon.png" sizes="128x128" rel="shortcut icon" type="image/x-icon" />
<link href="images/favicon.png" sizes="128x128" rel="shortcut icon" />

Here is my website link : https://demo.booktheparty.in

Can anyone please tell me how can i view the alignment problems correctly or whats wrong with it.

Thanks in advance

Upvotes: 0

Views: 90

Answers (1)

Prakash Karena
Prakash Karena

Reputation: 2595

Responsive CSS Should be in

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }

@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }

@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Problem is in your responsive CSS. I hope this will help you.

Upvotes: 1

Related Questions