I'm using https://material.angularjs.org/latest/ to make my site responsive. For different screen sizes, I want my font size to change for example,
for small screen, I want font size to be 5px and for greater than medium, 14px.
I have done this so far but font size does not change:
<h3 class=".md-display-1">John</h3>
its css:
#media (max-width: #flex-sm) {
body{font-size: 2px;}
}
#media (max-width: #flex-gt-md) {
body{font-size: 30px;}
}
You have some issue with your code.
0 - You are NOT using the class:
<h3 class=".md-display-1">John</h3>
You must change it to:
<h3 class="md-display-1">John</h3>
Without the dot. The dot is only to indicate it is a class. And when is id we use #.
1 - You are using variables in CSS. The CSS doesn't support variables. Less/Sass support variables. But if you are using css. You must write the sizes. The standard sizes in Bootstrap are:
/* Extra small devices (phones, less than 768px) */
#media (max-width:767px) {
body {font-size: 2px;}
}
/* Small devices (tablets, 768px and up) */
#media (min-width:768px) {
body {font-size: 10px;}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width:992px) {
body {font-size: 20px;}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width:1200px) {
body {font-size: 30px;}
}
2 - Remember use AngularMaterial CSS. They include the Tipography docs in its page: https://material.angularjs.org/latest/CSS/typography . Check there. They use 10px as base. And use em to expand based on clasess.
Related
I'm trying to set some styles on a page with basic CSS and when I refresh the page to see expected results, all I can see that chrome uses styles from another query which it shouldn't do, when I browse from my phone I see styles from #media (max-width:1220px) and (min-width:965px) when it should show styles from #media (max-width: 767px). Anyone had this problem before?
##media (min-width:1221px) {
//some style
}
/* Tablets and very small desktop screens (if some) */
##media (max-width:1220px) and (min-width:965px) {
//some style
}
/* Tablets and very small desktop screens (if some) */
##media (max-width:964px) and (min-width:768px) {
//some style
}
##media (max-width: 767px){
//some style
}
Try this, remove ##media and put one #media
#media (min-width:1221px) {
//some style
}
/* Tablets and very small desktop screens (if some) */
#media (max-width:1220px) and (min-width:965px) {
//some style
}
/* Tablets and very small desktop screens (if some) */
#media (max-width:964px) and (min-width:768px) {
//some style
}
#media (max-width: 767px){
//some style
}
Currently I am working on a website to gain some experience, but I struggle to make changes only to the mobile version. For example:
<h1 class="intro-header__title">
<span>Are you ready to</span> Expand your horizon
</h1>
In order to make CSS changes for the desktop version I have:
.intro-header__title {
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 15px;
}
Now I want to hide the follow part on the mobile version:
<span>Are you ready to</span>
So what I tried is the following:
#media (min-width: 768px){
.intro-header__title {
display:none;
}
}
#media (min-width: 960px){
.intro-header__title {
display:none;
}
}
Unfortunately this does not seem to work. I have the same problem with text that is compressed on the mobile version. I would like to change the borders only on the mobile version and not the desktop version. Here is how it currently looks (compressed text due to borders):
You need to add the media type to the #media query (in this case "screen"). Your current rules are also only used on screens with a width of more than 768px or 960px. But you want to format the mobile version so you have to use the max-width instead of min-width:
.intro-header__title {
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 15px;
}
/** all screens up to 768px width */
#media screen and (max-width: 768px) {
.intro-header__title span {
display:none;
}
}
/** all screens up to 960px width */
#media screen and (max-width: 960px) {
.intro-header__title span {
display:none;
}
}
<h1 class="intro-header__title">
<span>Are you ready to</span> Expand your horizon
</h1>
Note: You also use two media queries doing the same. So the first media query (max-width: 768px) isn't needed because the other media query do the same on a larger screen.
You can find a useful list of screen sizes for the different devices on StackOverflow: Media Queries: How to target desktop, tablet and mobile?
I am updating a text element which ID has if7ou.
Issue is that if user update style on mobile view first and then the tab view then media query do not work for tab view. If we update style for desktop first, tab second and mobile third then everything works fine
but if we reverse the step mobile view first, tab view second and desktop view third then css/media query will not work for tab and desktop view.
So I want any option that we can add css in any order either 480 first and 992 second or vice-versa css should be apply based on device size not the based on order on which they come.
#media (max-width: 480px) {
#if70u {
font-size: 20px;
}
}
#media (max-width: 992px) {
#if70u {
font-size: 40px;
}
}
I think it was due to 480 should be down and 992 should be above.
Any help would be appreciated, thanks!
I would suggest to use min-width instead of max-width. This will ensure that the 992px styles will not load or appear in your mobile view. It will also better satisfy the requirement of "mobile first", in that you are only loading mobile styles for mobile, and then adding tablet styles only when the viewport grows for tablet, and so on. This will also solve your issue.
#if70u {
font-size: 20px;
}
#media (min-width: 481px) {
#if70u {
font-size: 40px;
}
}
In general, I use max-width sparingly, and often, when I do need it, it's because I created some sort of crappy code that has consequences later on down the waterfall.
In this case you should use mobile-first technic, declarations on the main class apply to mobile, then you increase your media-queries to bigger devices, take a look:
#if70u{
font-size: 14px; //Its apply for mobile
}
#media screen and (min-width: 768px){
#if70u{
font-size: 16px; //Its apply for tablets
}
}
#media screen and (min-width: 992px){
#if70u{
font-size: 18px; //Its apply for small desktop screens
}
}
#media screen and (min-width: 1200px){
#if70u{
font-size: 20px; //Its apply for large desktop screens
}
}
In addition to #S. Dunn answer.
If you want to set a style to specific minumum and maximum width you can use this:
#media only screen and (max-width: XXXpx) and (min-width: XXXpx)
So in your case it would be:
#if70u {
font-size: 20px;
}
#media only screen and (max-width: 992px) and (min-width: 481px) {
#if70u {
font-size: 40px;
}
}
I'm trying to understand why my css is always applying the h1 font size in landscape instead of portrait when I am in portrait (I'm a noob in responsive design).
Anyone have an idea of what I'm doing wrong ?
Thank you !
Guillaume
**** edited new version: now working.
/* FOR MOBILE */
#media only screen
and ( max-device-width: 736px){
.coursBox1{
/* Useless CSS */
}
.coursBox1 h1{
/* Useless CSS */
}
}
#media only screen
and ( max-device-width: 736px)
and ( orientation: portrait){
.coursBox1 h1{
font-size: 10px;
}
}
#media only screen
and ( max-device-width: 736px)
and ( orientation: landscape){
.coursBox1 h1{
font-size: 100px;
}
}
You have some errors in your code. You don't use , in between logical operators. You're also missing a closing }. Also, your media queries are very specific due the and operator.
As a beginner, I would drop the logical operators and only work with the device-width property as this the key value in triggering your queries. Once you understand how this works in your browser, start adding the logical operators.
If you are looking to make adjustments to your font-size or anything else for mobile devices such as tablets and smaller, then you can use something similar:
/* This generally targets both tablets and phones */
#media (max-width: 1024px) {
h1 {
font-size: 21px;
}
// other styles targeted to tablet/phone devices
}
/* This generally targets phones sizes and smaller */
#media (max-width: 768px) {
h1 {
font-size: 18px;
}
// other styles targeted to phone devices
}
This is just a guideline.
See these resources for a range of devices out in the wild with their corresponding sizes:
- http://viewportsizes.com/
- http://www.mydevice.io/devices/
and some some pre-made media query snippets
- Media Query Standard Devices
CSS media queries - MDN
I have came across a problem, whenever I make my browser smaller the text stays the same and it doesn't go smaller. How do I make the text go smaller when I the browser gets smaller?
Please visit http://jsfiddle.net/xiiJaMiiE/PjbHs/ for my website
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
Thanks in advance!
As mention above you need to use media queries if you want to change your font-size (or any other CSS value based on browser / screen size)
Below is example based on Mobile Screen Size
// Work For All Other Screens Except the one which we redefine in bottom
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.home {
font-size:20px;
}
}
You only need to define value which you want to change browser rest all values form above style and only change font-size to 20px on screen size 320px
Keep in mind you need to include libraries like https://github.com/scottjehl/Respond in your page to support older browsers
This css should work for you... simply adjust/delete the query breaks as needed and adjust the font size as well.
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
#media all and (min-width: 1281px){
.home{font-size:25px;}
}
#media all and (min-width: 1025px) and (max-width: 1280px) {
.home{font-size:22px;}
}
#media all and (min-width: 769px) and (max-width: 1024px) {
.home{font-size:18px;}
}
#media all and (min-width: 481px) and (max-width: 768px) {
.home{font-size:16px;}
}
#media all and (min-width: 321px) and (max-width: 480px) {
.home{font-size:14px;}
}
#media all and (max-width: 320px) {
.home{font-size:14px;}
}
I would highly recommend to not use px for font sizes, as each browser has a different standard font size to begin with. however there is an alternative which can give you the result you want across all browsers, old and new.
css:
#px {
font-size:25px; /*this was the size you want*/
}
#percent {
font-size:160%; /*this is what it is in % but give you the support for crossbrowser coding*/
}
incase you want to try it out here is the html to show you the difference
html:
<p id="px">HELLO</p>
<p id="percent">HELLO</p>
It's possible using viewport units but it does require a small amount of JS/JQ due to a minor bug.
http://css-tricks.com/viewport-sized-typography/
http://caniuse.com/viewport-units tells browser support
Codepen Demo
CSS
p {
font-size:1vw;
}
JQ
causeRepaintsOn = $("p"); /* could include any text related tags */
$(window).resize(function() { causeRepaintsOn.css("z-index", 1); });