when I write @media which browser I have to use because the result is different?

  • Resolved johannes999

    (@johannes999)


    1 year, 2 months ago

    hello,

    I have wrote some media queries for mobile from 200px to 300 and from 301px to 400 and from 401 to 500 .

    I have wrote this @media with testing them in inspect elements of chrome brouwser .

    now I see when I inspect elements in firefox is not the same as inspecting elements in chrome . you can try yourself on 320 px mobile with chrome and firefox. so you can see what I mean!

    the result is different on firefox but it is correct on chrome.

    which webbrowser I have to trust firefox or chrome?

    on which webbrowser I have to work and test my media queries to be sure that is Ok?

    thanks

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • George Appiah

    (@gappiah)

    1 year, 2 months ago

    All modern browser support basic media queries, and @media should work the same in all of them.

    What exactly is different? Please provide screenshots showing the different renderings, AND the specific block of CSS code that the browsers are interpreting differently.

    Thread Starter johannes999

    (@johannes999)

    1 year, 2 months ago

    thanks ,

    I send you 2 screenshots 1 is in chrome and the other is in firefox .

    https://webdesignleren.com/

    I send you also the code I changed margin-top from px tp % but it didn’t help.

    Thread Starter johannes999

    (@johannes999)

    1 year, 2 months ago

    sorry I can not upload screen shots it is asking for url.

    you can look my website home page in chrome and firefox at 220px mode.

    I changed px to % but the problem is the same this the code wich is causing problem:

    
	 .box {
border:0.01 solid #4b5054;
 background-color:#4b5054;
box-sizing:inherit;
width:100%;
height:100px;
margin-top:rem;	
}  

	



.box-item1{
display:none;
}
 
.box-item2{
display:none;

}





.box-item3{
	width:100%;
	justify-content:flex-start;	
	padding-top:9%;  	
	display:flex;
	flex-direction:column;
	float:left;
	margin-left:4%;
} 



	  

.box-item3 h4 {	
	font-size:14px;
	 font-weight:bold;
	 color:#ffd978; 

}

.box-item3 p {
	color:white;	
		font-size:12px;		
	margin-top:-1.4rem;
	line-height:1.2;
}

    as you can see by .box-item3 I put padding -top: to 9 % I was using pixels I changed to % but the problem is the same at:

    @media (min-width: 220px) and (max-width: 320px) { }

    you can go to my home page and look in chrome and firefox in 220px and you can see this tekst : Direct bellen , Tel , Mob are misvorming in firefox.

    I made screen shot but I can not upload it .

    it is asking for url . it is beter to see with your own eyes in chrome and firefox.

    thanks

    George Appiah

    (@gappiah)

    1 year, 2 months ago

    sorry I can not upload screen shots it is asking for url.

    You can upload your screenshots to https://snipboard.io/ and just paste the links here. You don’t have to use the comment’s image block.

    You reported a problem with media queries, but the CSS you gave has no media query in it.

    In any case, I took a look at your site… and it’s full of HTML errors.

    You have a big chunk of HTML divs appearing BEFORE the <body> tag, which is totally incorrect. You can’t have code between the closing </head> and opening <body> tags, and you should count yourself lucky that browsers display anything at all.

    Please fix this before anything else. The following code should ALL come somewhere between <body> … and </body>.

    <div class="slideshow-container">
    <div class="mySlides fade">

        <img src="https://webdesignleren.com/wp-content/uploads/2023/01/1920-1080.jpg" alt="Slide 1" style="width: 100%"
            height="auto" />
        <div id="container-info">
            <div class="tekst1">Vooraf prijs opgave</div>
            <div class="tekst2">BMW Specialist</div>
            <div class="tekst3">Klanten Beoordeling 9.2/10</div>
        </div>
        <div id="title-info">
            <div class="menu-title"> Menu</div>
            <div class="title"> X Auto Service</div>

            <div class="title-description"> auto repair service</div>
        </div>
    </div>

    <div class="mySlides fade">

        <img src="https://webdesignleren.com/wp-content/uploads/2023/01/1924-1080.jpg" alt="Slide 2" style="width: 100%"
            height="auto" />
        <div id="container-info">
            <div class="tekst1">Vooraf prijs opgave</div>
            <div class="tekst2">BMW specialist</div>
            <div class="tekst3">Klanten Beoordeling 9.2/10</div>
        </div>
        <div id="title-info">
            <div class="menu-title">Menu</div>
            <div class="title"> X Auto Service</div>
            <div class="title-description"> auto repair service</div>
        </div>
    </div>

    <div class="mySlides fade">

        <img src="https://webdesignleren.com/wp-content/uploads/2023/01/mini-cooper-image-for-Home-page-1920-1080.jpg"
            alt="Slide 3" style="width: 100%" height="auto" />
        <div id="container-info">
            <div class="tekst1">Vooraf prijs opgave</div>
            <div class="tekst2">BMW specialist</div>
            <div class="tekst3">Klanten Beoordeling 9.2/10</div>
        </div>
        <div id="title-info">
            <div class="menu-title">Menu</div>
            <div class="title"> X Auto Service</div>
            <div class="title-description"> auto repair service</div>
        </div>
    </div>

    <message1>
        <h1> <span>FULL</span> <span>SERVICE</span> <span>OF</span> <span>AUTO</span> <span>REPAIR</span>
            <span>And</span> <span>Maintenance</span> <span>PROFESSIONAL</span> <span>HELP</span> <span>AND</span>
            <span>DURABLE</span> <span>REPAIR</span> <span>SERVICE</span>
    </message1>
