Solved

css @media doesnt work as needed

Posted on 2014-07-20
3
228 Views
Last Modified: 2014-07-20
.slider-container{
	 height:760px;
	 background-image:url(../imgs/slider.jpg); 
	 position:relative;
}

@media (min-width: 1629px) {
	.slider-container{
	height:100px;
	background-image:none;
	background-color: #ff0000;
	position:relative;
	}
}

Open in new window



Im using this css to change the div content on smaller screens (from an image to a solid bg color)
The website always looks the same on both the mac and the iphone.

If I go above min-width: 1300px I get the red solid background color anything below that displays the image.
The issue is the same thing happens on all size devices just the same...
0
Comment
Question by:zahimezher
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 29

Accepted Solution

by:
chilternPC earned 500 total points
ID: 40207376
I would put the word screen after media.
also try a max-width instead of a min-width .

and try this version....


.slider-container{
       height:760px;
       background-image:url(../imgs/slider.jpg);
       position:relative;
}

@media  screen and (max-device-width: 800px)

 {
      
      .slider-container{
      height:100px;
      background-image:none;
      background-color: #ff0000;
      position:relative;
      }
}
0
 
LVL 58

Expert Comment

by:Gary
ID: 40207403
Are you sure you don't have any other css in there.
Can you link to the page or make a test page at jsfiddle.net
0
 
LVL 1

Author Closing Comment

by:zahimezher
ID: 40207412
Brilliant! :D Thank you so much.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question