7 Replies - 757 Views - Last Post: 20 March 2015 - 08:35 AM

#1 still2blue   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 02-February 15

Display issue in mobile view

Posted 25 February 2015 - 02:18 PM

Hey guys, I am having an issue with my site when viewed at lower resolutions.

The page collapses fine when the browser is resized, however there are two little white boxes that appear. Anyone understand what is going on here?

HTML:
<link rel="stylesheet" href="project.css" media="screen">
<!--[if 1t IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>

<body>
<div id='heading'>
            <h1>Disc Golf Daily - Multimedia</h1>
        </div>
		<div id='nav'>
		 <nav>
			<ul>	
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
				<li><a href="rules.html">Rules</a></li>
				<li><a href="disctypes.html">Types of Discs</a></li> 
			</ul>	
	     </nav>
		</div>
        <div id='container'>
            <div id='left'>
                <img class="displayed" src="images/leftlogo.png" alt="Disc Golf" width="75" height="75">
				<h4>Fun Starts Here</h4>
				<p>Learn all about the game of disc golf Disc Golf here!</p>
            </div>
            <div id='content'>
                <img class="displayed" src="images/contentpic.jpg" alt="Throwing a Disc" width="700" height="175">
				<h4>Welcome to the multimedia section!</h4>
					<p>Here you will be able to view some videos relating to the game of disc golf!</p>
					<p>The following is a short video demonstrating putting techniques:</p>
					<div class="video"><iframe width="420" height="315" src="https://www.youtube.com/embed/4spUSMi6xm0" frameborder="0" allowfullscreen></iframe></div>
		    </div>
        </div>
        <div id='footer'>
           <nav>
			<ul>	
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
				<li><a href="rules.html">Rules</a></li>
				<li><a href="disctypes.html">Types of Discs</a></li> 
			</ul>	
	       </nav>
           <p>Site created by Matthew Short // Last Updated 12/8/2014</p>		   
           
        </div>

</div>	
</body>
</html>



CSS:

/*
	
	File Name: project.css
	
*/

body  {  background-color: #515757;
		color: #002800;
		font-family: Verdana, Arial, sans-serif;  }

.style {
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
	padding:0px;
	width: 500px;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	border-bottom-left-radius:0px;	
	border-bottom-right-radius:0px;
	border-top-right-radius:0px;	
	border-top-left-radius:0px; }

.style table {
    border-collapse: collapse;
    border-spacing: 0;
	width: 100%;
	height: 100%;
	margin:0px;padding:0px; }
	
.style a {
	text-decoration: none; }
	

.style a:link {
	color: #8C1717; }
	
.style a:hover {
	color: #867970;
	text-decoration: underline; }

.style tr:last-child td:last-child {
	border-bottom-right-radius:0px; }

.style table tr:first-child td:first-child {
	border-top-left-radius:0px; }

.style table tr:first-child td:last-child {
	border-top-right-radius:0px; }

.style tr:last-child td:first-child {
	border-bottom-left-radius:0px; }

.style tr:hover td {
	background-color:#ffffff; }
		
.style td {
	vertical-align:middle;
	background-color:#e5e5e5;
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:10px;
	font-family:Arial;
	font-weight:normal;
	color:#3D5A24; }

.style tr:last-child td {
	border-width:0px 1px 0px 0px; }

.style tr td:last-child {
	border-width:0px 0px 1px 0px; }
	
.style tr:last-child td:last-child {
	border-width:0px 0px 0px 0px;
	text-align: center; }

.style tr:first-child td {
	background-color:#4c4c4c;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#FFFFFF; }

.style tr:first-child:hover td {
	background-color:#4c4c4c; }

.style tr:first-child td:first-child {
	border-width:0px 0px 1px 0px; }

.style tr:first-child td:last-child {
	border-width:0px 0px 1px 1px; }
     
nav  { font-weight: bold;
	  text-align: center;
	  padding-top: 5px;
      padding-bottom: 5px;	  }
	  
	  
nav ul { list-style-type: none;
       margin: 0;
 	   padding: 0; }

nav li { display: inline; }

nav a { text-decoration: none;
       padding-right: 100px;
	   padding-left: 30px;
	   display: inline-block; }
	   
nav a:link { color: #758B5A; }
nav a:visited { color: #758B5A; }
nav a:hover { color: #FFFFFF; }

div .video {  width: 420px;
 height: 315px;
 margin: 0 auto; }

h1 { background-color: #FFFFFF; 
    opacity: 0.5;      
    font-size: 3em; 
    padding: 10px; 
	padding-top: 5px;
	padding-bottom: 5px;}
h4 { color: #003200;
    text-align: center; }

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;	}
	
div#heading { background-image: url(images/banner.jpg);
             background-repeat: no-repeat;
			 position: relative;
			 height: 150px;
			 text-align:center;
			 border: 1px solid black;
             max-width: 1000px; }
div#container,
div#footer {
    border: 1px solid black;
    max-width: 1000px; }

div#nav {
    position: relative;
    margin: auto auto;
	border-right: 1px solid black;
	border-left: 1px solid black;
    max-width: 1000px;
	background: #ccc; }

div#container {
    position: relative;
    margin: 0px auto;
	background: #ccc; }

div#heading {
    margin: 30px auto -1px auto; }

div#heading h1 {
    margin: 5px; }

div#left {
    float:left;
    width: 200px;
    padding: 5px;
    margin: 0px auto 0px auto;
	text-align: center; }

div#content {
    margin-left: 210px;
    background: white;
    border: 0px solid black;
    padding: 10px; }
	
div#footer {
    margin: auto auto 10px auto;
	clear: both;
	text-align:center;
    background: #ccc;	}
	

div#footer p {
    margin: 5px;
	color: #000000;
	font-size: x-small; }

@media only screen and (max-width: 480px) {
	h1 { font-size: 100%; }
	p {font-size: 90%; }
	div#left img { display: none; }
	div#left { display: none; }
	#content { width: 100%; }
	div#content img {display: none; }
	div#content { width: 100%; display: inline; }   
	table { width: auto; }
	#footer { clear: both; }
	#footer nav{ display: none; }
	nav, nav ul, nav li {padding: 0; }
	nav li { display: inline; }
	nav a { display: block; padding: 0.5em 0;
			border-bottom: 2px solid #000000; }



Is This A Good Question/Topic? 0
  • +

Replies To: Display issue in mobile view

#2 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6551
  • View blog
  • Posts: 26,559
  • Joined: 12-December 12

Re: Display issue in mobile view

Posted 25 February 2015 - 03:33 PM

A clue is in the only element that has a white background :whistling:
div#content {
    margin-left: 210px;
    background: white;
    border: 0px solid black;
    padding: 10px; }

(You may have guessed this already but you don't say so in your post.)

You change a couple of properties for this but it still has a top and bottom padding to display the white area. You can discover things like this if you use your browser's developer tools. Knowledge of these is essential and there are links for the various browsers in my signature below.

You can set the padding to 0 but you can also change the background-color to transparent.

This post has been edited by andrewsw: 25 February 2015 - 03:31 PM

Was This Post Helpful? 1
  • +
  • -

#3 still2blue   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 02-February 15

Re: Display issue in mobile view

Posted 25 February 2015 - 03:37 PM

You are exactly right sir! Wow I feel so dumb, I had tried the
display:none;
but it was completely removing my content. Changing the padding to 0 fixed my issue!

Thank you so much

This leads me to another question. The site displays fine however now when completely minimized I still have scroll due to the video.

I know I could create something in the css that would display the video in smaller dimensions, but is there any way to make the video scalable when using those small resolutions?
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6551
  • View blog
  • Posts: 26,559
  • Joined: 12-December 12

Re: Display issue in mobile view

Posted 25 February 2015 - 03:45 PM

You can set the iframe width and height in CSS and then change it in the media rules. The video still works but it looks like it will only scale horizontally.

(I don't work with videos myself.)
Was This Post Helpful? 1
  • +
  • -

#5 still2blue   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 02-February 15

Re: Display issue in mobile view

Posted 25 February 2015 - 03:47 PM

If I didn't have to include one for this class I probably never would myself.

So I will need to actually set the height and width in css and media? There is no way to have the video resize automatically?

Thanks once again for your help andrew!
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6551
  • View blog
  • Posts: 26,559
  • Joined: 12-December 12

Re: Display issue in mobile view

Posted 25 February 2015 - 03:52 PM

I haven't tried but I believe that you can leave the width and height attributes on the iframe and change them in the media rules. It is just a preference for me to use CSS (if appropriate) if I will be changing the values in CSS.

I suppose you could try using a percentage on the width. (Again, I'm not a video person ;) )
Was This Post Helpful? 1
  • +
  • -

#7 still2blue   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 02-February 15

Re: Display issue in mobile view

Posted 25 February 2015 - 07:27 PM

That you may not be but you are definitely an asset to this community! Thanks once again for all your help, I'll give that a try and see what happens.
Was This Post Helpful? 0
  • +
  • -

#8 prasanthquadra   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 36
  • Joined: 10-March 15

Re: Display issue in mobile view

Posted 20 March 2015 - 08:35 AM

hi, the responsive coding mobile view are width only % not in px,then height not mentioned in css code,auto height you will give in responsive mobile friendly are working.refer in bootstrap coding.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1