</div>

<div class=" figure" style:"text-align: center">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
</div>

<div class="box ">

    <div class=" box-item1">
        <h4>XXXAutoXXXX</h4> <br>
        <p> KLoaaaaamzp122 <br>
            3192OOxaab </p>

    </div>
    <div class=" box-item2 ">
        <h4>Openingstijden</h4> <br>
        <p> Ma t/m vrij 08:00 - 18:00 <br>
            Zaterdag 08:30 - 12:00 </p>
        <h6> Zondag Gesloten</h6>
    </div>

    <div class=" box-item3">

        <h4>Direct-Bellen </h4> <br>
        <p> Tel:0zz-4xx12xc <br>
            Mob:064xcyesdg </p>
    </div>

</div>
    Thread Starter johannes999

    (@johannes999)

    1 year, 2 months ago

    thanks,

    I use underscore_me I see in the header.php this code for body

    <body <?php body_class(); ?>>
<?php wp_body_open(); ?>

    can I remove it and replace it with <body> .

    I see in the end of footer.php </body> .tag.

    Thread Starter johannes999

    (@johannes999)

    1 year, 2 months ago

    I have uploaded 2 screenshots .

    let me know please if you have recieved .

    I have placed <body> tag in the header.php and </body> is already in footer.php.

    but the problem exists.

    I have this syntaxError under console tab :

    Uncaught SyntaxError: Unexpected token

    but I don’t think this error has to do with styling.

    Thread Starter johannes999

    (@johannes999)

    1 year, 2 months ago

    they all have media queries:

    @media (min-width: 220px) and (max-width: 320px) {
	
	* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
 html, body {
	 max-width: 100%;
    overflow-x: hidden;
	
}

     .mySlides {
        display: none;
	     
      }

      img {
        vertical-align: middle;		

		
      }
	
	.figure {
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top:-9%;
	margin-left:-4%;
	
	
}
	

      /* Slideshow container */
      .slideshow-container {  
		 width:100%;
          margin: auto;
		position:relative;
      }

  
	

      /* The dots/bullets/indicators */
      .dot {
        height: 10px;
        width: 10px;       
        background-color: green;
        border-radius: 50%;
        display: inline-block;
        transition:background 0.6s ease;
		margin:0 4px;
		 
      }
 .active {
  background-color: red;
	
} 

 
.dot.active:after {
    content: "";
       transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;
    font-size: 12px;
    line-height: 12px;
    position:absolute;
    left:5px
		
}



      /* Fading animation */
      .fade {
        animation-name: fade;
        animation-duration:6s;
      }

      @keyframes fade {
        from {
          opacity: 0.5;
        }
        to {
          opacity: 1;
        }
      }
   	

    
	
	#container-info {
	
	display:none;
	
}
	
	#title-info {
	display:flex;
	flex-direction:row;
	width:100%;
	max-width:1920px;
}


