I am trying to do a responsive design and through searching online I can't get what I am looking for but I want everything to appear bigger on my website pages. Instead of doing each element for example font-size:1.4em;, how would I do for all the pages ?
Can you just add this in the header
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
From the comments I think that you don't have a proper viewport setup and that is why everything looks smaller on mobile devices :)
Try using two new CSS3 units for that, called vw and vh. Here's and introductory article: http://css-tricks.com/viewport-sized-typography/
For example (from the article):
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Browser support: http://caniuse.com/#feat=viewport-units
Related
For some reason, I have a code that is completely identical and it works fine when I test it on codepen, but it will not resize at all when I bring it to github for publishing.
The codepen is: https://codepen.io/daniel-albano/pen/ExaedBr?editors=1100
This is one extract of my CSS not properly resizing:
.mission2 p {
font-size: 1.5vw;
font-family: 'roboto';
padding: 4% 0% 0% 0%;
clear: right;
line-height: 1.4;
}
The actual website is located at: MFASP.com
I honestly have no idea what to look at for the cause of this, as both codes are exactly the same.
So I did a bit of digging and found the solution. I had not been used to using
meta name="viewport" content="width=device-width, initial-scale=1.0"
this tag, but adding it into my html had allowed the browser to resize.
Based on the issue you are having, you need to add a viewport meta tag to your page head. This is most commonly <meta name="viewport" content="width=device-width, initial-scale=1.0">.
So your html would have the Doctype followed by something along the lines of..
<head>
...
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
This has me stumped. This works fine in browsers (tested Chrome, Firefox, and Safari), but doesn't work in Chrome emulator, Chrome mobile, or Firefox mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta title="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 50%;
float: left;
}
#media screen and (max-width: 500px) {
div {
width: 100%;
}
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
</body>
</html>
My original problem was more complex, but even boiling it down to the simplest form it's not working. Tried the above with different combinations such as display: inline-block; instead of float: left;, different viewport meta tags, adding only screen to the media query, other tags than plain divs, etc.
My original problem surfaced when doing work with Web Components + ShadowDOM, but it doesn't seem to be related to those. Made sure to bust all my caches while testing.
Am I going nuts?
Oh wow I'm dumb. Had a typo in the meta tag. Should be name instead of title:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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/
After completing my whole website I was introduced to media queries as a way of making my website responsive. The thing is that even though I found many resources on Media queries and I know what to type they just don't work at all.
I first tried to test a media query in order to see how it works.
This is the code:
<style>
#media screen and (min-width:600px){
#bigfont
{
font-size: 80px;
line-height: 79px;
font-family: dosis, sans-serif;
font-weight: 300;
}
}
</style>
"bigfont" is already a style in css. So when placing a media query it is supposed to bypass the original style and apply the new parameters.
Since my laptop screen's width was larger than 600px I was expecting it to work but it didn't. My goal is to use media queries in order to scale up my content when it comes to a really big screen.
I even changed min to max just in case with no result.
UPDATE :
I forgot to mention that I already have this:
<meta name="viewport" content="width=device-width, initial-scale=1">
You need to add a viewport meta element to the head of your HTML page(s) for media queries to take effect. E.g.
<meta name="viewport" content="width=device-width, initial-scale=1">
Have you tried with #media all and (min-width:600px){? That usually fixed it for me.
If that does not work, try setting the values as !important (overwrites everything so far so you need to keep the !important part for larger screens, as you have min-width, and smaller if you have max-width).
#bigfont
{
font-size: 80px !important;
line-height: 79px !important;
font-family: dosis, sans-serif !important;
font-weight: 300 !important;
}
Mine only worked after I put the media query block after the original code.
So like this:
Main code{
.whatever{
}
#whatever{
}
}
#mediaquery{
.whatever{
}
#whatever {
}
}
Put !important tag i.e 'font-size: 80px !important;' to apply the new parameters
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.