I do know how to use media-screen functionality, but wanna ask you guys something else, something which I really needed for my project. Let me paste some code snippet so that I can elaborate you exactly what I'm looking for.
In below I'm pasting a css ID which I made for my site design:
#Disp_name {
color: #424854;
font-family: 'Open Sans',sans-serif;
font-size: 5.5em;
font-weight: bold;
line-height: 105px;
/*margin: 200px 0 25px;*/
margin: 0px 0 25px;
text-rendering: optimizelegibility;
transition: color 0.3s ease 0s; }
Now I want when anyone open up my project from a small screen device, like
**When open up from 400> and <450px the font-size will be 4em and if >300 and <400px then 3em and if less than <300px then 2em.
What should I do? Please help
As DevIshone said, media queries are exactly what you're looking for. In that case it would look something like this
#media (max-width: 450px) and (min-width: 400px) {
font-size: 4em;
}
#media (max-width: 400px) and (min-width: 300px) {
font-size: 3em;
}
#media (max-width: 300px) {
font-size: 2em;
}
use media queries in your css
for example:
#media screen and (max-device-width: 480px) {
.classname{
font-size: 6em;
}
}
Related
solved it:
-webkit-text-size-adjust: 100%;
/* Prevent font scaling in landscape while allowing user zoom */
I have a small font-sizing issue when rotating from portrait to landscape. When testing on responsive mode in safari the font-sizing is working fine, but when testing it on my iPhone 5s the font-size works fine in portrait mode, right font-size the way i set, turning to landscape bigger font-size. The navigation shows the right font-size, but when opening it also changes bigger. All the font-sizing is done on the body tag with px, don't need to specify it separately or use em,rem etc. Can't find where the problem is. Again in responsive mode Safari everything is working.
* {
margin: 0;
padding: 0;
}
body {
font-family: helvetica, arial, sans-serif;
font-size: 23px;
font-weight: normal;
text-align: left;
line-height: 1.2;
color: black;
}
h1, h2 {
font-size: inherit;
font-weight: inherit;
text-decoration: none;
-webkit-hyphens: auto;
hyphens: auto;
}
#media screen and (max-width: 1112px) { /* all after this breakpoint size to 20px */
body {
font-size: 20px;
}
}
#media screen and (max-width: 1024px) { /* all after this breakpoint size to 18px */
body {
font-size: 18px;
}
}
Try to use this media queries:
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1025px),
only screen and ( min--moz-device-pixel-ratio: 2) and (max-width: 1025px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 1025px),
only screen and ( min-device-pixel-ratio: 2) and (max-width: 1025px),
only screen and ( min-resolution: 192dpi) and (max-width: 1025px),
only screen and ( min-resolution: 2dppx) and (max-width: 1025px) {
body {
font-size: 18px;
}
}
For iPhone7 I use this media query:
#media only screen
and (device-width : 375px)
and (-webkit-device-pixel-ratio : 3) {
body {
font-size: 18px;
}
}
Also, you can combine this media queries to resolve your issue.
I have several media queries, but there are two that I'm trying to use to style a certain element:
.navbar-default .navbar-nav>li>a
Here is my CSS including previous media queries:
#media (min-width: 1024px) {
.header-column-secondary {
width: 13%;
}
}
#media (min-width: 768px) {
#gatewaylogo {
height: 85px;
padding-left: 0px;
padding-top: 10px;
}
.phone-number {
font-family: 'Oswald', sans-serif;
color: #ffffff;
font-size: 16px;
position: relative;
}
.social-media {
color: #ffffff;
display: table-cell;
padding: 5px 0 5px 5px;
transform: translateY(-7%);
}
}
#media screen and (max-width: 1024px) {
.navbar-default .navbar-nav>li>a
{
font-family: 'Oswald', sans-serif;
color: #1B3764;
text-transform: uppercase;
font-size: 22px;
line-height: 100px;
margin-right: 60px;
padding-left: 0;
padding-right: 0;
}
}
#media screen and (max-width: 768px) {
.navbar-default .navbar-nav>li>a {
font-family: 'Oswald', sans-serif;
color: #1B3764;
text-transform: uppercase;
font-size: 22px;
line-height: 100px;
margin-right: 20px;
padding-left: 0;
padding-right: 0;
}
}
You can see that the media queries that are applying to .navbar-default .navbar-nav>li>a are (max-width: 1024px) and (max-width: 768px)
The idea is that from 1024px - 769px, I want .navbar-default .navbar-nav>li>a to get margin-right: 60px, and at 768px, tablet size, I want .navbar-default .navbar-nav>li>a to get margin-right: 20px. I plan on continuing to add media queries as the browser width gets smaller - 475px, 375px, and 320px.
So why is it that at 768px, the media query doesn't render? It seems that the media query for 1024px is still getting the style and overriding it. I don't want to add !importants, because then I will continue to have to add !importants all the way down to 320px.
A problem is that I like to design from desktop to mobile - not mobile first. Any suggestions? The website is live here: http://nowordpress.gatewaywebdesign.com/
Thanks
Your are missing a viewport meta tag in the head of your page, add something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Good luck!
There are 2 issues in this problem:
viewport definition is missing
both min-width and max-width need to be defined to get media query in this scenario to work.
Here is some detail explanation:
There is no rule_override_based_on_min/max_width in media query. That is, if there are 2 media query rule-set, one is (max-width: 1024px) and another is (max-width: 768px), there is no guarantee that rules inside (max-width: 768px) will override rules inside (max-width: 1024px) -- when conflict happens between 2 rules inside 2 different media query rule-set, the one that appear later in the CSS win. That's why you need both min-width and max-width for media query.
Here is a simple example: although (max-width: 5000px) is a more reasonable rule to take effect, the final background color is pink.
#media (max-width: 5000px) {
.testd {
background: yellow;
}
}
#media (max-width: 100000px) {
.testd {
background: pink;
}
}
<div class="testd">DDD</div>
And David is correct, the viewport definition is missing. Without it, media query is impossible due to pixel ratio.
I think you need a media query like this:
#media (min-width: 768px) and (max-width: 1024px)
I made a site here. It works great on all screens except mobile where the slogan is too large. So i added a mobile css definition for the slogan "Always coding and brewing up something good" but on my phone it does nothing? I am using bootstrap but only with the grid and responsive elements. The css I applied is the below in question is:
#media (max-width: 480px) {
.grabber{
font-size: 12px;
}
}
You defined in your stylesheet.css a following order of styles:
#media (max-width: 480px) {
.grabber{
font-size: 12px;
}
}
.grabber{
color: #3498db;
font-size: 2em;
font-family: 'black_roseregular', Arial, sans-serif;
}
and due to processing css-rules consequentially latest font size style applied to .grabber will be font-size: 2em;. All you need is to swap these statements like this:
.grabber{
color: #3498db;
font-size: 2em;
font-family: 'black_roseregular', Arial, sans-serif;
}
#media screen and (max-width: 480px) {
.grabber{
font-size: 12px;
}
}
I am trying to find a way to place my headline and sub-headline, so they are aligned with eachother. But when i make it fit on 1 device, the text is jumping around on another device. That means I am just going around in circles.
Is there a way where I can say on all mobile devices the margin should be fx: 20px from the left, or how are you guys doing it?
HTML
<div class="max-container-fluid">
<div class="row">
<div class="col-lg-12">
#CurrentPage.GetGridHtml("Grid")
</div>
</div>
</div>
CSS
.header-text h1 {
font-weight: 900;
font-size: 40px;
line-height: 1;
text-transform: uppercase;
color: #fff;
padding-top: 160px;
}
.header-text h2 {
font-size: 20px !important;
margin-bottom: 25px;
font-weight: 900;
color: #fff;
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.header-text h2 {
font-size: 20px !important;
margin-left: 20px;
font-weight: 900;
}
Try this:
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.header-text h2, .header-text h1 {
margin-left: 20px;
}
}
You don't need to repeat all the other values if they stay the same — you'll also notice you can combine selectors together, which makes your code lighter.
Also, be careful about using !important (it can make future coding really messy). Try to add specificity before you use that.
I have seen this question on SO:
What are the most common font-sizes for H1-H6 tags
with this being the recommended font sizes fo H tags:
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }
Is there a 'best practice' for these for mobile phones? -say iphone screen size?
The font sizes in your question are an example of what ratio each header should be in comparison to each other, rather than what size they should be themselves (in pixels).
So in response to your question "Is there a 'best practice' for these for mobile phones? - say iphone screen size?", yes there probably is - but you might find what someone says is "best practice" does not work for your layout.
However, to help get you on the right track, this article about building responsive layouts provides a good example of how to calculate the base font-size in pixels in relation to device screen sizes.
The suggested font-sizes for screen resolutions suggested from that article are as follows:
#media (min-width: 858px) {
html {
font-size: 12px;
}
}
#media (min-width: 780px) {
html {
font-size: 11px;
}
}
#media (min-width: 702px) {
html {
font-size: 10px;
}
}
#media (min-width: 624px) {
html {
font-size: 9px;
}
}
#media (max-width: 623px) {
html {
font-size: 8px;
}
}
Based on my comment to the accepted answer, there are a lot potential pitfalls that you may encounter by declaring font-sizes smaller than 12px. By declaring styles that lead to computed font-sizes of less than 12px, like so:
html {
font-size: 8px;
}
p {
font-size: 1.4rem;
}
// Computed p size: 11px.
You'll run into issues with browsers, like Chrome with a Chinese language pack that automatically renders any font sizes computed under 12px as 12px. So, the following is true:
h6 {
font-size: 12px;
}
p {
font-size: 8px;
}
// Both render at 12px in Chrome with a Chinese language pack.
// How unpleasant of a surprise.
I would also argue that for accessibility reasons, you generally shouldn't use sizes under 12px. You might be able to make a case for captions and the like, but again--prepare to be surprised under some browser setups, and prepared to make your grandma squint when she's trying to read your content.
I would instead, opt for something like this:
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.25rem;
}
h3 {
font-size: 2rem;
}
h4 {
font-size: 1.75rem;
}
h5 {
font-size: 1.5rem;
}
h6 {
font-size: 1.25rem;
}
p {
font-size: 1rem;
}
#media (max-width: 480px) {
html {
font-size: 12px;
}
}
#media (min-width: 480px) {
html {
font-size: 13px;
}
}
#media (min-width: 768px) {
html {
font-size: 14px;
}
}
#media (min-width: 992px) {
html {
font-size: 15px;
}
}
#media (min-width: 1200px) {
html {
font-size: 16px;
}
}
You'll find that tons of sites that have to focus on accessibility use rather large font sizes, even for p elements.
As a side note, setting margin-bottom equal to the font-size usually also tends to be attractive, i.e.:
h1 {
font-size: 2.5rem;
margin-bottom: 2.5rem;
}
Good luck.
The whole thing to em is, that the size is relative to the base. So I would say you could keep the font sizes by altering the base.
Example: If you base is 16px, and p is .75em (which is 12px) you would have to raise the base to about 20px. In this case p would then equal about 15px which is the minimum I personally require for mobile phones.