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.
Related
I have a code like this:
.text--heading {
width: 382px;
height: 55px;
font-family: Tomica;
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 55px;
color: #181E4B;
}
I need to make it responsive and decrease lengths, font-sizes etc of most elements.
Does media queries have any facility where i could be able to do something like the following:
#media only screen and (max-width: 700px) {
.text--heading {
font-size: size /* where size is 30% of size already defined previously*/
}
}
What you can do is to scale the element, which - if I understand your intentions correctly – should have a very similar outcome, at least for the CSS rule you posted above. So the media query would be as follows (where everything would be 50% of the original size):
#media only screen and (max-width: 700px) {
.text--heading {
transform: scale(0.5);
}
}
See also https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()
a combination of CSS var and calc could work, it's CSS3 though and might not work in older browsers.
:root {
--a: 40px;
}
.text--heading {
width: 382px;
height: 55px;
font-family: Tomica;
font-style: normal;
font-weight: bold;
font-size: var(--a);
line-height: 55px;
color: #181E4B;
}
#media only screen and (max-width: 700px) {
.text--heading {
font-size: calc(var(--a) * .3);
}
}
Im trying to get my text to fall under the image when the window is resized, I am new to coding and this is the very first thing ive tried to code so dont judge lol.
Codehttps://jsfiddle.net/b17nhj3y/1/#&togetherjs=wdEDSQBkB2
You should check for media queries in CSS, if you want to display elements in a page differently on different devices/screen size.
Sample:
#media (max-width: 12450px) { your style here.. }
You can use media queries to make your webpage responsive :
#media only screen and (min-width : 320px) and (max-width : 720px) {
#p {
position: relative;
bottom: 500%;
overflow: hidden;
margin-left: 15%;
margin-top: 50px;
margin-right: 25px;
font-weight: 200;
font-size: 14px;
color: #757575;
transform:translateX(-0.5%);
}
}
Check here: https://jsfiddle.net/gs86uL5k/
You have a lot of negative margins and absolute positions. Try this for the CSS.
#p {
overflow: hidden;
margin-right: 25px;
font-weight: 200;
font-size: 14px;
color: #757575;
transform: translateX(-0.5%);
}
If you need this to only happen on a certain screen size, check out media queries.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I am not sure if this is entirely possible. Want to check here.
Basically what I am trying here is to have a default font size (say 40px). when a media query kicks in I want to change it to reduce to 80% of default font size. Is that possible?
.text p span{
font-size:40px;
}
#media screen and (max-width: 640px){
.text p span{
font-size: <0.8*40px>;
}
}
#media screen and (min-width: 641px) and (max-width: 1024px){
.text p span{
font-size: <0.6*40px>;
}
}
The reason I am not setting px values is because .text p span gets different class names which will have different font sizes. But they need to scale down in the same ratio. Am I trying that's not achievable?
You could use em, like this, where you set a default on the body, or on any parent you want to inherit font-size from, and adjust from there
Also rem and % is possible alternatives, it all comes down to markup structure etc.
em is relative to its direct or nearest parent, rem is relative to the html (root) - their font-size.
body {
font-size: 20px;
}
.text p span {
font-size: 2em;
}
#media screen and (max-width: 640px) {
.text p span {
font-size: 1.6em;
}
}
#media screen and (min-width: 641px) and (max-width: 1024px) {
.text p span {
font-size: 1.2em;
}
}
<div class="text">
<p>
<span>
Hey there ...
</span>
</p>
</div>
With rem one can do like this
html {
font-size: 40px;
}
.sampleClass {
font-size: 20px;
}
#media screen and (min-width: 641px) and (max-width: 1024px){
.sampleClass span {
font-size: 0.8rem;
}
}
#media screen and (max-width: 640px){
.sampleClass span{
font-size: 0.6rem;
}
}
<p class="sampleClass">
This is 20px
<span>This is relative to the html element when #media kicks in</span>
</p>
I'm not the biggest fan of ems but if you only want to reduce to 80% use .8em as your strong override of the .text p span size you have set.
#media screen and (max-width: 640px){
.text p span{
font-size: .8em;
}
}
It might be worth looking into Sass/Scss for setting variables and having operators applied to them. You can set your variables at the start of your stylesheet, and when you compile your .sass or .scss file, it outputs the correct number in your .css file
http://sass-lang.com/guide#topic-8
It is entirely possible and as you can probably tell there is a number of ways to achieve this. The technique I use is very simple:
Set the font-size on the body and html elements in px, as well as any media query to step the font size up or down, in px.
Use rem units to set the font-size where you need. rem stands for root em, where root is the topmost element in the DOM, usually html or body.
Example:
html, body {
font-size: 18px;
}
#media screen and (max-width: 320px) {
html, body {
font-size: 15px;
}
}
/*
The rem values use 18px or 15px as the base unit
depending on matching query.
In this case there is no need to use 1rem unless you need to reset
a previously changed value.
*/
.heading { font-size: 1.2rem; }
.small { font-size: 0.8rem; }
Using rem makes it very easy (for me at least) to reason about relative sizes.
em on the other hand is very useful if want a value to be affected by the font-size of the closest parent element.
For example if you wanted to have a padding that scales proportionally to the text size of a .heading, then you'd use em:
html, body {
font-size: 18px;
}
#media screen and (max-width: 320px) {
html, body {
font-size: 15px;
}
}
.heading { font-size: 1.2rem; }
.small { font-size: 0.8rem; }
/*
Now you define a padding that is always 80% of the element's
font-size.
And since .heading is set at 1.2rem, the padding will be
80% of 1.2rem.
*/
.heading { padding: 0.8em; }
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 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.