I need help with using @media - appears to not be working

HTML & CSS
1

I am trying to create @media code to make my website mobile friendly by getting rid of my header image and nav bar but it’s not working and I can’t see what the problem is.

The HTML code that I am using is:

<a href="index.html"> <img src="rabbits-logo.svg" class="logo" alt="EcoBunny's bunny logo" 
       style="height: 150px; width: 170px;"></a>
<img src="new-head-3.jpg" class="hd-photo" alt="">     `

The CSS code that I am using is;

@media screen and (max-width: 600px)

{
.logo {display: none;}

.hd-photo {display: none;}
}

I’ve also tried display none for the conainer

.grid-item2 {display-none;}

What do I need to do to get @media to work?

2

Have a screen smaller than 600px?

3

Do you have the viewport meta tag in the head of your page?

1 Like
4

Hi,

yes, I am using my mobile phone:

Screenshot_20240520-132647
Screenshot_20240520-132647720×1600 187 KB

5

Hi Sam,

Yes, I have this:

 <meta name="viewport" content="width=, initial-scale=1.0">
6

Hi,

I;ve just changed ot from 600px to 800px. Still doesn’t work.

7

Try it like this:-

<meta name=viewport content="width=device-width, initial-scale=1">

You don’t have any value for width.

2 Likes
8

I’ve just tried your suggestion. It still doesn’t work.

if it helps, here is the header of my html file

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Domestic Energy Assessments</title>
    <!--This is Eric Myers reset -->
    <link rel="stylesheet" href="css-reset.css">
    <link rel="stylesheet" href="about-2.css">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Roboto&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/69241022cc.js" crossorigin="anonymous"></script>
        <meta name="robots" content="index, follow">
   
</head>

the area for the header that I want to not display in mobiles. There’s no div at the end as it closes the page’s container.

<div class="container">
  <div class="grid-container">
    <div class="grid-item1">
      <a href="index.html"> <img src="rabbits-logo.svg" alt="EcoBunny's bunny logo" class="logo"></a>
      <!-- style="height: 150px; width: 170px;"></a> 
         height:="150" width="170"> -->
      </div>
   <div class="grid-item2">
       <img src="new-head-3.jpg" alt="photo of top part of a house for ecobunny.co.uk EPC and retrofit assessments"class="hd-photo" >

here is the css code for mobiles:

@media screen and(max-width: 800px){
  
.logo {display: none;}

.hd-photo {display: none;}
  
/* I tried this as it is the div that logo is in. It didn't work*/   
.grid-item1 img {display: none;}
}
9

Tiny error, it needs a space:-

@media screen and (max-width: 800px){
}
10

Unfortunately, I still have problems.

I added the space it didn’t work.

out of desperation I changed the screen size from px to rem. That didn’t work either.
Out of frustration, I changed the rem from 50 to 5000. It worked.

I then changed the max-width to 67rem (1000px) that also worked on my laptop simulators but not on my phone. My phone is 720px (45rem).

I’ve tried cleaning out the cache, memoery etc on my phone but am still not able to get rid of the images.

mob screen print
mob screen print1895×634 93.2 KB

11

Hello, make sure your HTML is correctly structured and contains all the necessary elements. It seems you have a small code snippet, so make sure it is within a proper HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="styles.css"> <!-- Ensure this path is correct -->
	<title>Mobile Friendly Test</title>
</head>
<body>
	<a href="index.html">
		<img src="rabbits-logo.svg" class="logo" alt="EcoBunny's bunny logo" style="height: 150px; width: 170px;">
	</a>
	<img src="new-head-3.jpg" class="hd-photo" alt="">
</body>
</html>

/* styles.css */

@media screen and (max-width: 600px) {
	.logo {
		display: none;
	}

	.hd-photo {
		display: none;
	}
}

/* If you want to hide .grid-item2 as well */
@media screen and (max-width: 600px) {
	.grid-item2 {
		display: none; /* Correct syntax */
	}
}
12

I doubt your phone is 720px (css pixels). Its more likely to be half that assuming double density. My iphone is 375px css pixels but its resolution is actually double that. Mobile devices map a css pixel to one or more of their device resolution pixels in order to get the crisp displays.

You need to use the css px measurements in your media queries but of course the layout should have changed at 720px and smaller if implemented correctly.

Before you do that you need to confirm that you have added the viewport meta tag that Sam mentioned as the one you had was wrong and the media queries will not work in the same way for mobile devices.

I also notice that your site starts to break at 1112px because your big header image isn’t scaling with the page. If you add this code then it will scale up and down much better.

.grid-item2 img{
    width:100%;
    height:auto;
}

These days you need to be device agnostic and instead concentrate on when the design needs to change rather than some ‘guessed’ device size as there are hundreds and hundreds of devices around now and all at different sizes. What you need to do is open the browser on your desktop and slowly close it 1px at a time until you get down to 320px. If at any point during that process you notice that something is misaligned or a horizontal scrollbar appears on the viewport then at that point you need to add the media query and make it fit better.

With a few well chosen media queries and a responsive approach you end up catering for all known device and all unknown devices without knowing anything about them.

Lastly, I notice that on your online site you still have the old viewport meta tag in place so you haven’t yet updated the changes. If you add the code and the media query to your live site then we can see first hand where its going wrong :slight_smile:

13

Hi Jpariscoder,

I am working on a test page at the moment . When I’ve got that right I will upload it to my website. Hopefully. it will save a lot of mess and frustration!

I did have px but I noticed on some blog sites that they use rem. I’ll go back to px.
I’ll work through your advice and see how things go.

I wouldn’t call myself a programmer. I used to program in PASCAL, CoBOL and C but that was more than 30 years ago.

As I have the time and between jobs, I thought that I would have a look at HTMl and CSS as I think that it’s better than using drag and drop site builders.

14

If you want to look my practice page it’s Here

15

It’s indeed going away at 600px.

image
image581×659 83.1 KB

image
image583×548 43.9 KB

The threshold for the banner seems much too low, and you can change the logo width to something like this to keep it within the box until the 600px thresh hold is hit.

.logo {     width: 100%;
    max-width: 170px;
    aspect-ratio: auto; }

You could also move the header image to a background-image (which is more appropriate semantically), and set the size to contain and it’ll fill the space until your threshold is filled.

.grid-item2 {
background-image: url(https://ecobunny.co.uk/new-head-3.jpg);
background-size: contain;
}

This will resize the banner more effectively and size it accordingly. This will require you to change how the menu is built though as it now overlays the background, where you’ll need to place it better (using flex/grid would probably be the easiest way to do that)

A quick play gets you close. To get to this point, you’ll need to add:

  • A position:relative to the .grid-item2 class
  • A position: absolute to the .nav-bar class
  • A display: flex to the top-nav class
.grid-item2 {
background-image: url(https://ecobunny.co.uk/new-head-3.jpg);
background-size: contain;
position: relative;
}
.nav-bar {
position: absolute;
bottom: 0; /* sets it to the bottom of the grid-item2 container */
}
.top-nav {
     display: flex; /* this will allow you to get rid of all the floats too */
}

image
image847×313 76.6 KB

You’ll have to mess with the top-nav because something there is causing it to go too wide in the smaller spaces, but it gives the general idea…
image

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.