I do have the viewport line in my code, btw. Below is my CSS - I suspect I've made an obvious error, but just am not seeing it! The text and images do flow into the expected one column, but the narrower divs remain narrow, the background image still shows, the images still full size. Please advise.
.cont { width:100%; max-width:1000px; position:relative; margin:0 auto; font-family:Arial, Helvetica, san serif; font-size:1em; text-align:left; }
.hdr { width:100%; max-width:1000px; position:relative; margin:0 auto; }
.row1 { width:100%; position:relative; background:url(https://myimagefiles.com/dinnerman/tbg.png); float:left; }
.row1l { width:26%; position:relative; margin-left:2em; float:left; }
.row1r { width:64%; position:relative; margin-left:2em; margin-right:2em; float:left; }
.row2 { width: 94%; position:relative; text-align:left; margin:0 auto; }
.row3l { float:left; width: 45%; position:relative; text-align:left; margin:0 0 0 2em; }
.row3r { float:left; width: 45%; position:relative; text-align:left; margin:0 0 0 2em; }
.grntxt { color:#207815; }
.bott { width:100%; height:19px; )
#media only screen and (max-width: 750px) {
.cont { width:100%; }
}
#media only screen and (max-width: 750px) {
.hdr { width:94%; }
}
#media only screen and (max-width: 750px) {
.mimg { width:94%; }
}
#media only screen and (max-width: 750px) {
.row1 { width:94%; margin-left:.2em; margin-right:.2em; background-image:none;}
}
#media only screen and (max-width: 750px) {
.row1l { width:94%; margin-left:.2em; margin-right:.2em; background-image:none;}
}
#media only screen and (max-width: 750px) {
.row1r { width:94%; margin-left:.2em; margin-right:.2em; background-image:none;}
}
#media only screen and (max-width: 750px) {
.row2 { width:94%; margin-left:.2em; margin-right:.2em; }
}
#media only screen and (max-width: 750px) {
.row3l { width:94%; margin:0 auto; }
}
#media only screen and (max-width: 750px) {
.row3r { width:94%; margin:0 auto; }
}
#media only screen and (max-width: 750px) {
.bott { display:none;}
}
You have a typo
.bott { width:100%; height:19px; )
Should terminate with a } not a )
.bott { width:100%; height:19px; }
You should use a CSS linter (such as CSSLint) to make sure you're not making any typos. They can be run as separate tools, as part of your build chain (Grunt, Gulp, Webpack, etc.) or directly in any proper IDE (Sublime, Atom, etc.). There's also online versions like this one which I used to track down the errors in your code. They're good for quick checks like this, but not suitable for a real development workflow.
Additionally, you should really group your media queries
#media only screen and (max-width: 750px) {
.cont { width:100%; }
.hdr { width:94%; }
.mimg { width:94%; }
...
}
There's no need to have separate ones for each set of styles you're applying.
Related
So I have an element that I want to change at 750px and 500px:
.footer-logo img {
content:url(...);
}
and then:
#media only screen and (max-width: 700px) {
.footer-logo img{
margin-top: -58px !important;
padding:64px;
}
}
#media only screen and (max-width: 500px) {
.footer-logo img {
width: 80vw !important;
max-width:none !important;
margin-top:-10px !important;
}
The 500px changes happen but the changes when testing at 700px do not happen. I know I shouldn't be using !important so much but the styling just won't happen without it... Any help is appreciated
You can Try This. please check div Color changes According to media query
HTML
<div class="footer-logo">
<img src="http://dummyimage.com/100x50/000/fff&text=Throbble!">
</div>
CSS
#media only screen and (max-width: 700px) {
.footer-logo > img{
margin-top: -58px !important;
padding:64px;
}
.footer-logo {
background-color:yellow;
}
}
#media only screen and (max-width: 500px) {
.footer-logo > img {
width: 80px !important;
max-width:none !important;
margin-top:-10px !important;
}
.footer-logo {
background-color:red;
}
}
this is my code for my buttons that i have on my page, with my desktop the buttons turn out pretty much where i want them to, but when i get on a laptop the buttons move down the page further and further depending on the computer resolution..
my background image is set up to fit the screen no matter what size they have there resolution at or how they resize there browser to keep it from distorting the picture but i just can't seem to get the buttons to show in the same spot for all resolutions.. or if there was a way to get the buttons to move with the background image for its position that's pretty much what im looking for and i have tried % also but here is the code below
a.button {
position:absolute;
display:block;
}
a.button.testing-link {
width:250px;
height:87px;
background:url(http:);
top:753px;
left:750px;
}
a.button.testing2-link {
width:250px;
height:87px;
background:url(http:);
top:753px;
left:180px;
}
a.button.testing3-link {
width:250px;
height:89px;
background:url(http:);
top:753px;
left:465px;
}
This is because you need to make your css responsive. Here's a cheat sheet.
http://webdesignerwall.com/tutorials/css3-media-queries
But basically you would have something like this:
#media screen and (max-width: 600px) {
a.button {
//your rules for that
}
}
#media screen (min-width: 600px) and (max-width: 800px) {
a.button {
//your rules for that
}
}
and so on.
Answer in english: Your desktop's resolution is not the same as the laptop you viewed, therefore those rules you set for it are still applied on the laptop, it looks different because of the resolution.
Also, a mistake I ran into as a novice web developer was positioning how you are, I would suggest not positioning that way, look up on google examples of good positioning methods, perhaps using percents instead of static values in pixels.
this is what i have came up with .. let me know what you think ?
a.button {
position:absolute;
display:block;
margin-left:auto;
margin-right:auto;
}
#media screen and (min-width: 1500px) and (max-width: 2500px) {
a.button.testing-link {
width:250px;
height:87px;
background:url();
top:753px;
left:750px;
}
}
#media screen and (min-width: 600px) and (max-width: 1499px) {
a.button.testing-link {
width:250px;
height:87px;
background:url();
top:0px;
left:0px;
}
}
#media screen and (min-width: 1500px) and (max-width: 2500px) {
a.button.testing2-link {
width:250px;
height:87px;
background:url();
top:753px;
left:50px;
}
}
#media screen and (min-width: 600px) and (max-width: 1499px) {
a.button.testing2-link {
width:250px;
height:87px;
background:url();
top:0px;
left:0px;
}
}
#media screen and (min-width: 1500px) and (max-width: 2500px) {
a.button.testing3-link {
width:250px;
height:87px;
background:url();
top:753px;
left:340px;
}
}
#media screen and (min-width: 600px) and (max-width: 1499px) {
a.button.testing3-link {
width:250px;
height:87px;
background:url();
top:0px;
left:0px;
}
}
I am trying to set 2 different width to #home-content-wrap. What I eventually want is to be able to set to home-content-wrap div 80% width if the screen size is smaller than 768px!
It is like:
1156 width:80%
<1156 width:100%
<768 width: 80%
Couple of notes:
But <768 width:80% doesn't wok!
If I remove >1156 condition then <768 works!
If you look the code carefully you ll see that <768 condition changes text color but not width...or not bg color too..
Here is my page/div style:
*{margin:0;padding:0;text-align:center;}
#wrap{width:100%;height:100%;}
#home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto;
border:1px solid blue;}
/**Responsive Columns**/
.home_lay_1_of_2 {
width: 49.5%;
margin-left:0.50%; background:lightblue;
}
.home_lay_1_of_3 {
width: 49.5%; background:grey;
}
here is breaking points:
/****breakpoint 1**/
#media only screen and (max-width: 768px) {
#home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto; color:
yellow; border:1px solid yellow;}
.home-txt{float:left; width:100%; height:500px; }
.home_lay_1_of_2 {
width: 100%;
margin-left:0;
}
.home_lay_1_of_3 {
width: 100%;
}
}
/***Breakpoint 2***/
#media only screen and (max-width: 1156px) {
#home-content-wrap{width:100%; max-width:1600px; height:auto; margin:50px auto;
border:1px solid black;}
}
here is my responsive settings:
.section {
clear: both;
padding: 0;
margin: 0;
}
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.col {
display: block;
float:left;
}
Here is the fiddle http://jsfiddle.net/GQgNx/
What's wrong here?
Change the second breakpoint media query to:
#media only screen and (min-width: 768px) and (max-width: 1156px) {
#home-content-wrap {
border: 1px solid black;
height: auto;
margin: 50px auto;
max-width: 1600px;
width: 100%;
}
}
Example: http://jsfiddle.net/GQgNx/2/
I have updated your fiddle with some cleaner code. It's just an issue of the way your media queries were setup.
Your outline should be something like this:
/** narrow code default **/
#media only screen and (min-width:768px) {
}
#media only screen and (min-width:768px) and (max-width:1156px) {
}
#media only screen and (min-width:1156px) {
}
Updated fiddle http://jsfiddle.net/GQgNx/5/
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>
My CSS isn't working on mobile portrait.
I want the main top menu to appear beneath the logo.
Here is my css at the mo:
#media screen and (max-width: 480px) {
#wrapper {
width:100%;
}
#logo {
margin-left: 100px;
}
#menu {
width:100%;
display:inline-block;
}
}
Hi now define your wraper width 100% into 480px as like this
#media screen and (max-width: 480px) {
#wrapper { width:480px; }
#logo {
margin-left: 100px;
}
#menu { width:100%;display:inline-block; }
}