Media Queries Ignored On Mobile Devices - html

I am working on making a theme mobile responsive. You can view it here, http://107.170.168.111/
When viewing on desktop and resizing the browser, it works fine. However, on actual mobile devices it doesn't seem to be working correctly (the sidebar should be hidden and a mobile nav should appear). It works on single post views such as: http://107.170.168.111/2015/04/27/szechuan-green-beans/#more-9327
but not on the actual index. I can't seem to figure out why.
My media queries, of course, are at the end of my CSS document:
#media screen and (max-width: 640px){
.hide-for-small{
display: none !important;
}
.show-for-small{
display: block !important;
}
.sidebar-container{
display: none !important;
}
#sidebar{
display: none !important;
}
.wrapper{
width: 100%;
}
#content{
position: relative;
display: block;
margin: 0;
width: 100%;
padding: 110px 0 0;
}
}
and in my <head> i have <meta name="viewport" content="width=device-width, initial-scale=1">
I'm pretty stumped, any suggestions? Thanks!
Update:
meta viewport is located in header.php - which is included on index.php, but for some reason is not being displayed. The same code is used on single.php which works.
Header.php -> https://gist.github.com/buschschwick/a7f67176e748c08e314a
Single.php -> https://gist.github.com/buschschwick/d3e2bdff07fffcb4b01a
Index.php -> https://gist.github.com/buschschwick/56576b2294b160271a3a
Solved:
A disabled caching plugin was still serving the old version of index.php that did not include the meta viewport. Thanks everyone.

Change your #media from "screen" to "all". You are targeting all devices not only screens:
#media all and (max-width: 640px){
// your css
}
EDIT:
When you view your source code, you cant find any meta tag for "viewport". I used your code and added viewport in my editor and it worked just fine:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Problem: the index page does not have meta viewport. You need to add that in index page.

Related

Why does my media query work in codepen but not vs code?

I tried adding a media query to my vs code project and just to check if it is working I like to do a small check of changing the background color. For some reason it will not work in vs code, Whenever I click inspect on the static page and lower the width the background color does not change.
I then went into code pen and tried it out there with the same code and it works fine there. What could it be? Is it a vs problem or something I'm doing wrong in the code?
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
body {
background-color: #2f2f2f;
}
#media (min-width: 300px) and (max-width: 768px) {
body {
background-color: yellow;
}
}
<meta name=”viewport” content=”width=device-width”>
As Quentin noted and I have confirmed, the quotation marks are messing with the meta tag. It should look like this:
<meta name="viewport" content="width=device-width" />
But when pasting your code, VS code auto corrects to this (improper):
<meta name="”viewport”" content="”width" ="device-width”" />
Hope this helps!

Navbar exceeding viewport only in mobile live server

I'm experiencing this strange behaviour in my webpage https://vinoreo.mx .
The navbar is exceeding the viewport in mobile - live server. Localhost works fine.
It happens only in the "/" route, the other routes show correctly the viewport.
Before loading all DOM elements the viewport shows correctly, but once the elements update (react front-end) this is when the problem appears.
The SPA uses this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Live mobile view using iPhone 6/7/8 Plus as reference
Localhost view using same iPhone 6/7/8 Plus as reference
As you can see footer navbar simply disappears and also the whatsapp and cart buttons which are also fixed, and come from the main top navbar.
I have reviewed my style.scss file and I have not messed with navbar class widths.
.navbar {
padding: 0.5rem 10%;
}
#media (max-width: 991.98px) {
.navbar {
padding: 2% 2%;
}
}
.nav-link {
padding: 0px;
}
.navbar-text {
padding-bottom: 0;
}
I'm using React-bootstrap classes which I believe are the regular bootstrap ones.
It took me some days and several attempts on moving css and finally solved it by adding this to meta content tag:
initial-scale=1,minimum-scale=1

Why CSS media query work in wrong manner?

I'm new in CSS, especially with media queries.
I've added this to my header tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and this in my body
<img id="title" class="title" src="image/ti.jpg" >
and at the end in my CSS file
#media screen and (max-width : 570px){
.title{
width: 80%;
}
}
My problem is that when I use device mode in Chrome developer tools, this code works fine, but when I change the size of explorer instead of operating in
width=570px
It happens in 160px.

