Need help with mobile website

Get Started
1

I had someone design a mobile website framework. I have been learning HTML and CSS along the way to be able to make changes to the site and still have some issues that I can’t figure out.

  1. I want the box to be uniform in size around “Menu”, “Hours”, etc…
    http://localdigitalnow.com/bistro/

  2. I want to center the map on this page:
    http://localdigitalnow.com/bistro/location.html

2

Didn’t I already answer that somehwere else?

The easiest way is to give the div a width and then use auto margins.

e.g.


.box{width:400px;margin:auto;text-align:center}

If you want the outer element to be 100% wide then you could do this instead.


.box{margin:auto;text-align:center}
.box img{display:block;margin:auto}

You’ll have to clarify what question 1 is and what is that image for?

3

Didn’t I already answer that somehwere else?

A day after I posted this question in the Web Page Design forum and didn’t receive any answers, I then posted a more specific question about the location page in the CSS sub forum. It seems the CSS fourm has more activity.

Thanks for your help Paul, I added a “map” class so I wouldn’t affect the other pages.

.map{
text-align: center;
}

.map img{
display:block;
margin:auto
}

<div class=“box map”>
<p><b>Macrossan Street</b><br/ >
<p><b>Port Douglas QLD 4877</b></p>
<a href=“http://maps.google.com/m/local?q=Macrossan Street, Port Douglas QLD 4877” rel=“nofollow”>Click to View on Google Maps</a>
<a href=“http://maps.google.com/m/local?q=Macrossan Street, Port Douglas QLD 4877” rel=“nofollow”><img src=“http://maps.google.com/maps/api/staticmap?center=Macrossan Street, Port Douglas QLD 4877&zoom=14.5&size=250x270&maptype=roadmap&markers=color:red%7Clabel:A%7C25 Mason St San Francisco, CA 94102&sensor=false” alt=“View on Google Maps” /></a>
<form method=“get” action=“http://maps.google.com/m/directions” onsubmit=“return checkSelection(‘form1’);”>
<fieldset>
<input type=“hidden” name=“daddr” value=“Macrossan Street, Port Douglas QLD 4877” />
<ul>
<li><label>Directions: Enter Your Start Location</label><input name=“saddr” type=“text” class=“input” /></li>
</ul>
<input type=“submit” name=“submit” class=“button” value=“Get Directions” />
</fieldset>
</form>
</div>
</div>

.box {
border:1px solid #a41a0c;
border-radius: 0.938em;
background: #fff;
margin: 7px 7px;
padding:5px;
}

.map{
text-align: center;
}

.map img{
display:block;
margin:auto
}

You’ll have to clarify what question 1 is and what is that image for?

I actually fixed my first problem. The image is a QR code. I figured since it is a mobile website it would be easier to scan the code than type the URL into a mobile browser. I should have clarified that in the original post.