I would like to edit a couple things in the media queries of LENSA, a Wordpress theme. My edits do not work.
For example, I want to change this class:
.left {
width: 70%;
float: left;
}
So I write it like this:
#media only screen and (max-width: 480px) and (min-width: 320px){
.left {
width: 100%;
float: none;
}
}
There is no change when the screen is 480px....
Site: www.karaokesharksf.com
I think that #media statement might be over-complicating it. Why not try just this?
#media (max-width:480px) {
.left {
width:100%;
float:none;
}
}
Related
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
I'm sure there is a simple answer to this question. Instead of having the left div appear first on mobile (media queries), as it naturally would, how would I make the right div appear first instead?
The left div would appear first on desktop view.
<style>
.left {
width:27%;
float:left;
}
.right {
width:70%;
float:right;
}
</style>
<div id="tier-1">
<div class="left"></div>
<div class="right"></div>
</div>
Just write the right div first.
Use a media query. Like this:
#media (max-width 500px){
.right{
float: left;
}
}
Of course, 500px could be anything. Chrome developer tools let you emulate different sizes and even have some preset phone resolutions. Nonetheless, You could completely change how everything is formatted with media queries.
See this description from w3 schools.
by using media queries we can change the css value of all the html elements.
commonly media queries are write in 4 common screens . also customization is possible .
#media only screen and (min-width : 1200px) {
}
#media only screen and (max-width: 992px) {
}
#media only screen and (max-width: 767px) {
}
#media only screen and (max-width: 479px) {
}
#media only screen and (min-width : 1200px) {
}
#media only screen and (max-width: 992px) {
}
#media only screen and (max-width: 767px) {
}
#media only screen and (max-width: 479px) {
}
for mobile device 767(landscape) and 479(portrait). use below media query for your question.
#media only screen and (max-width: 479px) {
.left {
width: 27%;
float: left;
height: 50px;
background-color: #393318;
color: #fff;
text-align: center;
}
.right {
width: 70%;
float: right;
height: 50px;
background-color: green;
color: #fff;
text-align: center;
}
#media only screen and (max-width: 479px) {
.right {
float: left;
}
.left {
float: right;
}
}
}
<div class="left">leftdiv</div>
<div class="right">right div</div>
Thank you everyone for your contributions, but I ended up finding a solution on this URL: Use CSS to reorder DIVs
I used the CSS3 Flexbox Layout Module. Thank you again!
So I am trying to make my website responsive, but when I target screens larger than 1600px the css is not working. Do I have any typo in my css code? Thank you.
#media (max-width:900px) and (min-width:600px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
#media (max-width:1250px) and (min-width:900px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
/* THIS ONE IS NOT WORKING */
#media only screen and (min-width: 1600px) and (max-width: 2600px) {
ul.news li {
width: 100%!important;
color: red!important;
}
}
You can refer to this Media Query and write your css in this media query dimensions
/*=====Media Query Css Start======*/
#media all and (max-width:1920px){
}
#media all and (max-width:1600px){
}
#media all and (max-width:1366px){
}
#media all and (max-width:1280px){
}
#media all and (max-width:1024px){
}
#media all and (max-width:960px){
}
#media screen and (max-width:767px){
}
#media screen and (max-width:480px){
}
/*=====Media Query Css End======*/
I have a problem when I use media query in css3: without screen, meida query doesn't work.
Here is code:
.side-menu {
position: fixed;
...
display: none;
margin-right: 0;
#media screen and (min-width: #screen-xs) {
display: block;
}
#media and (min-width: #screen-md) {
right: 8.1%;
}
}
Problem: the first media query works and the seconds doesn't. If I remove the screen and the first doesn't work either.
SO, could anyone help me?
You should remove the and in this line:
#media and (min-width: #screen-md)
To become:
#media (min-width: #screen-md)
When using less mixins to build a Website with Bootstrap I do something like this:
#logo {
.make-sm-column(3);
.make-md-column(3);
.make-lg-column(3);
}
#menu {
.make-sm-column(5);
.make-md-column(5);
.make-lg-column(5);
}
This looks very neat in the .less file but it does bloat up the compiled css a lot, isn't it?
Every class and id with such a mixin gets it's own set of media-queries:
#media (min-width: 768px) {
#logo {
float: left;
width: 25%;
}
}
#media (min-width: 992px) {
#logo {
float: left;
width: 25%;
}
}
#media (min-width: 1200px) {
#logo {
float: left;
width: 25%;
}
}
#media (min-width: 768px) {
#menu {
float: left;
width: 41.66666666666667%;
}
}
#media (min-width: 992px) {
#menu {
float: left;
width: 41.66666666666667%;
}
}
#media (min-width: 1200px) {
#menu {
float: left;
width: 41.66666666666667%;
}
}
This gets repeated for every class/id with the column-mixin. I think it would be more elegant and more effective to combine these definitions in 3 media-query blocks.
Is there a way I can do this (semi-)automatically.
I am using Windows and compiling with WinLess at the moment, but havent found such an option.
There's .make-xs-column mixin in current Bootstrap version, it generates the same CSS without any media queries.
Little late, but if you note the min-width in those media queries, you don't need to make the medium and large columns if they're the same as the small. You only need to specify the medium and large columns if they're different than your small columns. This is all you need to do:
#logo {
.make-sm-column(3);
}
#menu {
.make-sm-column(5);
}
That will output the minimal amount of code to get your desired layout.