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%;
}
}
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.
Second media querie works fine - (min-width: 601px) and (max-width: 992px) - but the first on just does not work - (max-width: 600px).
Am i missing something? Cause even if i add min-width to first one it still does not work.
.center {
font-size:70px;
color:white;
position: absolute;
height: 50px;
top: 40%;
left: 30%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
text-align: center;
font-family: "Josefin Sans";
font-weight: bold;
}
#media only screen and (max-width: 600px){
body {
background-color: olive;
}
.center{
margin-left:-135px;
font-size:60px;
}
}
#media screen and (min-width: 601px) and (max-width: 992px){
body {
background-color: blue;
}
}
You have some dot in your code remove it (see image)
Here is working one:https://jsfiddle.net/tben7qz8/4/
You can try #media screen and (max-width: 600px) without only
There was a hidden symbol behind the brackets. Noticed that when i posted the code.
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!
#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 :)
I am using a NextGen Gallery on my Wordpress site, but the gallery box does not respect the lefthand margin of the rest of the page (that is, all other images, text, etc. is has some sort of indentation or padding, but the NextGen Gallery floats all the way to the left). I would like to prevent it from overriding this padding, or at least to float to the center. I've tried editing the css in several places, but I may be editing the wrong class, or something. An example of the gallery is near the bottom of the page at http://www.montereyhighdrama.com/multimedia/the-marriage-of-figaro-2010/ Thanks.
Don't know about making it respect left padding, but this does work to make the entire set of thumbnails to float to the center.
.ngg-galleryoverview {
text-align:center;
}
.ngg-gallery-thumbnail-box {
float:none !important;
display:inline-block;
}
Add these lines to your style.css and you should be all set:
.ngg-galleryoverview { text-align: center; }
.ngg-gallery-list { display: inline-block; margin: 0; }
.ngg-gallery-list li { float: none; display: inline-block; }
I had the same issue, but needed a solution that worked for all nextgen galleries dynamically, so I used media queries. BTW, I could not find any other solution and don't know how to use the above code.
I'm using Catalyst/Dynamik theme so I can set an exact page width and #container-wrap initial padding, but that didn't do anything for centering the thumbnails or improve the mobile device look.
These are my media queries, you would have to adjust for your thumbnail size, I used 220px wide.
Final result: http://site01.profoliolive.com/fixed-grid/ Tested on iPad, iPhone and Android phone.
#media (max-width: 1209px) {
.ngg-galleryoverview { padding-left: 115px; }
}
#media (max-width: 1170px) {
.ngg-galleryoverview { padding-left: 90px; }
}
#media (max-width: 1140px) {
.ngg-galleryoverview { padding-left: 80px; }
}
#media (max-width: 1120px) {
.ngg-galleryoverview { padding-left: 70px; }
}
#media (max-width: 1090px) {
.ngg-galleryoverview { padding-left: 60px; }
}
#media (max-width: 1070px) {
.ngg-galleryoverview { padding-left: 50px; }
}
#media (max-width: 1050px) {
.ngg-galleryoverview { padding-left: 40px; }
}
#media (max-width: 1030px) {
.ngg-galleryoverview { padding-left: 25px; }
}
#media (max-width: 1010px) {
.ngg-galleryoverview { padding-left: 20px; }
}
#media (max-width: 990px) {
.ngg-galleryoverview { padding-left: 10px; }
}
#media (max-width: 975px) {
.ngg-galleryoverview { padding-left: 120px; }
}
#media (max-width: 900px) {
.ngg-galleryoverview { padding-left: 80px; }
}
#media (max-width: 860px) {
.ngg-galleryoverview { padding-left: 60px; }
}
#media (max-width: 830px) {
.ngg-galleryoverview { padding-left: 40px; }
}
#media (max-width: 800px) {
.ngg-galleryoverview { padding-left: 15px; }
}
#media (max-width: 760px) {
.ngg-galleryoverview { padding-left: 0px; }
}
#media (max-width: 741px) {
.ngg-galleryoverview { padding-left: 110px; }
}
#media (max-width: 660px) {
.ngg-galleryoverview { padding-left: 80px; }
}
#media (max-width: 620px) {
.ngg-galleryoverview { padding-left: 25px; }
}
#media (max-width: 507px) {
.ngg-galleryoverview { padding-left: 20px; }
}
Simple way is to use:
<center>[nggallery id=1]</center> or <div align="center";>[nggallery id=1]</div>