"Snapping" Responsive Design Width to 100% for Small Viewports (Mobile Devices)

responsive-design

#61

Ty,

Give these files a try, please.

The box-shadow has replaced the gradient on the .banner. As I said before, it leaves less width for content. See the notes in the CSS where the body margin is changed to hide the shadow at the narrowest width. Removing the box-shadow will require changing the body margins in the media queries.

The bottom (third) section of content is hidden at the the first media query breakpoint (700px). Either delete the class “last” on that third section or comment out or delete the CSS if you change your mind.

I put boxes around the content images. The images are not floating. Their containers are. They stop floating at the second media query (600px). Not too small. I think the images behave better but your taste may differ.

Check the content for errors. While the code is valid, it may be possible to write it more efficiently so don’t hesitate to ask questions.

Tested in FF and Chrome.

FirstRateFreight58b.html (5.4 KB)
homepage58b.css (6.9 KB)


#62

Well, the box-shadow on .banner is stunning. :money_mouth_face:
There’s nothing much more to say about that.

I’m unsure why your cleared image floats and margin: 0 auto; seems to center the images in the media queries. I used almost the exact same code prior to this update.

Additions:
-I adjusted the font size of the absolutely positioned <h1> because the text was protruding from behind the logo images. It is 2em in size now and 1em at small widths.

-I removed the line break in the text of .slogan and used padding instead to try to preserve the visual presentation of the slogan under the arrows. The line break was causing some weird text wrapping as the page expands & shrinks.

Issues:
-At low widths, some element is leaving excess space at the bottom of the page (not shrinking or adjusting). Should I revive borders again for all the elements? I need to learn how to isolate the element that’s causing this.

Observations / questions (condensed version):

  1. .banner::after has background-size: contain assigned to it at line 80. Upon researching this property, is this necessary so that the browser will scale the image to fit its container similar to border-image-repeat: round ? :dizzy_face: Maybe I’ll remove that property as an experiment and see how the arrows respond.

  2. .content has a border-image-outset of 5px and a 5px left/right margin to offset. Why not just make the border offset 0?

  3. In my dabbling with clearing the floated images, I used last-of-type to get the last .right div. You’re using a new class of last. Where can I refer to when I feel that the first-of-type or last-of-type targets may be appropriate? What I used didn’t perform as intended. I’ll look it up on the Mozilla developers’ site.

  4. The links are displayed like a table. I’m assuming this is because the elements will stack neatly on top of each other without the links being activated on the entire block level. A revisit to the display property should reveal some info.

  5. I’m dumbfounded how hidden visibility and font-size adjustments account for the padding of .scrolldown when it disappears. That will remain a mystery but a noted hack in the media queries.

Goals / objectives:
-The “contact us” link needs some emphasis with these link arrows I mentioned before:
(before and after pseudo-elements are not an option with link elements, apparently, but another div seems redundant.)
linkarrows.zip (43.3 KB)

-The full size of the layout could be made a bit bigger as an experiment. I’ll give that a go on my own.

This page is starting to look complete, but I’m still in draft mode on my sales copy. The text will probably be altered a couple dozen more times.

-ty :smashy:


#63

Glad you like it smile
 

Just an FYI reminder, change the width of the page by changing the max-width in .outer. Nothing else.

 
The space at the bottom of the page is because I forgot to put a minus in front of the offscreen value:

    .right.last {  /* this moves the last content section offscreen left at this breakpoint.) */
        position:absolute;
        left:-9999em;  /* ADD minus here */
    }

 

Those properties are assigned to <div class="imgwrap">, not to the images. The <img> element is preset at the top of the CSS to:

img {
    display:block;
    width:100%;
    height:auto;
}

I broke training… I made a personal preference error when limiting the width of the images in the content portion of the page. :eek:
Please change this:

.right .imgwrap,
.left .imgwrap {
    display:table;
    max-width:288px;  /* set max-width of images here.  some images may be narrower. */
    border:4px ridge #000;
    margin:0;
}