.menu-title{
	
	font-size:1rem;
	color:red;
     width:30%;
   	justify-content:flex-start;
	margin-left:0%; 
	 margin-top:-43.5%;
	float:left;
	position:relative;	
	
}
.title {	 
	 width:60%;
	font-size:1rem; 
		 color:red;
	font-family: 'Ravi Prakash', cursive;
     margin-top:-47.25%;
	position:relative;
	float:left;
      margin-left:-8%;
	}


.title-description {
	
display:none;

} 
	
	message {
		
		display:none;
	}
	
	message1{
		
		display:none;
	}
	
	

	 .box {
border:0.01 solid #4b5054;
 background-color:#4b5054;
box-sizing:inherit;
width:100%;
height:100px;
margin-top:rem;	
}  

	



.box-item1{
display:none;
}
 
.box-item2{
display:none;

}





.box-item3{
	width:100%;
	justify-content:flex-start;	
	padding-top:9%;  	
	display:flex;
	flex-direction:column;
	float:left;
	margin-left:4%;
} 



	  

.box-item3 h4 {	
	font-size:14px;
	 font-weight:bold;
	 color:#ffd978; 

}

.box-item3 p {
	color:white;	
		font-size:12px;		
	margin-top:-1.4rem;
	line-height:1.2;
}
}

    this is small example.

    Thread Starter johannes999

    (@johannes999)

    1 year, 2 months ago

    I have tried every possible thing .

    I see in other sections no problem

    I think it is coming from html code :

    this code is causing the problem :

    	<div class="box ">
		
			
<div class=" box-item1">
<h4>XXXAutoXXXX</h4> <br>
<p>	KLoaaaaamzp122 <br>
	3192OOxaab </p>

</div>
<div class=" box-item2 ">
<h4>Openingstijden</h4> <br>
<p>	Ma t/m vrij 08:00 - 18:00 <br>
	Zaterdag 08:30 - 12:00 </p>
<h6> Zondag Gesloten</h6>
</div>

		<div class=" box-item3">

     <h3>
		 
		 Direct-Bellen </h3>   <br>
<p>  Tel:0zz-4xx12xc  <br>
	Mob:064xcyesdg </p> 
		
		</div>

    and the theme start doing strange . I am going to download new theme and paste everything on it and try to correct the box class which is causing problem.

    I let you know tomorrow thanks for your advice.

    johannes

    Thread Starter johannes999

    (@johannes999)

    1 year, 2 months ago

    thanks to you I started thinking and solved the problem.

    the fault was not in html it was in CSS .

    the wrong code was:

    	 .box {
border:0.01 solid #4b5054;
 background-color:#4b5054;
box-sizing:inherit;
width:100%;
height:100px;
margin-top:0rem;	
}  

	



.box-item1{
display:none;
}
 
.box-item2{
display:none;

}





.box-item3{
	width:100%;
	justify-content:flex-start;	
	padding-top:26px;  	
	float:left;
	margin-left:4%;
display:flex;
flex-direction:column;

} 



	  

.box-item3 h4 {	
	font-size:14px;
	 font-weight:bold;
	 color:#ffd978; 
	
}

.box-item3 p {
	color:white;	
		font-size:12px;		
	margin-top:-1.75rem;
	line-height:1.2;
}

    the right one is this :

    
	 .box {
border:0.01 solid #4b5054;
 background-color:#4b5054;
box-sizing:inherit;
width:100%;
height:100px;
margin-top:0rem;	
display:flex;
flex-direction:column;
}

    display:flex and flex-direction

    has to be in box class and not in box-item3 class .

    this was the problem . now it is working.

    thanks again

    johannes

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘when I write @media which browser I have to use because the result is different?’ is closed to new replies.