2

I cannot get my heading to behave how I want to responsively.

When I'm resizing my window, it looks just how I want it to look. However, when I go into dev tools device mode, the view of the iPhone for instance ends up with the text all in line even though I have the span set to display: block, and, the heading is way higher than I desire. For other devices, the heading is bleeding outside of the div.

What I want is this, which is how it looks when I resize my browser window accordingly. It is not anywhere near what I get in device mode.

I made a pen with all of my code.

I really have tried all night and it's discouraging that I have not found a solution. A major issue I have in addition to this, is I'd love to find a way to do this without the VH units for the position of the header, because as you will see in the pen, when the window is less then 900px high, the header bleeds outside of the div. Any help would be greatly appreciated! 

<div class="container">
      <h1>**** On <span>Tour</span></h1> 
    </div>

@import url(http://fonts.googleapis.com/css?family=Raleway:900,600,500,800,700);
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        body {
          font-family: 'Raleway', sans-serif;
          background-color: white;
        }

        .container {
          background: url('http://i.imgur.com/W6DHyPf.jpg') no-repeat center center;
          -webkit-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          overflow-x: hidden;
          overflow-y: auto;
          height: 40vh;
          width: 100%;
        }

        h1 {
          position: absolute;
          top: 22vh;
          color: #ff1744;
          mix-blend-mode: exclusion;
          font-weight: 900;
          font-size: 5em;
          letter-spacing: -3px;
          padding: 0 .2em;
          text-align: justify;
          margin: 0 auto;
          text-transform: uppercase;
        }

        @media screen and (min-width: 375px) {
          h1 {
            top: 24vh;
          }
          span {
            display: block;
          }
        }

        @media screen and (min-width: 562px) {
          h1 {
            font-size: 6em;
            top: 20vh;
          }
        }

        @media screen and (min-width: 681px) {
          h1 {
            font-size: 7em;
            top: 17vh;
          }
          span {
            display: inline;
          }
        }

        @media screen and (min-width: 729px) {
          h1 {
            font-size: 7em;
            top: 28vh;
          }
          @media screen and (min-width: 729px) {
            h1 {
              font-size: 7em;
              top: 28vh;
            }
            @media screen and (min-width: 2560px) {
              h1 {
                font-size: 10em;
                top: 28vh;
              }
            }
codeowl
  • 21
  • 3
  • Are those media queries supposed to be nested, or is that just how you indented the code? You missed a couple of `}`s, so I can't tell from the layout alone. – Mr Lister Jun 12 '15 at 07:50
  • I think the browser gets confused by all those media queries. My advice, first get it working without any, then add them back in one by one and see with which one it goes wrong. Also, what is the problem with `vh`? They're units like all others. If you want the h1 to be completely inside the container, make sure that the top of the h1 plus its height is not greater than the container's height; no matter what units you use for heights! (You may want to give the h1 a font size in `vh` too though.) – Mr Lister Jun 12 '15 at 08:10
  • @MrLister Sorry, it's how I indented here. It's not like that on my local machine. My only issue with VH is that as I said, when the height of the window shrinks, the h1 spills out of the container. Thank you for the advice on sizing the header with vh! – codeowl Jun 12 '15 at 16:54

2 Answers2

0

From what I have been able to observe, the issue you are experiencing seems to be a result of Chrome DevTools' device view not displaying screen sizes in the same way that Google Chrome otherwise does.

As shown in the following screenshot, when viewing the Chrome device view from the perspective of an "Apple iPhone 6 Plus", the <span> element contained in the <h1> element is being affected by the following media query:

@media screen and (min-width: 681px)

Computation of Inline Style

In order to fix this issue, I would recommend testing the page on a real mobile device (perhaps the site will display fine, as this is likely a Chrome DevTools issue). Otherwise, JavaScript could be used to detect the type of device the site is being viewed with, allowing the website to display the <span> element as a block on all smaller mobile devices.

More information regarding how to detect a type of user agent can be found at the following answer: How to detect a mobile device with javascript?

Edit: This issue was also solved by adding the following tag to the page's <head> section: <meta name="viewport" content="width=device-width, initial-scale=1">.

I hope this was helpful,
psgs

Community
  • 1
  • 1
psgs
  • 93
  • 1
  • 9
  • 1
    Thank you very much! I was hoping it was a DevTools issue. I will try the JavaScript solution! For now, using a meta tag with width=device-width,initial-scale=1 is working. I'm not to responsive design, so I'm not sure if this is a real fix or just a hacky thing that is just appearing to fix the issue. – codeowl Jun 12 '15 at 17:04
  • Using the `width=device-width,initial-scale=1` meta tag should definitely help in ensuring the website is responsive on mobile devices; it is quite likely a proper fix to the issue. It is also good for use in a production environment. – psgs Jun 12 '15 at 22:49
  • Thank you! I can't believe such a simple fix was there. It really solved the issue with scaling. I guess this is how we learn, right? I'll surely never forget to add that again. – codeowl Jun 13 '15 at 02:50
0

I highly HIGHLY recommend using the Bootstrap grid system to help with responsive design. I see that you have a ton of media queries written, which for me always gets really confusing when I'm trying to create a responsive layout. If you use the Bootstrap grid CSS, it essentially takes care of most of the responsive design for you, and you can always include media queries as well to pick up anything that Bootstrap didn't solve for you.

The basic idea is that by using predefined Bootstrap classes in your HTML, you create a responsive layout. Bootstrap divides the page width into 12 equal columns, with different widths depending on the device used. For an element that needs to be responsive, you specify how many columns it should take up for a large (desktop), medium (tablet), and small (smartphone) device.

Here's an example, using your HTML:

  • Note: .container is actually a predefined bootstrap class, so I changed the class for you div to .myContainer.

    <div class="container">  
    <div class="row">
        <div class="myContainer col-lg-4 col-md-4 col-sm-12">
        <h1>**** On <span>Tour</span></h1> 
        </div>
    </div>
</div>

The HTML above says that the div .myContainer will take up one third (four of twelve possible columns) of the screen width for a large or medium device, but for a small device it will cover the entire width. This is just an example of usage, you'll have to play around with the classes a bit to see what works best for you. The .row and .container classes are also predefined Bootstrap classes, and they work exactly the way you think - check out the Bootstrap site linked above for more information.

Kathy
  • 305
  • 2
  • 9
  • Thank you so much! I'm reading through all of the documentation now. The media queries are definitely making it hard to keep track of things, so having a way to get a lot of the responsiveness predefined is just what I'm looking for. – codeowl Jun 13 '15 at 02:52
  • You got it! If you have any images on your page that need to be responsive, the class .img-responsive is really helpful as well. Bootstrap has saved me from tearing out my hair many times! – Kathy Jun 15 '15 at 16:14