I want change font-size on each browser zoom out level,
for example:
#media screen and (-webkit-max-device-pixel-ratio: 0.25) {
div {
font-size: 10px;
}
}
#media screen and (-webkit-max-device-pixel-ratio: 0.50) {
div {
font-size: 20px;
}
}
#media screen and (-webkit-max-device-pixel-ratio: 100) {
div {
font-size: 50px;
}
}
above codes not working..
The problem is that you have set -webkit-text-size-adjust: none; for the body in layout.css. Changing it to -webkit-text-size-adjust: auto; allows the zooming of the fonts along with the page.
Related
I'm working on making my website responsive, but I encountered a problem.
I'm trying to hide a section to make it only phone visible, but as I try to set my display:none for my section and to enable it in my media query, it is overwritten by my non-media query code.
The 2 sections that I want to hide from PC users are .phone-services and .avis-phone. The problem is that, as I said if I state them as display:none, they will overwrite my media query.
Here is a part of my #media CSS:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.services {
display:none !important;
}
.avis {
display:none !important;
}
.phone-services {
background:#02000A;
}
.avis-phone {
background:#02000A;
color:white;
}
}
Here is a part of the other CSS that overwrites it:
#import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');
* {
margin:0; padding:0;
box-sizing: border-box;
text-decoration: none;
outline: none; border:none;
font-family: "Shippori Antique B1" , sans-serif;
transition: .2s linear;
}
html{scroll-behavior:smooth !important}
a:visited{
visibility:hidden;
}
.phone-services {
display:none; /*Overwrites my media query*/
}
.avis-phone {
display:none; /*Overwrites my media query*/
}
HTML:
<section class="phone-services">
Section need to be shown only for mobile
</section>
<section class="avis-phone">
Section need to be shown only for mobile
</section>
Thanks for your help!
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
min-device-width and max-device-width are only for actual devices. If you try to simulate that on a desktop, it won't work for you. You should use min-width and max-width instead.
Secondly, -webkit-min-device-pixel-ratio: 2 is to check device resolution, but we have various devices which we cannot simply cover with a particular resolution. I'd suggest removing it.
Another problem is from here
.phone-services {
background:#02000A;
}
.avis-phone {
background:#02000A;
color:white;
}
You set display: none, but you don't set display: block (or any other visible display values)
Another point I'd like to note down that the style priority is TOP to BOTTOM when they have the same selectors. Your display style in media-query is above display: none like below, that will cause display problem too
#media {
.phone-services {
display: block; /*NOT WORKING*/
}
}
.phone-services {
display:none;
}
Full possible change can be
#import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border: none;
font-family: "Shippori Antique B1", sans-serif;
transition: 0.2s linear;
}
html {
scroll-behavior: smooth !important;
}
a:visited {
visibility: hidden;
}
.phone-services {
display: none;
}
.avis-phone {
display: none;
}
#media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
.services {
display: none !important;
}
.avis {
display: none !important;
}
.phone-services {
background: #02000A;
display: block;
}
.avis-phone {
background: #02000A;
color: white;
display: block;
}
}
<section class="phone-services">
Code in here
</section>
<section class="avis-phone">
Code in here
</section>
You always have to define display if you are hiding / showing them depending on #media, both in #media part and non-#media part.
Try adding it to the rules:
#media screen and ...
{
.phone-services {
background:#02000A;
display: block; // can be block, inline-block, flex...
}
.avis-phone {
background:#02000A;
color:white;
display: block; // can be block, inline-block, flex...
}
}
Note that if you have #media part loaded before the normal one, you have to make sure to load #media part after, so it does not get overridden, or you can use !important with the rule (not recommended).
I have a background that is changing with a different resolution of browser. That is working perfectly. Then there is a text that is typed in js. I want to change the size of that text with different resolutions of browser too.
Do you know how to do that?
Normal size:
Small size:
.wrap-hero-content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.hero-content {
position: absolute;
text-align: center;
min-width: 110px;
left: 50%;
top: 58%;
padding: 65px;
outline-offset: 8px;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="wrap-hero-content">
<div class="hero-content">
<span class="typed"></span>
</div>
</div>
You will have to use something like this:
#media screen and (max-width : 320px)
{
.your_text
{
font:10px;
}
}
#media screen and (max-width : 1204px)
{
.your_text
{
font:16px;
}
}
You can do this easily with css (you can play around with the min-width and font-sizes to suit your needs:
// default for less than 800px width
.hero-content .typed {
font-size:10px;
}
#media (min-width: 800px) {
.hero-content .typed {
font-size:12px;
}
}
#media (min-width: 1024px) {
.hero-content .typed {
font-size:14px;
}
}
create a special font size for all devices
$html-font-size-lg: 16px;
$html-font-size-md: 15px;
$html-font-size-sm: 14px;
$html-font-size-xs: 13px;
$paragraph-font-size-lg: 18px;
$paragraph-font-size-md: 16px;
$paragraph-font-size-sm: 14px;
$paragraph-font-size-xs: 12px;
html {
font-size: $html-font-size-lg;
line-height: 23px;
#media (max-width: 1024px) {
font-size: $html-font-size-md;
}
#media (max-width: 640px) {
font-size: $html-font-size-sm;
}
#media (max-width: 480px) {
font-size: $html-font-size-xs;
}
}
or Use em or rem for responsive font size
Em is a scalable unit equal to the current font size in the document. If you haven’t set font size by default, then the browser will set it for you. Browser default font size would typically be 16px. So 1em equals 16px by default. If you set font size for document 14px, 1em would equal 14px, 2em would equal 28px, 0.5em would equal 7px, etc. Recommended units are em and rem due their scalability and their mobile device friendly nature.
// body font size
$browser-context: 16;
// function to convert px to em
#function em($pixels, $context: $browser-context) {
#return #{$pixels/$context}em
}
html {
line-height: 1.2;
font-size: em(16);
}
h1 {
// 72px
font-size: em(72);
}
h2 {
// 24px
font-size: em(24);
}
THIS IS BEST PRACTICES FOR RESPONSIVE TYPOGRAPHY.
I'm doing some different styling for different screen sizes, based on the bootstrap grid system sizes. For some reason some of the styling is working and some isn't. Here is the css:
#media only screen
and (max-width: 767px) {
div.bm {
display: none;
}
div.br {
height: 40%;
}
div.main-row {
height: 60%;
}
#main-text{
font-size: 3rem;
font-weight: 300;
}
}
#media only screen
and (max-width:991px)
and (min-width:767px) {
div.sm {
display: none;
}
div.main-row {
height: 100%;
}
#main-text{
font-size: 4.5rem;
font-weight: 300;
}
}
#media only screen
and (min-width:991px)
and (max-width:1999px) {
div.sm {
display: none;
}
div.main-row {
height: 100%;
}
#main-text {
font-size: 5.5rem;
font-weight: 300;
}
}
#media only screen
and (min-width: 1200px) {
div.sm {
display: none;
}
div.main-row {
height: 100%;
}
#main-text {
font-size: 6.5rem;
font-weight: 300;
}
}
It is mainly the display:none that are not taking effect, but it seems like the #main-text is getting resized correctly. I have a feeling there is a syntax error around the line:
#media only screen
and (min-width:991px)
and (max-width:1999px) {
Because I'm using the css preprocessor stylus, and it's causing this error around that line of code:
ParseError: stylus/monster.styl:40:8
36| font-weight: 300;
37| }
38| }
39|
40| #media only screen
--------------^
41| and (min-width:991px)
42| and (max-width:1999px) {
43|
expected "indent", got "media"
What is wrong with the code?
One problem is this:
The first:
#media only screen
and (min-width:991px)
and (max-width:1999px)
The segment of pixel-widths here is [991; 1999];
The second:
#media only screen
and (min-width: 1200px)
The segment of pixel-widths here is [1200; +infinite]
If you take a look at those two arrays of pixel-widths: there are some elements that are included in both media queries: [1200; 1999];
That will result in an error, becase they can't both run, when the condition is true for both of them.
Check for other problems like this.
I have a floating banner I want to display over 50% of the width of large screens and 100% of the width of small screens (mobile devices).
The image is sometimes very small (I think on retina displays).
How can I improve my code to display correctly on retina displays, large screens, and small mobile device screens?
In the .css
.banner-sticky {
bottom: -2.5px;
left: 0px;
width: 100%;
text-align: center;
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0);
/* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/
}
.advert-img {
width: 50%
height: auto;
}
#media screen and (max-width: 380px) and (orientation: portrait) {
.advert-img {
width: 100%;
}
}
In the .html file
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.
.
.
<div id="sticky" class="banner-sticky" style="position: fixed;">
<a id="ad-link" href=' #' ><span id="banner-ad"><img src=' foo.jpg' class="advert-img" /></a>
</div>
'<a id="ad-link" href=' + this.landingUrl + ' ><span id="banner-ad"><img src=' + this.imgSrc + ' class="advert-img" /></a>'
You can use CSS media queries to distinguish the screen width, like this:
body {
background: url(foo-small.jpg);
}
#media (min-width: 500px) {
body {
background: url(foo-medium.jpg);
}
}
#media (min-width: 800px) {
body {
background: url(foo-large.jpg);
}
}
In order for this to work, you need to set the image as background in CSS, not as a <img> tag
Try using background-size css rule for every resolution
body {
background: url(foo-small.jpg);
}
#media (min-width: 500px) {
body {
background-size:50%;
}
}
#media (min-width: 800px) {
body {
background-size:80%;
}
}
Instead of just having text for example
If I do
1-800-123-4567 then it will be broken on desktops.
If I do (800) 123-4567 then it will display as the number on desktop but should automatically become a link on Android and iPhone
But if I want to make an image like this:
Is there a solution, possibly with media query or any other way. That I can make this image display on desktop and mobile but on mobile function as a button? This is for email so only HTML/CSS options.
Based on the answers I have this and it didn't work either:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-image { display: block; } /* show it on small screens */
#my-link { display: none; } /* hide it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-image { display: none; } /* hide for all below 401px*/
#my-link { display: block; } /* show for all above 401px*/
}
Along with:
<div id="my-image">
Call Now!
</div>
<div id="my-link">
Call 1-800-328-4766
</div>
And it still is not working, both links are showing up.
Deleted my old answer, because it was poor. Please try this http://jsfiddle.net/qDUqS/
The telephone number looks the same both in small screen and in big screen, but it acts like a link, only on smaller screen.
Html:
<span class="phone"><img src="http://goo.gl/PdeeU" />1-800-123-4567<p>1-800-123-4567</p></span>
CSS:
.phone
{
background-color: #152C48;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 4px;
}
a
{
display: inline-block;
text-decoration: none;
color: #ffffff;
padding: 0px;
}
img
{
vertical-align: middle;
width: 24px;
height: 24px;
padding: 0px;
}
p
{
display: none;
color: #ffffff;
padding: 0px;
}
#media only screen and (min-width: 480px) and (max-width: 1920px)
{
a
{
display: none;
}
p
{
display: inline-block;
}
}
Hey I don't know if this is what you are asking for but it might help.
Do let me know.
http://www.wpbeginner.com/wp-tutorials/how-to-add-clickable-phone-numbers-for-smartphones-in-wordpress/
Sorry if this is not what you were looking for.
NOTE: Updated my code and all works as it should be now. set the max-width to 9999px.
Working JSFIDDLE
Make a div and put the image inside that div:
<div id="my-image"></div>
The css would look like this:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-image { display: block; } /* show it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 9999px) {
#my-image { display: none; } /* hide for all below 401px*/
}
for your button/link you can do the same but then otherwise:
<div id="my-link"></div>
The css would look like this:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-link { display: none; } /* hide it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 9999px) {
#my-link { display: block; } /* show for all above 401px*/
}
Hope it helps.
The answer is very simple, just ad opacity "transparrency" to the desktop code.and copy the code to mobile while setting the opacity to 1.