Solved

css @media doesnt work as needed

Posted on 2014-07-20
3
214 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
3 Comments
 
LVL 28

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML and CSS for a complex page 20 61
convert publisher file to an outlook email template 8 39
Form Submit falis 6 26
A simple Float not working. 5 5
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now