As you can see, both of these buttons have text that's the same font-size, but appear very different in size.
With devtools open you can see that both buttons have font-size: 16px They are also both the same font ('Roboto').
Any idea what could be causing this discrepancy?
To clarify, I am working on recreating a website that's currently on WordPress. While I do have access to the back end on WordPress, it's handled by the theme so I can't see the actual code.
I think you forgot to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
That's why it looks like small.
http://www.w3schools.com/css/css_rwd_viewport.asp
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 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 made a webpage for myself: http://av.nettfolk.no/
When I use Safari on my iPhone (5 and 6, 9.2.1), tap on a link to a certain site (Inma), and then go back to my site, some fonts increase in size.
For the other sites, they don't change when I go back to my site.
If I visit this certain site, and go two pages deep, then go back two steps to my site, then the fonts are the right size.
I've tried a bunch of things, but I just can get this to work.
Does anyone know why this is and how I can fix it?
It worked when I double checked one of my previous attempts and found that I had written a line wrong. This worked:
html {-webkit-text-size-adjust: 100%;}
I never found out why Safari only enlarged the fonts when I was coming back from certain sites.
<meta name=viewport content="width=device-width, initial-scale=1">
I wonder if the =viewport doesn't have quotes upsets it -> name="viewport"
Like here:
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0" />
It also helps to specify font size in the body (and html for some browsers), so:
html, body {
font-size:100%; /* <-- equivalent to 16px */
}
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 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