Media query working in Chrome, nothing else. What am I doing wrong?

HTML-CSS
1

I have a really simple media query that changes the simple small display, to a medium, then a large. It works fine in Chrome, but nothing else.

Here is the test document online:
http://new.texaslonghorn.com/test.html

<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Responsive Header</title>
	<style type="text/css">
.wrapper {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 1200px) 1fr;
}
.header {
    background-image: url("http://new.texaslonghorn.com/Images/header-background-1920.jpg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    text-align: center;
}	

@media only screen and (min-width: 600px) {
.homeimage {
    content: url(http://new.texaslonghorn.com/Images/header-logo-600.png);
    width: 100%;
    height: auto;
}
}
@media only screen and (min-width: 768px) {
.homeimage {
    content: url(http://new.texaslonghorn.com/Images/header-logo-1920.png);
    width: 100%;
    height: auto;
}
}		
</style>
	</head>

	<body>
    <div class="wrapper">
      <div></div>
      <div class="header"><img class="homeimage" src="http://new.texaslonghorn.com/Images/header-logo-480.png" alt="Dickinson Cattle Co" width="100%" height="auto"/></div>
      <div></div>
    </div>
</body>
</html>
3

I found this Stack Overflow post, it might be the css “content” property. I have never used it myself. For images, I usually use the “background” to add an image.

2 Likes
4

The code is supposed to change the image depending on browser size. It works as expected in Chrome. The other browsers, it doesn’t work at all. It leaves the default image in place.

1 Like
5

@jbull328 I am not against using the image as a background, the css code seems simpler for that. The problem is that I want to the box it is in to have the image fill it, no more no less and I can’t figure out how to do that with it as a background. If I specify a height and width for the div, then it won’t be responsive.

6

For div’s containing images, I will usually use a min-height and min-width property. Then there are some background-image properties and other things you can try to get it the way you want it. Here is an MDN doc about background css properties.

1 Like
7

Thanks, I will check that out.
:slight_smile:

1 Like
8

The problem is that the examples are sparse and show what I already understand. The formal syntax is totally mystifying to me.

If I put the image in as a background, I would want the div to expand to fit the photo yet be constrained the the container.

I need it to do what it is doing in Chrome across all browsers.
http://new.texaslonghorn.com/test.html

9

Content should work in Firefox. It has been supported since 1.0.

However sometimes media queries need a little more push. Try this: content: url(http://new.texaslonghorn.com/Images/header-logo-600.png) !important;

1 Like
10

Well difference is that if you set background image of a element is that image will be seen only if you have some content that doesn’t obscure it(background image) and that content, text for example, is enough to spread element to show background image … Unless you put dimensions in pixels for said element, in this case you don’t need a content in it, to show background image. Also try to clean cache from browsers and update them.

11

That doesn’t work either.

12

so it looks like the div isn’t sized correctly when I bring up the page in FF. it’s completely cut off:

image
image1164Ă—761 49.3 KB

13

Okay I found it. (I’m an email dev, so I know I’ve done this, FF is my dev browser)

FF needs Before and After so You need to do this:

@media only screen and (max-width: 600px) {
.header::before{
		content: url(http://new.texaslonghorn.com/Images/header-logo-600.png) !important;
    width: 100% !important;
    height:auto !important;
}
}

@media only screen and (min-width: 600px) {
.header::before{
		content: url(http://new.texaslonghorn.com/Images/header-logo-480.png) !important;
    width: 100% !important;
    height:auto !important;
}
}

</style>
	</head>

	<body>
    <div class="wrapper">
      <div></div>
      <div class="header"></div>

You need to play with the min and maxes to work and the widths/heights. but in Firefox, content works on divs but not img tags.

1 Like
14

No, that is the mobile fall back. It isn’t cut off. That is the default image that Firefox is not replacing. In Chrome, when you have the window small, that is the image that us supposed to be shown up to 399 px, then it should switch. It is working fine in Chrome.

15

Sorry about that, I posted the solution above for fire fox.

1 Like
17

OK, that works in the respect that it allows the images to be changed. The changed images are fixed in size and aren’t contained and scaled inside their container though. That is what I was trying to do and that I had working in Chrome. Here is my page with the ::before tag and the style applied to the div instead of the image.

I want the changing image to either scale with the page, or be able to place a wider image that is centered and is cut off on the right and left of the containing div.

Thanks for helping me with this. :slight_smile:

http://new.texaslonghorn.com/test-Tirjasdyn.html

<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Responsive Header</title>
		
	<style type="text/css">
.wrapper-lg {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 1080px) 1fr;
}
.filler-left {
    background: linear-gradient(to left, #24206f , white);
}
.filler-right {
    background: linear-gradient(to right, #24206f , white);
}
.header {
    background-image: url("http://new.texaslonghorn.com/Images/header-background-1920.jpg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    text-align: center;
}	

/* Small Devices Only */		
@media only screen and (max-width: 399px) {
.header {
    background-image: none;
}
.header-logo::before {
	content: url(http://new.texaslonghorn.com/Images/header-logo-480.png);
    width: 100%;
    height: auto;
}
}
/* Tablets and Small Desktops*/
@media only screen and (min-width: 400px) {
.header-logo::before {
	content: url(http://new.texaslonghorn.com/Images/header-logo-600.png);
    width: 100%;
    height: auto;
    text-align: center;
}
}
/* Desktops and Small Desktops*/		
@media only screen and (min-width: 600px) {
.header-logo::before {
    content: url(http://new.texaslonghorn.com/Images/header-logo-768.png);
    width: 100%;
    height: auto;
    text-align: center;
}
/* Larger Desktops*/		
@media only screen and (min-width: 900px) {
.header-logo::before {
    content: url(http://new.texaslonghorn.com/Images/header-logo-1920.png);
    width: 100%;
    height: auto;
    text-align: center;
}
}		
</style>
	</head>

	<body>
    <div class="wrapper-lg">
      <div class="filler-left"></div>
		<div class="header"><div class="header-logo"></div></div>
      <div class="filler-right"></div>
    </div>
</body>
</html>
18

So you will need to style .header div out of the media query to give it width and height.

19

Style it with what? It ignores the width=“100%” and shows it at the actual size.

I would like it to be 100% of the containing div.

I have two divs involved in the header.

header has a jpg background that dosen’t change
header-logo is an empty div filled by the content tag in the media queries.

I would like the image in header-logo to fill but not expand past the constraints of header.

20

Right now you have no constraints on the .header.

21

I don’t understand.
.header is behaving like I want it to.
.header-logo isn’t.

.header is set to fill up to 1080 on a css grid center column.

I added width: 100%, but that didn’t change anything.

I am too old to learn this stuff. Very frustrating.

22

header-logo is inside header. It inherits from header. You have no width or height on header. So header-logo can’t inherit any constraints. So when you define header-logo it assumes it has more room than it does. You need to define position, width and height on header to give layout to the box, so header-logo then bases it’s constraints off header.