8 Replies Latest reply on Aug 3, 2014 7:03 AM by chome4

    Targetting a Specific Element With Media Queries

    chome4

      Working on this site:

       

      http://gmjones.org/dw/index.html

       

      I wish to target 'More than just accountants' and move it around so it appears in a different place, next to the logo, when viewed on a smartphone.

       

      I know from the html file that the details for the above are:

       

      <div class="fluid header_text">

          <h1>More than just accountants</h1>

      </div>

       

      But in the 'styles.css' I can't seem to produce a query that will target the above. As a 'div', shouldn't I be able to float, position etc?

       

      Just how do you target an element for a single device in a specific view?

       

      Thanks.

       

      Files

      gmjones.org/dw/dw.zip

        • 1. Re: Targetting a Specific Element With Media Queries
          Nancy OShea Adobe Community Professional & MVP

          The CSS selector for your example is .header_text h1

           

          /* Special Rules for mobiles */

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

               . header_text h1 {

                    color:red;

               }

          }

           

           

          Nancy O.

          • 2. Re: Targetting a Specific Element With Media Queries
            osgood_ Level 8

            Unfortunately you have been sucked into 'fluid grids' without really knowing about responsive design.

             

            1) You need to add height: auto; to the selector below (as shown) (this keeps your images in pro width ways and height ways when you don't set specific widths so as to entertain responsive design. (at the moment your logo is hideously distorted in height - I'm sure the company won't like that)

             

            img, object, embed, video {

                max-width: 100%;

                height: auto;

             

            }

             

             

            You have set all containers that have a class of 'fluid' to be 100% wide which is clearly not what you want on a smartphone if you intend to move other elements next to one another. They include <div id="header" class="fluid"> and <div class="fluid header_text">


            .fluid {

                clear: both;

                margin-left: 0;

                width: 100%;

                float: left;

                display: block;

            }

             

            Containers will always be 100% of their parent container width so there is no need to set it (unless you float the container in which case you DO need to set a specific width)

             

            What you need to do first is create a larger version of the company logo. This will allow it to shrink and grow at larger screen sizes without any loss of clarity and definition.

             

            Then remove the class 'fluid' from the <div> containers so you just have:  <div id="header"> and <div class="header_text">


            Alter the css for /* Mobile Layout: 480px and below. */ to:

             

            #header {

            width: 20%;

            float: left;

            }

             

            .header_text {

            width: 80%;

            float: left;

            }

             

            You will also need to alter the size of the h1 text for the smartphone by targeting it:

             

            .header_text h1 {

            margin: 0;

            padding: 15px 0 0 0;

            font-size: 20px;

            }

             

            You can then alter the font-size for the tablet in the tablet media query:

             

            @media only screen and (min-width: 481px) {

             

            .header_text h1 {

            padding: 25px 0 0 0; /*you may want to give it a bit more padding - 25px in the tablet */

            font-size: 30px;

            }

             

            }

             

            When the browser viewport hits 480px it will align the 'More than just accountants' text next to the logo.

             

             

            Having said all that I would be looking to center the logo on smartphones and center the text beneath it (having both side by side might be just a little bit too small and insignificant..........oh the joys of responsive design. It triples the workload and quadruples the price the customer should be paying.

            • 3. Re: Targetting a Specific Element With Media Queries
              chome4 Level 1

              You're right, responsive design is a major challenge. The tutorials/videos present simplified demo sites. I was trying to copy an existing site for another part of the company to look like their existing site:

               

              http://www.sgllp.co.uk/

               

              They already have an Adroid/Apple app but this site I'm working on is for their office in Gibraltar. Luckily I have some freedom to put forward a simpler design.

               

              When I removed the width from:

               

              .fluid {

                  clear: both;

                  margin-left: 0;

                  width: 100%;

                  float: left;

                  display: block;

              }

               

              The menu in smartphone mode shrank drastically!

               

              Definitely much more learning needs to be done on my part.

               

              Thanks for the help...

              • 4. Re: Targetting a Specific Element With Media Queries
                osgood_ Level 8

                chome4 wrote:

                 

                The tutorials/videos present simplified demo sites.

                 

                Yes, they certainly do....very few if any 'real world' examples. We are in a situation like a few years ago when construction with tables was frowned upon. Sites started emerging using <divs> BUT looked very sparse and mundane. I'm seeing a repetition of this now responsive is seen as the next major evolution. A lot of sites are much simpler in layout to overcome the extra work needed to make them responsive. Producing a 2 column responsive construction is going to be far less complex and easier to manage than a 3 or 4 column responsive design. Not a problem if you have a small site but a site with many pages and a few different 'templates' is a major undertaking.

                 

                chome4 wrote:

                 

                When I removed the width from:

                 

                .fluid {

                    clear: both;

                    margin-left: 0;

                    width: 100%;

                    float: left;

                    display: block;

                }

                 

                The menu in smartphone mode shrank drastically!

                 

                 

                 

                Menu in smartphone 'portrait' looks ok on my smartphone - 'landscape' view requires a bit of work though as all the menu links are initially displayed, which take up the whole of the screen, which is not very desirable.

                 

                 

                chome4 wrote:

                 

                Definitely much more learning needs to be done on my part.

                 

                 

                Its a catch 22 situation...a lot of people rely heavily on the automated features which ship with DW which is understandable but that in itself is bad because it leads to a reluctance to understand what is happening and how to put it right.

                1 person found this helpful
                • 5. Re: Targetting a Specific Element With Media Queries
                  chome4 Level 1

                  I'm brand new to Dreamweaver/Responsive web design. I've done another website of over a hundred pages for a friend via coding, so I have an interest in the mechanics of a webpage. The learning process wasn't pretty! I have notepad++ open out of habit as well as using 'inspect element' in Firefox and Chrome browsers. With this page, I've turned the logo into a banner containing the 'more than just accountants' text. This way I can apply some of what's mentioned in the simplistic videos/tutorials out there - many HTML5 templates consist of a simple layout with eithe a banner or image carousel. So far the page is behaving itself in all devices.

                   

                  The work continues....

                  • 6. Re: Targetting a Specific Element With Media Queries
                    chome4 Level 1

                    Hi Nancy,

                     

                    Thanks for that.

                     

                    I've decided to have a rethink about the design as this responsive web design thing isn't as straightforward as some would have us believe!

                     

                    Thanks again...

                    • 8. Re: Targetting a Specific Element With Media Queries
                      chome4 Level 1

                      Thanks for that Nancy....