I didn't just resize the browser I used the developer tools under Chrome.
I made sure I had the proper meta tags
<meta name="viewport" content="width=device-width, initial-scale=1">
And used max/min-width instead of -device-width.
The queries don't show up at all. But the local version works well. I'd rather not post the live version here because of the nature of the site itself but I'll try to give as much information as possible.
order can be important with media queries, one can be overriding another if you don't have them ordered properly
Related
I am using semantic-ui-react for my website. I want to make all the components mobile friendly. But when I look at the website on mobile, all the elements are rendered very small. Please find the image below:
How do I make elements appear bigger on mobile? Also I want responsive menu for mobile version. Could anyone please let me know ?
Thanks
do you already have this meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> in your html? I think it is just missing that.
Make sure you have the appropriate meta tag in your HTML between <head></head> and of course reference the CSS (importing in js is fine too):
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.1/dist/semantic.min.css"
/>
Thanks Laurens Deprost for the help!
I have fixed this issue. There were 2 problems actually.
The first one was that I was using domain forwarding from godaddy with masking enabled. Due to this entire site was displayed inside a frameset and media queries were not working. To fix this I added a custom domain in Heroku and used that as a CNAME record in godaddy.
Then I also applied css with media queries from here:
https://gist.github.com/phuphighter/ce980aaec1c7104846f7e944743a7e07
With these two fixes in place, the site is working fine.
Thanks
I've built a site using media queries to make it responsive and whilst I've been developing it I have changed the width of the browser to test the page and the media queries seem to work fine with the break points I have set.
Problem is though, when testing the actual page on the iPhone, it doesn't seem to be recognizing the media queries at all and the full desktop view is shown in the browser instead.
Why ideas why an iPhone would do this, any mobile phone for that matter?
Here's the Litmus browser test result I have: https://litmus.com/pub/b78644d
Could take it a step further with
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I'd also recommend wiping out some of those !important(s), at least off of the widths you've set, so the responsiveness plays nicely.
Annnnnd Chrome has a sweet (relatively new) emulation tool built in that you can mess around with and use it to view your site scaled down to mobile as well - it's tucked in next to the Javascript Console.
Solved the problem adding this line to the head in the HTML:-
<meta name="viewport" content="width=device-width">
Been trying to debug this for a couple of hours. I've been asked to fix a "responsive" website that is really buggy. I can't share the actual code b/c it's all on localhost on a secured network. Hoping you might see something have a light bulb go off from my description here.
Problem, we have #media (max-width:800px) and it stops affecting page elements around 600px wide.
Another example, i set html{ max-width:1200px} but to make the browser actually fit my 1200 pixel browser window I had to set it to 2250px.
My question is, does this ring any bells for anyone? I'm going through all the CSS and don't see any thing that immediately looks like the issue. These guys really broke responsive design.. bleh
Thanks..
EDIT
here's the meta tags that apply
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
... bunch of junk...
<meta name="viewport" content="width=device-width, initial-scale=1"> (again)
With some help, I was able to resolve the issue.
Issue was related to pixel-ratio declaration but not in CSS, in minified Javascript...
Eliminating this unnecessary js made the page load as expected.
Core lesson: use javascript for functionality and CSS for design and layout.
We removed the meta viewport tag <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0" /> from our HTML emails to increase support for legacy Blackberrys. It's documented to potentially cause blank screens at least according to blogs on major email testing services.
The only downside we've seen in testing is it shrinks the results on Windows Phone HTC HD7. (https://litmus.com/pub/71916b3) In Litmus tests including the tag shows the page at 100% zoom. When it's removed it shows the email zoomed out fit to screen. This occurs even when there are no problems with other mobile platforms.
Is there another CSS technique that could replace the tag and get around this?
The tag is included used in one of the more prominent HTML email boilerplate templates. In practice, we've only seen problems with -webkit-text-size-adjust: none; causing blank BB screens.
We've tried targeting the issue media queries and zoom, but there is too much of a risk of them affecting other phones with similar sizes and pixel densities. Probably another tradeoff, typical of email, but wanted to post because I haven't seen much on this.
The W3C is supporting a CSS solution anyway, though it’ll be a while until it’s full supported. Microsoft seems to be on board with it, however, so you can try that.
The prefix-free syntax is #viewport, and Microsoft uses #-ms-viewport.
I may have come across a solution in testing. I'm not positive that this doesn't cause some other tradeoff and would still be happy to select and award the bounty if there's an answer with a better approach.
I'm seeing no issue with Blackberry's and Windows Phone 7.5 renders at 100%
<!--[if IE]>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<![endif]-->
I'm developing a relatively simple website using a media query to target mobile devices (640px width and under) and when I view it on my archaic iPhone 3g it looks fine apart from the fact that there seems to be something that makes it primarily appear very "zoomed out"
It's probably easier to show you an example;
http://deanelliott.me/misc/berman/interior.php
I've only tested it on my iPhone so I'm not sure how it displays on other phones.
Any help would be most appreciated.
It appears your viewport settings are missing.
This is what I use:
<meta name="viewport"
content="width=device-width, initial-scale=1, target-densitydpi=device-dpi" />