I want to shift a jquery banner with margin-top: 81px, only for small screens , the medium and extra small screens are looking great.
My media query is:
#media screen and (min-width:780px and max-width:980px) {
.abr {
margin: 81px 0px 10px -16px;
}
}
but is not working for me please help me out of this...
min-width and max-width are seperate queries, so they need to be made seperate with parenthesis:
#media screen and (min-width:780px) and (max-width:980px) { .. }
Related
Look at this page
There are 3 images on the right. When I look at my site with a mobile device, those 3 images stay there instead of centering in the middle, and so they make the page overflow/have a left-right scroll.
Any ideas on how I can fix it so that the images get centered when the page is viewed on mobile?
Thank you
Use a CSS media Query
The code used in the example you gave is
#media (max-width: 600px)
.about-us-images {
width: 100% !important;
}
The #media (max-width: 600px) part is telling the page to only apply those styles when a page width is 600px or less.
Adjust it to Your Preferences
You can adjust that to any size you wish or use the reverse to style any page that is 600px or wider using: #media (min-width: 600px).
Try this—
#media (max-width:600px) {
.about-us-text,
.about-us-images { width:100% }
}
Just add a class to the images div, and change the breakpoint as you wish. Looks like this now—
Here is what I had to do.
#media (max-width:600px) {
.about-us-text {
float: none !important;
width:100% !important;
}
}
#media (max-width:600px) {
.about-us-images {
width: 100% !important;
}
}
That did it.
Alright, so, I'm hoping this is an easy question, but I can't for the life of me get it working.
The situation:
I've made some changes in the Additional CSS portion of the customize feature on my Wordpress theme.
I've taught myself a few things, and I was able to edit the margins and whatnot of the footer widgets.
They look great on desktop, not so much on mobile.
From research, I've found that you can call out #media criteria, theoretically making two sets of margin settings: one for a max screen size you set for mobile, and one for desktop.
Here's what I've been able to come up with:
#text-5 .widget-title{
margin:0px 0px 10px 0px}
#text-6 .widget-title{
margin:0px 0px 10px 0px}
#text-7 .widget-title{
margin:0px 0px 10px 0px}
#custom_html-2 .widget-title{
margin:0px 0px 10px 0px}
#text-7 .footer-row-2-widget.widget.widget_text{
width: 100px;}
#text-7 {
width: 200px;
margin:-10px 0px 5px -10px}
#text-5 {
width: 200px;
margin:-10px 0px 5px 0px}
#text-6 {
width: 300px;
margin:-10px 0px 5px -50px}
#custom_html-2 {
width: 350px;
margin:-10px 0px 5px -50px}
This seems to be working so far. (I know negative pixels is not ideal, but I can't figure out how to otherwise move the columns to where I want them.)
So, how do I call out #media in the Additional CSS? Nothing I'm finding is helping to show what needs to be done for the Additional CSS box itself, but rather for the editor files, which I don't want to touch (aka break).
Thank you!
The site in question: http://q6q.118.myftpupload.com/
You need to add the media queries to you css file. Basically they are organized for breakpoints in pixels depending of the screen size, which will apply the rules it has inside.
Here are some of the most common breakpoints (you can make your own to support as many options as your want). I hope that helps.
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I'm trying to figure out how to remove the image if the browser height is larger than 1080 pixels. For example android devices would have more than 1080 when the page loads and my image is loaded and it goes down to about 2/3 of the page and the rest of it is blank. I would rather it be gone entirely. How can I get rid of it. Here is how I am setting it:
body {
font-family: Helvetica;
font-size: 1.8rem;
background-color: #000;
margin: 0 auto;
background-image: url("../images/myimage.jpg");
background-repeat:no-repeat;
background-position:center top;
background-position:no-repeat;
background-attachment:fixed;
}
what I tried
#media screen and (min-height: 1080px) {
body {
background-image: none;
}
}
#media device and (orientation: portrait) and (min-height: 1080px) {
body {
background-image: none;
}
}
Try a media query!
/* standard*/
#media screen and (min-height: 1080px) {
body {
background-image: none;
}
}
/* orientation */
#media device and (orientation: portrait) and (min-height: 1080px) {
body {
background-image: none;
}
}
You will want to use a media query here, but you want to focus on max-height (not width... which is what media queries typically focus on, eg, http://unmatchedstyle.com/news/height-based-media-queries.php)
#media screen and ( min-height: 1080px ){
body { background-image: none; }
}
You should probably spend a bit of time learning about mobile responsive design in general, specifically because the media queries can come in handy with problems like yours. This is a very good place to start reading about them: http://alistapart.com/article/responsive-web-design/
Also note that certain JS plugins (eg Backstretch for example) stretch your image to whatever the background size happens to be... that might be another thing to look into, if you are interested.
Give the element containing the background image an id attribute then use that id attribute to assign the style to the background using an if statement with JavaScript.
<script>
var element = document.getElementById("elementHoldingTheBackground");
if (1080 < window.innerHeight ) { // returns a number
element.style.display="none"; // hides the element with CSS
}
</script>
That's the most simple way from the top of my head but I'm sure there are better ways to do it!
I'm also no expert. Please don't cook me over this. I'm only 18. I'm new to this!
Please tell me what you think.
I'm designing a responsive website and after change my cellphone orientation from portrait to landscape and then to portrait the CSS stop working.
Initially the css that I apply to the the 320-480 resolution loads very well in my portrait screen and also in the landscape but when I change it back to portrait the css stop working, is like is not loading the css.
What's the problem????
When using css media queries it is unnecessary to assign a min width, you can use simply max width and have multiple queries if you want the layout to change at a different point. I can't explain why your css works initially but then changes when you turn the screen a couple times but here is some good css media query practice and syntax that could solve your problem:
#media only screen and (max-width: 320px){
/*Some css styling for widths below 320 pixels*/
}
#media only screen and (max-width: 480px){
/*Some css styling for widths below 480 pixels.
Keep in mind that this css will only be applied for viewports between 320
pixels and 480 pixels*/
}
It is not necessary to use device-width when you can simply use width. Also the 'only screen and()' is good practice for detecting mobile viewport widths in css. I hope that this helps and your problem is solved.
The css
#media all and (min-device-width: 320px) and (max-device-width: 480px){
#reviews{
display: none !important;
}
.footer {
border: 1px solid #CCCCCC !important;
}
ul,ol{
margin-left: 0px!important;
}
.bottom-menu ul{
margin-left: 25px !important;
}
#side-quote{
display: none;
}
#export-dption{
float: bottom;
}
#export-request{
float: top;
}
.panoramic-pic{
padding: 0px !important;
}
#googleMap{
display: none;
}
.quote-index{
width: 100% !important;
background: red !important;
}
}
and the cellphone is a LG Optimus F3 and the browser is chrome.
as you can see in the selector .quote-index is set the background to red, initially it loads in red when the phone is in portrait mode but when i change it to landscape an then back to portrait is like that selector doens't exits.
I have copied some media query code from elsewhere which works absolutely fine, but when incorporating into my own project, it doesn't seem to work.
I've looked at previous stackoverflow questions, and tried implementing the fixes or tests such as,
checking whether the media query is working by applying an unwanted background color, which fails. I've also made sure to add the viewport metatag.
Here is my media query
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
body { margin: 5px; width: 5px; }
.testimonial {
background-color: black;
}
}
The live page can be seen here (click on testimonials, and then click on a picture): http://krmmalik.com/me/
update: Just spoke to a colleague and he seems to think that the reason the media queries are not working is because the testimonials content is being loaded in an iframe at which point the media detection doesn't take place?
I tried this and it work perfectly.
why would you set the body width to 5px, if the max-width should be 479px?
#media screen and (max-width: 479px){
body {
margin: 5px;
}
.testimonial {
background-color: #000;
}
}