Mobile View Issue (Chrome and Firefox)

Report · Dec 01, 2016

When I view the web page in mobile size using Safari, the text appears on the background image; however, in Chrome and Firefox, the title does not appear. Why?

Here is a link (zipped folder) that I have uploaded at http://www.filetolink.com/b041e031b3

It contains an index.html file, and a myStyle.css

Do we need to use -moz along with the media Query?

Please advise

Thanks

Report · Dec 01, 2016

Do you have a link to your site on your server?

I'm not saying I don't trust your .zip file, but I don't trust any random internet .zip file.

If you can't upload your pages to a location on your remote server (even a test location you can delete once the issue is found), a better way to show us the code would be to simply copy and paste it into a forum response, just don't use email, the code won't come through.

A missing -moz- prefix is pretty unlikely to be the problem.

Have you checked your code for errors with the validator yet?

Go to http://validator.w3.org/nu or to File > Validate > Validate Current Document (W3C) in DW to get a listing of your code errors. Fixing issues in your html can clear up a ton of display problems pretty quickly, especially the "random browser doesn't work" style issues.

Report · Dec 01, 2016

Hi,

I would be happy to share the code here:

<!doctype html>

<html>

<head>

<title>myTitle</title>

</head>

<body>

</div>

<h1 class="titleM">The marvellous City</h1>

</div>

</body>

</html>

--------------------------

@charset "UTF-8";

/* CSS Document */

body{

width: 100%;

background-color:#9C4E10;

}

#Container{

width: 100%;

font-size:36px;

color: #FFFFFF;

font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;

text-align:center;

}

#containerMobile{

display:none;

}

li{

display: inline;

font-size:20px;

}

a{

margin-left: 5%;

margin-right: 5%;

align-content:center;

font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;

color:#FFFFFF;

text-decoration:none;

}

a:hover{

color: #153A09;

transition: ease-in-out .3s;

-webkit-transition: ease-in-out .3s;

-moz-transition: ease-in-out .3s;

-o-transition: ease-in-out .3s;

-ms-transition: ease-in-out .3s;

}

#picContainer{

background-image:url(photo1.jpg);

width: 95%;

height: 500px;

margin:auto;

margin-top: 3%;

border-top-color:#153A09;

border-top-style: solid;

border-bottom-color:#153A09;

border-bottom-style: solid;

z-index: -1;

}

.titleM{

display:none;

}

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

#Container{

display:none;

}

#textInside{

display:none;

}

#picContainer{

background-image: url(photo1.jpg);

height:200px;

width:80%;

z-index:100;

}

#picContainer h1.titleM{

display:compact;

/*margin-left:5%;

margin-top: 15%;*/

position:relative;

top:25%;

left:10%;

font-size:36px;

color:#C7D63F;

z-index:500;

}

.mobileNav{

float:left;

font-size:18px;

border-left-color:#CCDC3C;

border-left-style: solid;

padding-left:2%;

padding-right:2%;

display:inline;

margin-left:2%;

}

Report · Dec 01, 2016

What is "display:compact"?

As far as I know, that isn't a valid option for the display property. My guess would be the use of that value is causing certain browsers to default to "block" and others to go with "none" when they run into it.

Changing "compact" to "block" makes the text appear in my browsers.

Report · Dec 01, 2016

Thank you for the prompt response. That was actually the root of the issue. It works now!

Mobile View Issue (Chrome and Firefox)

1 Correct answer