Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Andreas Fischer
Andreas Fischer
8,256 Points

embed Google Maps correctly for responsive website

Hi everyone,

I'm building a small website for my mother's store. On the contact page I added a Google Map via the <iframe> tag and could even make it resize to different screen sizes. It also has a marker for the store's location.

However, when I resize the screen, the marker is no longer in the center. The smaller the screen gets the more the marker gets pushed to the side and in the end is no longer visible.

How can I change this? And is this even a good technique I used here? I came across lots of pages suggesting to use the Google Maps API.

Thanks!

Joe Consterdine
Joe Consterdine
13,965 Points

Hi Andreas,

without seeing your code I don't know what's going on.

If could post all your code I'll take a look.

thanks

Andreas Fischer
Andreas Fischer
8,256 Points

Hi Joe Consterdine ,

here is my html-code for the contact page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>lorem ipsum</title>
    <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>

    <header>
      <h1>
        <a class="header-logo" href="index.html">lorem ipsum</a>
      </h1>
      <nav>
        <ul>
          <li><a href="index.html">Angebot und Preise</a></li>
          <li><a href="about.html">Über mich</a></li>
          <li><a href="studio.html">Das Studio</a></li>
          <li><a href="contact.html" class="selected">Kontakt</a></li>
        </ul>
      </nav>
    </header>

    <div class="wrapper">

      <h1>Kontakt</h1>
      <div class="anschrift">
        <h2 class="h2-heading">name</h2>
          <p>straße</p>
          <p>ort</p>
            <ul class="contact-info">
              <li class="phone"><a href="tel:123456">123456</a></li>
              <li class="mail"><a href="mailto:info@example.de">info@example.de</a></li>
            </ul>
      </div>

      <div class="opening">
      <h2 class="h2-heading">Öffnungszeiten</h2>
        <table id="table-opening">
          <tr>
            <td>Montag - Freitag</td>
            <td class="price">9 - 18 Uhr</td>
          </tr>
          <tr>
            <td>Samstag</td>
            <td class="price">9 - 13 Uhr</td>
          </tr>
        </table>
        <p>Nach Absprache auch Termine außerhalb der Öffnungszeiten möglich!</p>
        </div>

      <div class="map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2200.2532270047063!2d12.099303936940029!3d49.01901636514178!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479fc1a3fb893aaf%3A0x6d338f78eb7e4b42!2sKalm%C3%BCnzergasse+3%2C+93047+Regensburg!5e0!3m2!1sde!2sde!4v1447919459244"></iframe>
      </div>

    </div>


      <footer>
        <a href="impressum.html">Impressum</a>
        <a href="disclaimer.html">Disclaimer</a>
      </footer>

  </body>
  </html>

And here is the CSS for the general layout and the contact page. It is divided into desktop screen and 'tablets and smartphones'. I hope this gets all displayed correctly here.

/***************
GENERAL
***************/

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #D0F5A9;
}

.wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
    text-decoration: none;
}

.header-logo {
  display: block;
  height: 300px;
  background: url('../img/kosmetik.jpg');
  background-size: cover;
  background-position: center;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 0;
}

header h1 {
  margin-top: 0;
}

nav {
  text-align: center;
  background-color: darkgreen;
  height: 40px;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
  margin: 0 10px;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/***************
COLORS
***************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #599a68;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #ccc;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}



/***************
CONTACT.html
***************/

.h2-heading {
  font-size: 16px;
}

.anschrift {
  display: inline-block;
  float: left;
  width: 45%;
  padding-left: 3%;
}

.opening {
  display: inline-block;
  width: 45%;
  float: right;
  padding-right: 3%;
}

.map {
  display: inline-block;
  position: relative;
  margin-top: 3rem;
  width: 100%;
  height: 0px;
  padding-bottom: 50%;
}

.map iframe {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border: none;
}

#table-opening {
  width: 100%;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 2em 0;
  line-height: 1.5em;
  letter-spacing: 0.5px;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  padding: 0 0 0 35px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone-outline.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}



/***************
FOR SMARTPHONES AND TABLETS
***************/

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

/***************
NAVIGATION
***************/
header h1 {
  margin-bottom: 0;
}

nav {
  height: 108px;
}

nav ul {
  list-style: none;
  margin: 5px 0 5px;
}

nav li {
  display: block;
  margin: 5px 10px;
}

nav a {
  font-weight: 800;
  padding: 2px 10px;
}

.header-logo {
  height: 200px;
}


/***************
CONTACT.html
***************/
.anschrift,
.opening {
  display: block;
  float: none;
  width: 100%;
  text-align: center;
  padding: 0;
  margin-bottom: 2rem;
  line-height: 1.2em;
}

#table-opening {
  width: 75%;
  margin: 0 auto;
  text-align: left;
}

.contact-info li.phone a,
.contact-info li.mail a {
  background-image: none;
  padding: 0;
}
}

1 Answer

Christian Kroul
Christian Kroul
9,849 Points
Christian Kroul
Christian Kroul
9,849 Points

Use MAPBOX