Is there a way to scale font-size without using JavaScript? For example if you open the webpage on a 15" laptop and a container div was 400px wide and the font was defined to fill the entire div. Then you open the website on a 17" screen and the div is 600px. Is there a way to make the font automatically scale?
In essence its adding a "width: 100%" to text, which you cant do. I would much rather do it without JavaScript because I am already using a lot in the webpage and it becomes messy after a while.
Any help would be appreciated.
Thanks in advance.
You can use media queries for that. Depending on the width of your page/container you can set the font size accordingly.
For example:
#media only screen and (max-device-width: 480px) {
#container { font-size: 90%; }
}
#media only screen and (max-device-width: 600px) {
#container { font-size: 100%; }
}
Add media queries your css file.
#media only screen and (max-width: 800px)
{
body
{
//font-size or what you want to change
}
}
Or write external file and import it:
<link rel="stylesheet" href="http://domain.tld/screen.css" type="text/css" media="MediaCssId" />
Thanks for all your help everyone, but what I ended up doing was just using text-align: justify. It's not exactly what I wanted, but its a solution to stretch the text. I appreciate all your help.
Related
So I'm a newbie when it comes to bootstrap. I came across the web and found out that I can make my containers look the same on all screens by using this code?
#media (min-width: 1200px) {
.container-small {
width: 700px;
}
.container-large {
width: 1500px;
}
}
Can someone please explain this more to me and tell me how it works.
#media (min-width: 1200px) {
}
This tell to the PC, when the screen width is equal or less than 1200px the boxes you edited before in CSS are going to have a different behavior.
I mean if I have a div which width is 500px and, of course, in a cellphone doesn´t look good, you while using this metod of #media can change the size and behavior of your div and the elements that contains, without affect your original size in the desktop.
https://www.youtube.com/watch?v=6Yh8y0pVfQc&ab_channel=Flux
In this video is explained very well. I hope it can helped you!
I have an example of a website for this question (because I can't figure a way to ask it..)
https://livedemo00.template-help.com/opencart_62166/
As you can see, if you resize the browser width, only the margins resizes, and not the divs inside it.
Is there a way to acheive the result in CSS? Do I have to use Javasciprt to achieve that? Thank you.
In that example the developers are using media breakpoints. These apply different styles to elements depending on the browser window size. A tutorial is here
Basically your CSS looks something like this:
#media screen and (min-width: 500px) {
body {
width: 800px;
}
}
#media screen and (max-width: 500px) {
body {
width: 300px;
}
}
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width not working
#media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-width its working
#media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
Fiddle for this
https://jsfiddle.net/j4Laddtk/
Have you tried adding the viewport in?
<meta name="viewport" content="width=device-width, initial-scale=1">
Working JSFiddle
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)
Try this method.
This will target based on device
#media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
To target based on browser window area
#media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
You need to place the #media queries after you declare your standard
Another thing that can happen is that you do something really stupid like:
#media only screen and (max-width: 1400) { ... }
Make sure you put the px to identify what the quantity of your max-width is.
#media only screen and (max-width: 1400px) { ... }
Not that I've ever been stuck for an hour on something so simple..
This worked for me
#media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.
If you have
.container {
color: white;
}
and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.
.container {
color: white;
}
#media only screen and (max-width: 600px) {
.container {
color: pink;
}
}
So if your media queries are at the top the default colour of white will override the media query for pink.
This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More details https://www.w3schools.com/css/css_rwd_viewport.asp
#media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.
Sometimes it's not working because of the browser cache.
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.
I can't seem to get my media queries to actually display.. I'm trying to eventually get it so that my text will re-size based on browser size, but I'm just trying to do a test run to see if it will even work.
I'm trying to have it so that when the browser resizes to 1200px in width the page background turns red. Here's my css:
#media screen and (min-width: 500px) and (max-width: 1200px) {
.main {
background-color: red;
}
}
and here is my stylesheet link:
<link rel="stylesheet" media="media screen and (min-width: 500px) and (max-width: 1200px)" href="tek_bigscreen.css">
I also have another stylesheet with no media queries in it linking to the page:
<link rel="stylesheet" type="text/css" href="tekstyle.css">
Any idea why the media query won't work? Also any insight as to how to properly resize the text would be appreciated. Thanks!
I'm not entirely sure why your background is not turning red. But the best way I've found to properly resize your text is to use ems.
Something like:
body {
font-size:100%;
}
h1 {
font-size:2em;
}
#media only screen and (min-width:500px) and (max-width:1200px) {
body {
font-size:15px
}
}
font-size:100% will make 1em equal to the browser's default font size, usually 16px, and when you reduce the font size on the body tag, everything that is set in ems inside the body will be proportionally reduced in size.
Edit: Also, and this is just a suggestion because it's the way I do it, but instead of putting the media queries in the link tags. Just keep all of your media queries inside the CSS file and use this poly-fill to make them work with old IE.
There's no need to include the media attribute in the style sheet link if you have #media in the style sheet itself. Indeed, it may be causing an error—I'm not sure. Perhaps try putting your code into the regular style sheet and see what happens, or just put the color declaration in the first style sheet without the #media wrapper.
I make an exercise about html with several input buttons:
http://bullmalay.appspot.com/
I visit it on my mobile. But I find the text size is really small. I think the reason is about resolution.
Can anyone help me about the text size? I want it can display the similar size in my laptop.
ps.
I have searched about css:#media (min-width: 702px) and then set the font size. But I think even a small device can have a resolution high than my laptop.The size will be smaller than it display on my laptop screen.
I think the size should be: fontSize * (width per pixel of my laptop)/(width per pixel of that device). But I am not familiar about css.
Thank you all. I have learned a lot. But I find the reason myself.
The browser on mobile device will auto scale the page to adapt the mobile screen. I just add this line to the html and it works:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
You may use something like #media handheld and (max-width: 500px). But unfortunately, I don't think there's a way to use CSS like
fontSize * (width per pixel of my laptop)/(width per pixel of that device)
There is only one way so far that we know, you need to do some thing like this
#media (max-width: 300px) {
html { font-size: 70%; }
}
#media (min-width: 500px) {
html { font-size: 80%; }
}
#media (min-width: 700px) {
html { font-size: 120%; }
}
#media (min-width: 1200px) {
html { font-size: 200%; }
}
Well ther is one thing you can do, You probably want to set your font sizes in pt units (1pt = 1/72 inch), which are resolution-independent and designed to look the same apparent size in any resolution.
Try adding the below code
body{
-webkit-text-size-adjust: none;
}