1. Home
  2. Forums Index
  3. Browser Side / Mobile Web Site Design and Development 1:21 am May 21, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Mobile Page Format

         

captainron19

9:53 pm on Feb 11, 2016 (gmt 0)

10+ Year Member



Was wondering if someone can give me some insight on a test page I am working on.

Looks fine in browsers (IE and Firefox) but does not look ok on a mobile device. (Things moved around) Any input would be appreciated

[edited by: not2easy at 10:54 pm (utc) on Feb 11, 2016]
[edit reason] TOS Compliance [/edit]

not2easy

10:57 pm on Feb 11, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Can you please share the test page code with us? Any css would also be a help.

captainron19

11:19 pm on Feb 11, 2016 (gmt 0)

10+ Year Member



Sorry it looks like the link was removed because of TOS Violation. Here is the code for the one test page 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>

<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

<meta
http-equiv="Content-Language"
content="en"
/>

<meta
name="viewport"
content="width=device-width; height=device-height; initial-scale=1.0"
/>

<meta
name="description"
content="Providing high quality professional fire service promotional exam preparation in the NJ area."
/>

<meta
name="keywords"
content="ignite, promotional, coaching, fire, department, promotion, exam, prep, battalion, chief, captain, lieutenant, firefighter, nj, new jersey, "
/>

<link
type="text/css"
rel="stylesheet"
href="css/style.css"
media="screen,projection,tv"
/>

<title>Ignite Promotional Coaching</title>
</head>
<body>
<div class="header">
<div>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Seminars</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Contact</a></li>
</ul>

<img src="images/main_image.png" alt="">
</div>
</div>
<div class="body home">
<div>
<div class="section">
<div>
<h3><a href="testimonials.php">Testimonials</a></h3>
<ul>
<li><p>See what some of our clients are saying</p></li>
<li><p>Here we can list 1 or 2 testimonials linking to main testimonial page so visitors can read them all</p></li>
<li><p>Possible second testimonial listed here</p></li>
</ul>

</div>
<div>

<h3><a href="seminars.php">Seminars</a></h3>
<ul>
<li>
<a href="seminars.php"><img src="images/chief.jpg" alt="Chief Officers"></a>
<h4><span>Chief Officers</span></h4>
</li>
<li>
<a href="seminars.php"><img src="images/captain.jpg" alt="Captains"></a>
<h4><span>Captains</span></h4>
</li>
<li>
<a href="seminars.php"><img src="images/lieutenant.jpg" alt="Lieutenants"></a>
<h4><span>Lieutenants</span></h4>
</li>
</ul>
</div>
<div class="last">
<h3><a href="">Menu</a></h3>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Seminars</a>
</li>
<li>
<a href="#">Testimonials</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="connect">
<a href="http://facebook.com" id="facebook">facebook</a>
</div>
<p>
&#169; Copyright Ignite Promotional Coaching All rights reserved.
</p>
</div>
</body>
</html>

captainron19

11:20 pm on Feb 11, 2016 (gmt 0)

10+ Year Member