to this:

.right img,
.left img {
    max-width:288px;  /* set max-width of images here.  some images may be narrower, none will be wider. */
}
.right .imgwrap,
.left .imgwrap {
    display:table;
    border:4px ridge #000;
    margin:0;
}

In your current code, the widths are not the same. You can split the selectors in my example and change the widths as desired. Easy.

.imgwrap is assigned to {display:table} because a table is a block and it shrinks to fit the width of its content by default. Floats override {display:table} and also shrink to fit so there should be no change in the size of the image when negating the float in the media query.

I think this covers the mentions at the top of your post. I’ll work on those at the bottom later tonight.

cat-sm


#64

Correction: Change the width of the page by changing the max-widths in .outer AND .contentwrap.

(1)

Yes. In this case, one could use contain, cover, or 100%. The background-size property specifies the size or coverage of a background-image. background-size has a choice of several values: ( auto | cover | contain | length[with a unit of measure] | initial | inherit )
NOTE: If only one non-keyword value is specified, the other one is assumed to be “auto”.

The first three references listed below offer “demos” where you can compare the effects of values.

https://www.w3schools.com/cssref/css3_pr_background-size.asp



(useful) https://www.w3schools.com/cssref/css_units.asp

(2)

They serve complementary purposes.

.content {border-image-outset:5px} is required to make the border-image overlay the body background-image by 5px on each side. Remember the corner boxes on the border-image are 10px wider than the middle segments. Without the border-image-offset, the body background-image is visible outside of the middle segments.

The max-width of .contentwrap is 770px so it would be 30px narrower than the banner box, 15px on each side, at desktop width. However, the border-image-offset uses 10px of the 30px, 5px on each side. The added margin applied by .content {margin:0 5px} counteracts the 5px border-image-offset to preserve the full width space around .content to 30px at desktop width.

As the page narrows to less than 800px, that 30px of difference collapses until .contentwrap is the same width as .outer. However, .content {margin:0 5px} contines to give the middle segments of the .content section’s border-image a 10px narrower width than the .banner. At the narrowest width, the left and right edges of the corner boxes (at the bottom of the page) would be sliced off without .content {margin:5px}.

(3)

last of type does not work the way you think it works. It would find the last <div> and if it matches class “right” then it would apply your code, if it does not match class “right” your code would not be applied.

Play with this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>:last-of-type</title>
<!--
:first-of-type, :last-of-type demo
-->
    <style>
p.green:first-of-type {
    color:green;
}
p:last-of-type {
    color:red;
}
p.blue:last-of-type {
    color:blue;
}

    </style>
</head>
<body>

<p class="pink">Your HTML here</p>
<p>Your HTML here</p>
<p class="blue">Your HTML here</p>
<p>Your HTML here</p>

</body>
</html>

We can change the HTML so :last-of-type works but I would recommend not specifying a className.

Change the div

   <div class="footer"> <!-- footer -->
       <div class="anchorwrap"><a href="#">Contact Us!</a></div>
       <div class="anchorwrap"><a href="#">Read Our Shipping Guide</a></div>
       <h4>&copy;2018, First Rate Logistics. All rights reserved.</h4>
   </div> <!-- end footer -->

to footer

   <footer class="footer"> <!-- footer -->
       <div class="anchorwrap"><a href="#">Contact Us!</a></div>
       <div class="anchorwrap"><a href="#">Read Our Shipping Guide</a></div>
       <h4>&copy;2018, First Rate Logistics. All rights reserved.</h4>
   </footer> <!-- end footer -->

 

(4) I believe #4 was addressed in my last post.
 

(5)

{visibility:hidden} should be obvious enough, it renders the text invisible but does not delete it. Reducing the size of the invisible font reduces its height. I picked a size that is close to your padding. I felt that this was easier than removing the text with {display:none} and adding padding to provide some height.
 

Check for typos.

smile