I want to change the font size of a table header.
It should be large when the application is view at the desktop and become smaller when shown on a mobile phone.
th {
#media screen and (max-width: 699px) {
font-size: xx-large;
}
#media screen and (max-width: 700px) {
font-size: small;
}
}
I am not quite sure if this is the right way.
you have to write the TH style inside the media syntax
For more details
#media only screen and (max-width : 700px) {
th
{ font-size: small;
}
}
You have to write this way
th {
font-size: xx-large;
}
#media screen and (max-width: 699px) {
// write any CSS code here.
th {
font-size: xx-large;
}
}
The way to do this is to style the th element as you would have it on the large screen and then set the media query to apply a different style for smaller screens.
th{
font-size: large-font-size;
}
Then now write the different styles to be applied on smaller screens.
#media screen and (max-width: 700px) {
font-size: smaller-font-size;
}
Related
I have an issue with media query. I tried to reproduce it on fiddle without success. So sorry if you have not a fiddle. As I have been searching quite a lot of time, I only expect from you to give me ideas how to resolve it.
I have those media queries
#media (min-width: 576px) {
input, textarea, .invalid-feedback {
width: 22vw;
}
}
#media (min-width: 768px) {
input, textarea, .invalid-feedback {
width: min(16.66vw, 200px);
}
}
When I display my screen with a width of 782px and lower, the media query #media (min-width: 576px) is taken into account, which is not normal. Do you have an idea ?
EDIT
I think there is a problem with media queries. I tried the following
#media (min-width: 576px) {
input, textarea, .invalid-feedback {
width: 22vw;
}
body {
background-color: red !important;
}
}
#media (min-width: 768px) {
input, textarea, .invalid-feedback {
width: min(16.66vw, 200px);
}
body {
background-color: green !important;
}
}
and I can't see a background color red or green when I have a size of 779px
I'm trying to create a responsive webpage where the max-width of html is 1000px. All of my fonts are specified in terms of vw. Is there a way to stop the fonts from growing when the browser is expanded to over 1000px?
You can use a #media rule:
.text-class {
font-size: 0.2vw;
}
#media only screen and (min-width: 1000px) {
.text-class {
font-size: /* some fixed size */;
}
}
Use media queries
.dynamic-size-text {
font-size: 30px;
}
#media only screen and (max-width: 1000px) {
.dynamic-size-text {
font-size: 10vw;
}
}
I'm attempting to write media queries for a site built using HubSpot CRM and my queries are not doing anything. I've added the <meta name="viewport" content="width=device-width" /> in my head and the following css:
#media all and (min-width: 1045px) {
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
font-size: 0.9em;
}
}
this is supposed to change the font-size of the navigation links so they don't break to a new line - http://www.steelbridgeins.com/
please help! -_-
You can remove all for the device attribute as it is the default and I think you mean to use max-width instead if you are trying to target all screen-widths below 1045px.
#media (max-width: 1045px) {
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
font-size: 0.9em;
}
}
I believe this problem is occurring due to the nesting of media queries. Currently, in style.min.css, you are using:
#media (min-width: 481px) and (max-width: 767px) {
/* some stylings */
#media (max-width: 1045px) {
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
font-size: 0.9em;
}
}
}
If you move the media query you desire outside of the other media query, as shown below, this should resolve your issue.
#media (min-width: 481px) and (max-width: 767px) {
/* some stylings */
}
#media (max-width: 1045px) {
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
font-size: 0.9em;
}
}
I thought this would be a helpful tutorial on how to create a loop in less that create media queries to allow for responsive fonts.
I was unhappy with how my font would never scale while all my DIVs and images would do so. As you scale down. The font appears to get larger making the design and layout look terrible. Of course I could leave it that way and let the text wrap but that also looks terrible.
So I created these media queries to incrementally increases the font size every 20 pix by 0.05. Then that evolved into less logic so that I could use less code. However, I've included both css and less bellow.
With the font changing every 20 pix of resizing can look a little choppy. But that's much better then only having 3 media queries to change font size. That's garbage. And Lazy. Why do it manually? I digress. See the advantage of having a loop is that you can refine and increase the amount of media queries to get more smoothness in font/browser sizing.
One last thing. once you have you fonts set this way; to html. Everything else must be set to percentage font sizes. That way they are a percentage of the html font size and will be responsive. Here's an example:
html{
font-size: 1em;
}
h1{
font-size: 120%; //1.2em
}
h2{
font-size: 110%; //1.1em
}
Please tell me what you think.
-Love PAT
LESS LOOP:
//Set font for 300 pix devices and lower. Font size will increase by 0.05 every 5pix of width.
#fontSize: 0.7em; //em
//#media start at?
#screenWidth: 300px;
#screenWidthMax: 640px;
#loop: (((#screenWidthMax - #screenWidth)/20)-1);
//Size for 640px and above
#fontSizeMath640: round(#fontSize + (#fontSize * (0.05*(#loop+2))),2);
#media (min-width: #screenWidthMax) {
html {
font-size: "#{fontSizeMath640}";
}
}
//Create loop that repeats from 300 pix all the way to 640 pix incrementing by 20px. So, (640-300=340)/20=17. Loop 68 times.
.responsiveFont (#index) when (#index >= 0) {
#minWidth: (#screenWidth+(20*#index));
#maxWidth: (#minWidth + 19);
#fontSizeMath: round(#fontSize + (#fontSize * (0.05*(#index+1))),2);
#media (min-width: #minWidth) and (max-width: #maxWidth) {
html {
font-size: "#{fontSizeMath}";
}
}
// next iteration
.responsiveFont(#index - 1);
}
// end the loop when index is 0
.responsiveFont (0) {}
// "call" the loopingClass the first time with highest value
.responsiveFont (#loop);
//Size for 300px and below
#media (max-width: #screenWidth) {
html {
font-size: "#{fontSize}";
}
}
Which Prints out this:
CSS
#media (min-width: 640px) {
html {
font-size: "1.33em";
}
}
#media (min-width: 620px) and (max-width: 639px) {
html {
font-size: "1.29em";
}
}
#media (min-width: 600px) and (max-width: 619px) {
html {
font-size: "1.26em";
}
}
#media (min-width: 580px) and (max-width: 599px) {
html {
font-size: "1.22em";
}
}
#media (min-width: 560px) and (max-width: 579px) {
html {
font-size: "1.19em";
}
}
#media (min-width: 540px) and (max-width: 559px) {
html {
font-size: "1.15em";
}
}
#media (min-width: 520px) and (max-width: 539px) {
html {
font-size: "1.12em";
}
}
#media (min-width: 500px) and (max-width: 519px) {
html {
font-size: "1.08em";
}
}
#media (min-width: 480px) and (max-width: 499px) {
html {
font-size: "1.05em";
}
}
#media (min-width: 460px) and (max-width: 479px) {
html {
font-size: "1.01em";
}
}
#media (min-width: 440px) and (max-width: 459px) {
html {
font-size: "0.98em";
}
}
#media (min-width: 420px) and (max-width: 439px) {
html {
font-size: "0.94em";
}
}
#media (min-width: 400px) and (max-width: 419px) {
html {
font-size: "0.91em";
}
}
#media (min-width: 380px) and (max-width: 399px) {
html {
font-size: "0.88em";
}
}
#media (min-width: 360px) and (max-width: 379px) {
html {
font-size: "0.84em";
}
}
#media (min-width: 340px) and (max-width: 359px) {
html {
font-size: "0.8em";
}
}
#media (min-width: 320px) and (max-width: 339px) {
html {
font-size: "0.77em";
}
}
#media (min-width: 300px) and (max-width: 319px) {
html {
font-size: "0.73em";
}
}
#media (max-width: 300px) {
html {
font-size: "0.7em";
}
}
For best responsive Media queries we use Bootstrap class where defined these :
/* Small devices ( #screen-sm-min Phones (<768px) ) */
#media (min-width: 368px) {
}
/* Small devices (#screen-sm-min tablets, 768px and up) */
#media (min-width: 768px) {
}
/* Medium devices ( #screen-md-min desktops, 992px and up) */
#media (min-width: 992px) {
}
/* Large devices ( #screen-lg-min large desktops, 1200px and up) */
#media (min-width: 1200px) {
}
totally new to media queries and responsive design and I've fallen at the first hurdle.
I have the following:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
And only the max-width: 500px works in that as I reduce the screen down it changes to the first colour, but as I reduce it further down to below 100px nothing else happens.
Where have I failed?
thanks
SOLUTION:
For anyone else with the same issue, here is the answer as provided by Sean Vieira.
The cascade still applies to active media queries so swapping them around resolves the issue) I also increased it from 100px as suggested by Roy Stanfield as the desktop browser might not go that small.
#media only screen and (max-width: 800px) {
#wrap {
background: #224466;
}
.entry-title {
font-size: 2em;
}
}
#media only screen and (max-width: 400px) {
#wrap {
background: #F00;
}
.entry-title {
font-size: 1em;
}
}
The cascade still applies to active media queries (if I understand it correctly). If you look at what you wrote without the media queries, the problem becomes more evident:
#wrap {
background: #F00;
}
#wrap {
background: #224466;
}
Switching the order should fix the problem:
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
If you are using a normal desktop browser you may not be able to make it smaller than 100px. Try increasing your test widths to larger sizes like 500px and 1000px.
This is because of the ordering in the media queries in CSS.
Either change the order or
Try to put !important over
Use this one http://jsfiddle.net/fidrizers/8Pmuw/
Try using min-width in one of your queries, so it becomes:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (min-width: 101px) and (max-width: 500px) {
#wrap {
background: #224466;
}
}