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
Related
I've implemented Media CSS in my website and when I resize it in Chrome-Devtools it adjusts fine.
But when I try it on mobile it shows like in a full desktop page.
Here's my website:
dinf
when resizing the page in Devtools:
When simulating mobile
Can you please explain how can that be?
Just add the following line to the head tag of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It allows elements and fonts to correctly scale on mobile devices. I suggest you to read this article about it.
I used Bootstrap for groundwork to develop the site to be responsive. The problem i have encountered is that when I try to watch to watch a site on mobile or tablet device the site wont response to the screen resolution. But when I try the Responsive Design View on Mozilla it all works fine. They order of included css files is Bootstrap, then my custom css and some custom query css which I used to tweak some content things.
Do you have the following within your head of your page?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If the above does not work can you please paste some code from your page for us to see what the issue could be? Thanks.
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.
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 have used twitter bootstrap in my project with DotNetNuke. I did my designing and layout using HTML, CSS, bootstrap. The responsive design was working fine when I tested it on different mobile devices and even if when I resize my browser window.
As it was working well, I converted the design to DotNetNuke Skin. Now, the responsive design works fine only when I resize the browser window and not on mobile devices. I understand the flow in which DNN loads stylesheets and I have followed it. I have made my skin.css as a combination of bootstrap.css and followed by the content of bootstrap-responsive.css
I am not able to find the problem as if I use the same skin.css with my html, it works fine but it doesn't work with DNN (on mobile devices).
You're missing the meta that targets mobile devices for proper scale. Insert the following in the header of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I just notice something interesting and want to share it, maybe it will help someone. In the site header section you should include first the bootstrap.css and only after that the bootstrap-responsive.css because obviously the responsive.css depends on the the bootstrap.css
Of course the meta tag should be also present.
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Make sure responsive CSS(responsive.css) is included after basic not before.