#media screen and (min-width: 501px) and (max-width: 769px)
The code between this media query is taken even if the size of the window is 1920px !
Look at this code :
.row-contact{
.col-xs-12:first-child {
margin-top: 0;
}
}
#media screen and (min-width: 501px) and (max-width: 769px){
.row-contact {
padding: 0 !important;
.col-xs-12:first-child {
margin-top: 12%;
}
}
}
In full screen I have margin-top: 12%, however, it must be margin-top: 0 !
Why this isn't working ?
EDIT
I found the solution !
I closed the media query before writing the SCSS instruction
Thanks for your help ! :D
.row-contact{
.col-xs-12:first-child {
margin-top: 0;
}
}
#media screen and (min-width: 501px) and (max-width: 769px){
.row-contact {
padding: 0 !important;
}
.col-xs-12:first-child {
margin-top: 12%;
}
}
Try this way because nesting is not working if you are not using LESS or SCSS
I think you use nested css so that your code not work
#media screen and (min-width: 501px) and (max-width: 769px){
.row-contact {
padding: 0 !important;
}
.col-xs-12:first-child {
margin-top: 12%;
}
}
Try to use above code
Thanks :)
Related
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 added the following custom CSS to my wordpress theme to change the location of the menu on the mobile version of the site:
#media (max-width: 767px) {
.mob-nav {
top: 25% !important;
}
I then added this code to adjust the margins on the logo for the full desktop version of the website:
#media (min-width: 992px) {
.right-menu .logo img {
margin-top: -15px !important;
}
#media (min-width: 768px) {
.right-menu .logo img {
margin-bottom: -5px !important;
}
When I added the second bit of code it overwrites the CSS I added for the menu. I know they're conflicting somehow but I'm not sure how to fix it.
Thanks
Try this:
#media (max-width: 767px) .mob-nav { top: 50% !important; }
#media (min-width: 992px)
{
.right-menu .logo img
{
margin-top: -15px !important;
}
}
#media (min-width: 768px)
{ .right-menu .logo img
{
margin-top:0px !important;
margin-bottom: -5px !important;
}
}
I got it working, I change the top portion of your code to:
#media (max-width: 767px)
{
.mob-nav
{
top: 25% !important;
}
}
I guess it was missing a { before .mob-nav
Thanks for the help!
I've got the following two media queries:
#media (max-width: 800px) {
.login{
margin-top: 5%;
}
}
}
#media (max-width: 204px) {
.login{
text-align: center;
margin-right: 0%;
}
}
}
Desktop to mobile
When commenting out the top query the bottom one executes
When applying the bottom query styling in the developer tools it works
I've read this about queries: https://css-tricks.com/logic-in-media-queries/
I must not understand something right.
Looks like you've got one too many closing braces which might be messing things up.
#media (max-width: 800px) {
.login {
margin-top: 5%;
}
}
#media (max-width: 204px) {
.login {
text-align: center;
margin-right: 0%;
}
}
You have added a extra closing braces. Please remove it.
#media (max-width: 800px) {
.login {
margin-top: 5%;
}
}
#media (max-width: 204px) {
.login {
text-align: center;
margin-right: 0%;
}
}
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 currently have this chunk of codes.
#media screen and (min-width: 768px) and (max-width: 990px) {
.community-info-box {
width: 100%;
margin-right: 0;
float: none;
... : ...
}
}
#media screen and (max-width: 630px) {
.community-info-box {
width: 100%;
margin-right: 0;
float: none;
... : ...
}
}
What I'm trying to do is something like..
#media screen and (min-width: 768px) and (max-width: 990px),
#media screen and (max-width: 630px) {
.community-info-box {
width: 100%;
margin-right: 0;
float: none;
... : ...
}
}
so I don't have to write the same properties and values again since they are same. Any ideas?
I also searched for "setting more than 2 breakpoints inside a media query" but there's no luck.
You don't have to add #media again in the second line. This should work:
#media screen and (min-width: 768px) and (max-width: 990px),
screen and (max-width: 630px) {
.community-info-box {
width: 100%;
margin-right: 0;
float: none;
... : ...
}
}