Skip to main content
uxk
uxk
Known Participant
December 1, 2016
Answered

Mobile View Issue (Chrome and Firefox)

  • December 1, 2016
  • 4 replies
  • 790 views

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

This topic is closed to new replies. Start a new post to keep the conversation going.
Correct answer Jon Fritz

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.

4 replies

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
December 1, 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.

uxk
uxkAuthor
Known Participant
December 1, 2016

Hi,

I would be happy to share the code here:

<!doctype html>

<html>

<head>

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

<title>myTitle</title>

<link href="myStyle.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div id="Container"><span><strong>City</strong></span><br>

  <li> <a href="home.html">Home</a></li>

  <li> <a href="#">Menu2</a></li>

  <li> <a href="#">Menu3</a></li>

  <li> <a href="#">Menu4</a></li>

</div>

<div id="picContainer">

<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%;

}

}

Jon Fritz
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
December 1, 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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices