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;
}
}
Related
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;
}
When i make the responsive of my web-site,
some media query works but the last ones don't.
/* work */
#media screen and (max-width: 1030px){
.section2 .content-card .title-card img {
max-width: 200px;
}
.section1 {
height: 1000px;
}
}
/* doesn't work */
#media screen and (max-width: 1030px){
.section2 {
padding-top: 15vh;
}
}
#media screen and (max-width: 260px){
.section2 {
padding-top: 6vh;
}
.section1 {
padding-top: 3vh;
}
}
In my code there are many more media queries but I had to remove them because of the code limits on the question.
Is there a limit to the number of media queries per file?
See attached picture. This shows that it is working.
In fact to do the responsive, I use the responsive mode with the devtools
is that why its not workingscreen shoot
My page here: https://webtan.jp/
I hide this section:
#top__fullcarousel {
display: none;
}
but after hiding it, the following part (the siteContent block) didn't fit (
the error here)
I fixed the padding and it's only working with viewport(min width 1200px), not working rightly with other viewports (mobile, ipad...)
.siteContent {
padding-top: 129px;
}
How can I responsive it in this case?
You can explicitly set padding that you need for each by each device width:
#media screen and (max-width: 1000px) {
.siteContent {
padding-top: 129px;
}
}
#media screen and (max-width: 850px) {
.siteContent {
padding-top: 109px;
}
}
#media screen and (max-width: 600px) {
.siteContent {
padding-top: 89px;
}
}
#media screen and (max-width: 320px) {
.siteContent {
padding-top: 69px;
}
}
Of course you can use a lot of another methods, but this one is most ease way.
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;
}
}
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;
}
}