And here is the css 
body {
background:url(../images/bg-body.jpg);
margin:0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p a {
outline:none;
}
p a:hover {
color:#cecccc;
}
/*------------------------- Header ------------------------*/
.header {
background:url(../images/bg-header1.png) repeat-x 0 0;
overflow:hidden;
min-height: 199px;
}
.header div {
background:url(../images/bg-header2.png) no-repeat center 0;
margin:0 auto;
width:960px;
min-height:199px;
}
.header div ul {
list-style:none;
margin:0 0 0 150px;
overflow:hidden;
padding:2px 0 0;
width:685px;
}
.header div ul li:first-child {
margin:0;
}
.header div ul li {
float:left;
height:59px;
margin:0 0 0 0px;
text-align:center;
width:125px;
}
.header div ul li.selected {
background:url(../images/bg-selected-menu.png) no-repeat;
}
.header div ul li.selected a, .header div ul li a:hover {
color:#fff;
text-shadow:-1px -1px 1px #5B5B5B, 1px 1px 1px #5B5B5B, 1px -1px 1px #5B5B5B, -1px 1px 1px #5B5B5B;
}
.header div ul li a {
color:#F0BA5A;
display:block;
font-size:14px;
line-height:45px;
outline:medium none;
text-decoration:none;
text-transform:uppercase;
}
.header div a#logo {
display:block;
margin:25px auto 0;
width:760px;
}
.header div a.logo {
display:block;
margin:25px auto 46px;
width:760px;
}
.header div > img {
display:block;
height:565px;
position:absolute;
top:188px;
}
.header div a#logo img, .header div a.logo img {
border:0;
display:block;
height:auto;
position:static;
}
/*------------------------- Body ------------------------*/
.body {
background:url(../images/bg-content.png);
}
.body.home {
margin:268px 0 0;
}
.body div {
background:url(../images/border-content.png) repeat-x 0 0;
}
.body div div {
background:none;
margin:0 auto;
width:960px;
}
.body div div.section {
background:none;
overflow:hidden;
padding:287px 0 138px;
}
.body div div.section div:first-child {
margin:0;
padding-left:10px;
text-align:center;
width:auto;
}
.body div div.section div:first-child h3 {
width:210px;
}
.body div div.section div:first-child ul {
list-style:none;
margin:0;
overflow:hidden;
padding:0;
width:210px;
}
.body div div.section div:first-child ul li {
background:url(../images/separator.png) repeat-x left top;
margin:0;
padding:12px 0 16px;
width:210px;
}
.body div div.section div:first-child ul li p {
color:#F0BA5A;
font-size:14px;
line-height:24px;
margin:0;
letter-spacing:0.05em;
}
.body div div.section div:first-child ul li span {
color:#F0BA5A;
display:block;
font-size:12px;
padding-top:5px;
}
.body div div.section div h3 {
font-size:30px;
font-weight:400;
margin:0 0 18px;
text-align:center;
text-transform:uppercase;
}
.body div div.section div {
float:left;
margin-left:30px;
width:490px;
}
.body div div.section div h3 a {
color:#fff;
text-decoration:none;
text-shadow:-2px -2px 2px #5B5B5B, 2px 2px 2px #5B5B5B, 2px -2px 2px #5B5B5B, -2px 2px 2px #5B5B5B;
letter-spacing:0.075em;
}
.body div div.section div ul {
list-style:none;
margin:0;
overflow:hidden;
padding:5px 0 0;
}
.body div div.section div ul li {
float:left;
margin-left:20px;
width:150px;
}
.body div div.section div ul li a img {
border:0;
display:block;
}
.body div div.section div ul li h4 {
font-weight:400;
line-height:24px;
margin:10px 0 0;
text-align:center;
text-transform:uppercase;
}
.body div div.section div ul li h4 span {
color:#F0BA5A;
text-decoration:none;
font-size:14px;
}
.body div div.section div.last {
margin-left:10px;
width:210px;
}
.body div div.section div.last h3 {
margin-left:30px;
}
.body div div.section div.last ul li {
background:url(../images/separator.png) repeat-x left top;
line-height:24px;
margin:0 0 0 20px;
padding:10px 0 13px;
text-align:center;
width:200px;
}
.body div div.section div.last ul li a {
color:#F0BA5A;
font-size:14px;
text-decoration:none;
text-transform:uppercase;
line-height:24px;
letter-spacing:0.075em;
}
.body div div.events {
min-height:1001px;
}
.body div div.events ul {
list-style:none outside none;
margin:0 0 36px;
overflow:hidden;
padding:52px 10px 0;
width:940px;
}
.body div div.events ul li {
float:left;
margin:0 0 0 35px;
width:290px;
}
.body div div.events ul li h3 {
text-align:center;
color:#F0BA5A;
font-size:20px;
text-transform:uppercase;
font-weight:normal;
font-size:20px;
line-height:30px;
margin:0 0 18px;
letter-spacing:0.05em;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.body div div.events ul li p {
color:#F0BA5A;
font-size:14px;
line-height:24px;
margin:22px 0 0;
text-align:justify;
padding: 0;
}
.body div div.events p {
color:#F0BA5A;
font-size:14px;
line-height:24px;
margin:0;
padding: 0 10px;
}
.body div div.games {
min-height:1001px;
padding:0 10px;
width:940px;
}
.body div div.games p:first-child {
margin:0;
padding:49px 0 0;
}
.body div div.games h4 {
color:#F0BA5A;
font-size:20px;
margin:8px 0 0;
line-height:30px;
letter-spacing:0.05em;
text-transform:uppercase;
}
.body div div.games p {
color:#F0BA5A;
font-size:14px;
line-height:30px;
margin:2px 0 0;
text-align:justify;
letter-spacing:0.05em
}
.body div div.menu ul {
list-style:none;
margin:0 auto 24px;
overflow:hidden;
padding:0 35px;
width:890px;
}
.body div div.menu {
min-height:1001px;
}
.body div div.menu ul li {
float:left;
margin:0 0 0 70px;
text-align:center;
width:250px;
}
.body div div.menu ul li h3 {
color:#F0BA5A;
font-size:20px;
margin:51px 0 25px;
text-transform:uppercase;
line-height:30px;
letter-spacing:0.05em;
}
.body div div.menu ul ul {
padding:0;
width:250px;
}
.body div div.menu ul ul li:first-child {
background:none;
padding:0 0 14px;
}
.body div div.menu ul ul li {
background:url(../images/border.png) repeat-x left top;
margin:0;
padding:0 0 9px;
width:300px;
}
.body div div.menu ul ul li p {
color:#F0BA5A;
float:left;
font-size:14px;
line-height:24px;
margin:10px 0 0;
padding:0;
letter-spacing:0.05em;
width:auto;
float:left;
}
.body div div.menu ul ul li span {
color:#F0BA5A;
display:block;
font-size:14px;
line-height:24px;
margin:10px 0 0 30px;
float:left;
}
.body div div.menu ul ul li:first-child span {
margin:0 0 0 30px!important;
}
.body div div.menu p {
color:#F0BA5A;
font-size:14px;
line-height:24px;
margin:0;
padding:0 35px 138px;
width:890px;
letter-spacing:0.05em;
}
.body div div.about {
min-height:951px;
padding: 50px 10px 0;
width:940px;
}
.body div div.about h4 {
color:#F0BA5A;
font-size:20px;
margin:0;
line-height:30px;
letter-spacing:0.075em;
text-transform:uppercase;
}
.body div div.about h5 {
color:#F0BA5A;
font-size:14px;
line-height:30px;
letter-spacing:0.075em;
text-transform:uppercase;
margin:0;
}
.body div div.about p {
color:#F0BA5A;
font-size:14px;
line-height:30px;
margin:2px 0 58px;
letter-spacing:0.075em;
text-align: justify;
}
.body div div.blog {
overflow:hidden;
min-height:951px;
padding:50px 10px 0;
width:940px;
}
.body div div.blog div:first-child {
margin:0;
width:705px;
float:left;
}
.body div div.blog div:first-child h4 {
color:#F0BA5A;
font-size:20px;
margin:0 0 32px;
text-transform:uppercase;
line-height:30px;
letter-spacing:0.075em;
font-weight:bold;
}
.body div div.blog div:first-child p {
color:#F0BA5A;
font-size:14px;
line-height:30px;
margin:0 0 30px;
padding:0;
letter-spacing:0.075em;
text-align:justify;
}
.body div div.blog div {
float:right;
width:190px;
}
.body div div.blog div div:first-child {
margin:63px 0 33px;
width:230px;
}
.body div div.blog div div {
float:none;
margin:0;
width:230px;
}
.body div div.blog div div h3 {
color:#F0BA5A;
font-size:14px;
margin:0;
line-height:30px;
letter-spacing:0.075em;
text-transform:uppercase;
}
.body div div.blog div div ul {
color:#F0BA5A;
list-style:disc;
margin:0;
padding:6px 0 0;
}
.body div div.blog div div ul li:first-child {
margin-top:0;
}
.body div div.blog div div ul li {
margin:13px 0 0 14px;
font-size:10px;
}
.body div div.blog div div ul li a {
color:#F0BA5A;
font-size:14px;
text-decoration:none;
}
.body div div.blog div div ul li a:hover {
text-decoration:underline;
}
.body div div.section div:first-child ul li:first-child {
background:none;
padding-top:0;
}
.body div div.section div.last ul li:first-child {
margin:0 0 0 20px;
background:none;
padding-top:0;
}
.body div div.section div:first-child ul li p a, .body div div.events ul li p a, .body div div.events p a, .body div div.games p a, .body div div.menu p a, .body div div.about p a, .body div div.blog div:first-child p a {
color:#F0BA5A;
}
.body div div.section div ul li:first-child, .body div div.events ul li:first-child, .body div div.menu ul li:first-child, .body div div.menu ul ul li:first-child p, .body div div.menu ul ul li:first-child span {
margin:0;
}
.body div div.section div ul li a img:hover, .body div div.events ul li a img:hover {
filter:alpha(opacity=80);/* Needed for IE7 */
opacity:0.8;
}
.body div div.section div ul li h4 a:hover, .body div div.section div.last ul li a:hover, .body div div.events ul li h3 a:hover {
color:#fff;
text-shadow:-1px -1px 1px #5B5B5B, 1px 1px 1px #5B5B5B, 1px -1px 1px #5B5B5B, -1px 1px 1px #5B5B5B;
}
.body div div.events ul li a img, .body div div.menu ul ul li:first-child {
border:0;
}
.body div div.events ul li p a:hover, .body div div.events p a:hover, .body div div.games p a:hover, .body div div.menu p a:hover, .body div div.about p a:hover, .body div div.blog div:first-child p a:hover, .body div div.blog div div ul li a:hover {
color:#cecccc;
}
/*------------------------- Footer ------------------------*/
.footer {
background:url(../images/bg-footer.png) repeat-x left top;
padding:38px 0 0;
}
.footer div.connect {
margin:0 auto 29px;
overflow:hidden;
width:167px;
}
.footer div.connect a {
display:block;
float:left;
height:48px;
text-indent:-99999px;
width:47px;
}
.footer div.connect a#twitter {
background:url(../images/icons.png) no-repeat 0 -200px;
}
.footer div.connect a#twitter:hover {
background:url(../images/icons.png) no-repeat 0 -250px;
}
.footer div.connect a#facebook {
background:url(../images/icons.png) no-repeat 0 0;
margin:0 0 0 13px;
}
.footer div.connect a#facebook:hover {
background:url(../images/icons.png) no-repeat 0 -50px;
}
.footer div.connect a#googleplus {
background:url(../images/icons.png) no-repeat 0 -100px;
margin:0 0 0 13px;
}
.footer div.connect a#googleplus:hover {
background:url(../images/icons.png) no-repeat 0 -150px;
}
.footer p {
clear:both;
color:#717171;
font-size:14px;
margin:0;
padding:0 0 110px;
text-align:center;
text-shadow:0 1px 0 #cfcfcf;
}

tangor

11:48 pm on Feb 11, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



How much of this is cut and paste and how much of it do you understand?

Breaks for viewport (divs shuffling about) is par for the course.

You cannot create a desktop experience on a mobile. Not enough landscape... if you want the user to be able to READ it.

Sorry (came back to edit) that sounds harsh. What I really mean is dev your page to be single column, fix a nav that can jump to each page, and know your header/footer will float.

captainron19

11:52 pm on Feb 11, 2016 (gmt 0)

10+ Year Member



Dont worry about being HARSH - I can take it. To be honest when it comes to css I am pretty ignorant and I believe that is where my big problem lies. I understand i am not going to get a complete desktop experience on a mobile device but just wanted it at least to be viewable. When looking at this in my mobile device it is WAY OFF

captainron19

12:06 am on Feb 12, 2016 (gmt 0)

10+ Year Member



I think I got it..... in my css I had the coding 

<meta
name="viewport"
content="width=device-width; height=device-height; initial-scale=1.0"
/>


and as soon as i removed that everything lined up fine on mobile device
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / Mobile Web Site Design and Development 1:21 am May 21, 2026