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.
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 have a website that's working on 1200px(large desktop) screen. Now I would like this to be worked on different screen sizes and browser window sizes.
Issue : When I reduce the screen size, some tabs that are on my website go invisible.
How do we do it in Rails. I have searched and found out that CSS - media is the only way to do it . This way we have to write different css files for each screen size. Is there an efficient way to do this in rails? .As in, size of the elements change dynamically based on the screen size with out the change of CSS files?
Thanks!
I think Twitter bootstrap is an easy way to create responsive website.
This is Twitter bootstrap gem for Rails.
And this is Basic tutorial (Railscasts).
So you can follow the tutorial to get start and you can do it in advance when you understand how it work.
This might solve your problem..however i am not sure but it wont hurt to give it a shot...
This will resize your website accordingly you device size.
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Add these in your between HEAD tags
I Bootstraperized my asp.net Razor 2 website by implementing what Dan recommended here: Where should I bootstraperize my web site?
In my _SiteLayout.cshtml file, I had this line that was added by default:
<meta name="viewport" content="width=device-width" />
I don't know if that cooperates with the Bootstraperization I've done, contends with it, or is simply now moot/obviated by the Bootstrap code.
I commented it out and there is no obvious difference, but I'm wondering if my brief sanity check diesbezueglich holds water. Is there any reason to strip it out? Leave it in? Does it [not] matter?
On a related note, should I remove or comment out css in Site.css such as:
/* content */
article {
float: left;
width: 70%;
}
IOW, will these style rules interfere with the workings of Bootstrap? I want to avoid a tug-of-war between asp.net's baked-in assistance and Bootstrap.
The viewport meta information is only used for mobile devices, for the zooming and scaling. It concerns the responsive design.
It's not obvious in the current documentation, but here is the explanation from the next version :
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
(source)
You can read more about this on the MDN : Viewport meta tag (developer.mozilla.org)
I am trying to create a mobile friendly version of my website, to make my website responsive to a smaller screen size and scale accordingly.
I've created some media queries, that behave correctly in a browser when resizing on a desktop.
On my iPhone, safari just shrinks the entire website but still maintains the aspect ratio of the full sized site. How do I get the media query to be observed? have I missed something?
Here is a link to a sandbox which I am trying to get working correctly - any help or suggestions are appreciated:
http://www.preview.brencecoghill.com/
Do you have the meta for view port in your html?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More info here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
I think you'll find a warning in Chrome with ; instead of ,
This should work just fine:
<meta name="viewport" content="width=device-width, initial-scale=1">
I just experienced the most bizarre thing after troubleshooting this same problem for a day. Something to try if all else fails...
My pages were perfectly responsive on my laptop during development but not on my iPhone, iPad or Samsung. I finally discovered I had to put a comment line after the DOCTYPE statement and before the html lang statement, like this:
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
Finally, my pages were responsive on the mobile devices. Weird!
I am new to mobile web app development, I wrote a small app in jqueryMobile & asp.net, but I am having problem with screen height, when i test my app in opera emulator then for large screen sizes my app look small in size, is there a way to detect & adjust height & width so it looks like a native app & fills the entire screen.
Without knowing how your css markup looks like try adding the following meta tag:
<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
This will make sure your page starts in the correct scale (and disallows pinch zoom)
You can read the css trick to make the CSS target screen sizes
http://css-tricks.com/css-media-queries/
Try adding the following snippet:
<meta name="viewport" content="width=device-width">
From what you said that should fit your needs.
You can find more info about the viewport meta tag here https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
There are also some other meta tags you might consider.
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"/>
Most of this I learned from exploring the html5 mobile boilerplate. Which is a rock solid starting point for any mobile application. If you haven't checked it out before I believe it will help you out alot http://html5boilerplate.com/mobile