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

CSS

Posted by Stefania Valente da Silva
Stefania Valente da Silva
1,962 Points

Big Image and a lot of important information

Hello, I'm learning about media queries and I'm in trouble trying to make web responsible a big map with a lot of little informations.

The question is how I can make it resposible if the best size to see legible all the information is 5 000 px? And another thing is how to resize the "legenda" and "mapa" at the same time, when it is resized in a mobile or tablet.

Thanks Claudiane

There is the code.

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>PHNP</title>

  <!--[if IE]>
  <style type="text/css" media="all">.borderitem {border-style: solid;}</style>
  <![endif]-->
    <style type="text/css">

        body{

      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
    }

.legenda{

            background-color: #FFF;
            text-align: center;
      vertical-align:middle;
            position:fixed;
            bottom:0px;
            left:0px;
      background-repeat:no-repeat;
      width:215px;
      box-shadow: 3px 3px 4px #111;
            border-radius: 10px;
      border: thin solid; border-color:#CCC;
  }

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

        #mapa{
          width:100%;
          }
        .legenda{
        width: 10%;
        }


      }

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

      img{
        width: 100%;
        }

    }

    </style>

</head>

<body>

<div id="main">
       <img src="images/PHNP.jpg" id="PHNP" alt="" class="mapa"/>
     <div class="clearFloat"></div>
</div>
    <div class="legenda"><img src="images/legenda_PHNP.jpg"/></div>


</body>

</html>

1 Answer

Andrew Whitfield
Andrew Whitfield
5,239 Points
Andrew Whitfield
Andrew Whitfield
5,239 Points

Hi,

On mobile devices, you can pinch and zoom, so, focus on making sure the content makes sense in context as much as possible.

Are you able to post a link to the site so we could potentially review it online and see what might look appropriate at those content break points?