Media Query not working on Iphones (Safari and Chrome)

I am creating a page with a button and inside this there is an arrow and text. So, the idea here is for the arrow and the text to be side by side, where the text is on the left and the arrow on the right.
The problem is: the css that i'm applying for responsive works well in my android phone, but it's not working on iPhones (and not working on Safari and Chrome inside the iPhone).
The button:
I have tried to change the sizing unit (from vw to percentage), in case it was not compatible with Safari browsers (that would be also weird) and tested again. the problem is still there and everything is okay on android.
The CSS code outside the Media Query:
.subs_arrow {
width: 13vw;
height: 5.5vh;
vertical-align: sub;
}
.subs_text {
font-size: 9vw;
display: inline-block;
}
Here is Media Query CSS:
#media screen and (max-width: 451px) {
.subs_arrow {
width: 40%;
height: 80%;
vertical-align: sub;
}
.subs_text {
font-size: 85%;
}
}
Viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Here is the HTML:
<button class="lp6_button">
<span id="form_pin_code_add_btn_send" class="subs_text">إشترك</span>
<img src="./img/white-right-arrow-md.png" class="subs_arrow">
</button>
What is the solution here?
It might be because iPhones (especially older ones) can have smaller screen sizes than most Android phones. Therefore, the text can be pushed down in order to avoid smushing. For your case, I would use flexbox instead of the approach you're taking.
.yourentirebutton {
display: flex;
justify-content: center;
align-items: center;
}
Try to add <meta name="viewport" content="width=device-width, initial-scale=1"> in your head tag. You can read more about it here: https://css-tricks.com/snippets/html/responsive-meta-tag/

How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?

Question
I know there are a lot of questions on Stack Overflow about the meta viewport tag, but I can't find anyone asking what seems to be the most obvious and useful question:
How can I use meta viewport and CSS media queries to make the average 960px website design look good on the iPad (and desktop), while still retaining a smaller viewport and site design (e.g., 320px) for the iPhone and other mobile phones?
For the iPhone, I think it goes without saying: a smaller, phone-friendly site (e.g., 320px wide) is ideal. But for the iPad's larger screen, a special mobile site isn't really necessary; using the normal 960px site design seems appropriate. A 320px site looks clownish on the iPad, and I don't always want to design a third variation for the iPad's 768px.
Here's the problem: I can't figure out how to use the meta viewport tag and CSS media queries to achieve both 1) a normal site on the iPad, and 2) a mobile site on the iPhone. I realize it's possible with JavaScript hacks (e.g., dynamically changing the meta viewport tag according to the device), but I don't want to use JavaScript; I don't think JS should be required to achieve basic usability on a simple website with static content.
1) If I remove the meta viewport tag altogether, my normal 960px site looks perfect on the iPad, but bad on the iPhone (large empty margin on the right side):
2) On the other hand, if I use <meta name="viewport" content="width=device-width" />, then the site looks great on the iPhone, but bad on the iPad (zoomed to 768px, site spills outside of the viewport):
This seems like it should be the simplest thing in the world, but I haven't been able to solve it. What am I missing?
Markup/CSS
CSS:
<style type="text/css">
body { margin: 0; }
.mobile { width: 320px; background: #fdd; display: none; }
.desktop { width: 960px; background: #ddf; }
</style>
<style type="text/css" media="screen and (max-device-width: 480px)">
.mobile { display: block; }
.desktop { display: none; }
</style>
Markup:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="mobile">Phone (320px)</div>
<div class="desktop">Desktop and tablet (960px)</div>
</body>
</html>
Combine a media query with zoom.
#media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
html {zoom:0.8;}
}
Try adding maximum-scale to your meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
You could use JS to rip out the meta viewport tags like Cole discusses here - http://cole007.net/blog/136/responsiveish-viewport-hack there's also another option in the comments
I use Serban Ghita's php Mobile Detection method:
https://github.com/serbanghita/Mobile-Detect
...then this php in the head tag:
<?php
if ($detect->isMobile() && !$detect->isTablet()) {?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0">
<?php } ?>
Works great.