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

responsive-design

#41

@Mittineague covered my clumsy expression well. :wink: Maybe I should have called it “the property without a vendor specific prefix”.

“border-repeat:repeat” repeats a whole number of times then clips the end segments to fit;
“border-repeat:round” repeats a whole number of times then scales all segments to fit seamlessly.

Attached is a “tweaked” version of your image. Solid lines are the same width. “images/contentborder.png”
contentborder.zip (9.5 KB)

When I draw images like this, I usually enlarge GIMP’s magnification 4x to 8x or so to be sure lines and cropped areas are “as desired”, otherwise I could be off a px or two (or more :shifty:) without realizing it.

This is an experimenter’s working page. Properties and classnames probably do not match those in your test site. You should be able to adapt the image and appropriate properties to work on your page. You may want to include “images/bgdark.jpg”.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>content border-image</title>
<!--
Test Page
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
body {
    background-color:#ccc;
    background-image:url("images/bgdark.jpg")
}
.outer {
    max-width:900px;
    margin:0 auto;
}
.content {
    background-color:#fff;
    border:62px solid transparent;  /* change border-width to change border size */
    border-top:0 none;
    border-image-source:url("images/contentborder.png");  /* 254x254 */
    border-image-slice:62;  /* note: NO unit of measure = px */
    border-image-repeat:round;
    border-image-outset:5px;  /* 5px */
    padding:0 .75em;  /* space inside the border (ref: box model) */
    margin:0 auto;
}
p {
    margin:.75em 0;
}
    </style>
</head>
<body>
<div class="outer">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices in iaculis nunc sed augue. Dignissim convallis aenean et tortor at risus viverra. Euismod lacinia at quis risus sed vulputate. Sit amet justo donec enim diam. Lobortis mattis aliquam faucibus purus in massa. Natoque penatibus et magnis dis parturient montes nascetur. Leo integer malesuada nunc vel risus commodo viverra. Amet est placerat in egestas. Ut pharetra sit amet aliquam id. Vel elit scelerisque mauris pellentesque. Et ligula ullamcorper malesuada proin. Id semper risus in hendrerit. Eu mi bibendum neque egestas congue quisque egestas. Feugiat pretium nibh ipsum consequat nisl.</p>
        <p>Dignissim suspendisse in est ante in. Massa placerat duis ultricies lacus. Leo vel fringilla est ullamcorper. Et netus et malesuada fames ac turpis egestas. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Pellentesque id nibh tortor id aliquet. Ullamcorper eget nulla facilisi etiam dignissim. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. In aliquam sem fringilla ut morbi. Diam sit amet nisl suscipit adipiscing bibendum. Vitae aliquet nec ullamcorper sit. Mauris ultrices eros in cursus turpis. Semper viverra nam libero justo laoreet sit.</p>
    </div>
</div>
<br>
<img src="images/contentborder.png" width="254" height="254" alt="reference contentborder.png image">

</body>
</html>

#42

Yep, your best bet is to use a wrapping element and change the anchors to inline-block.

.footer {
    text-align:center;
}
.footer a {
    display:inline-block;
    text-align:center; 
    font-size:2.5em;
    margin:.25em 0 0;
}
    <div class="footer">
        <a href="#">Contact Us!</a>
        <a href="#">Read Our Shipping Guide</a>
        <h4>&copy;2018, First Rate Logistics. All rights reserved.</h4>
    </div>

#43

You’ll have to help me with this. I can’t envision how a gradient would help the “look”. Color me artistically challenged :wink:


#44

Okay, based upon the experimenter’s contributions, I made the following changes to the .bodywrap styles:

.bodywrap {
    display:table; /* instead of {overflow:hidden} or "clearfix" */
    width:100%;    /* instead of {overflow:hidden} or "clearfix" */
    max-width:770px; /* keeps the body box slightly slimmer than the header at max widths */
    border:75px solid transparent;
    border-top:0 none;
    border-image:url("../images/contentborder.png") 62 round;  /* 254x254 */
	border-image-outset:5px;
    background-color:rgba(255,255,255,.5);
    margin:0 auto;
}

I tried to follow the w3schools explanation of the border-image property so as to incorporate some of the other properties (such as the border-image-outset) into the shorthand, but that was the best that I could come up with. :thinking:

Question:
What does the border offset of 62 measured in if not designated a measure type? Is there a reason to change from the original 31%?

The experimenter’s content border image (if other than yours, ronpat) has been added to the images folder on the test site. It definitely matches what I was envisioning and looks like a visual match to the design. :paintbrush:

As for the links, this is the HTML that I have now:

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

I know that it is generally not sound practice to use HTML elements for design changes (I used a line break between the links.), but anchor tags are really stubborn elements! :men_wrestling: They seem to behave as intended now.

Here is the envisioned idea for the gradient at the top of the body wrap. Whether or not it turns out nicely is something to be seen, but this is the idea of a gray gradient fading to transparency:


I have the code examples from the wide menus in World Review Group, but this will be unique as this gradient may require an extra element or a pseudo-element to target for this gradient idea.
Note: The gradient here is overlapping the arrows just because I put this together to demonstrate the visual concept.


#45

I want to play with the layout a bit, so I’ll try to get back to you later this evening.

How were they misbehaving?
You shouldn’t need the break tag after the first anchor in the footer. It does nothing useful that I can see.
 

border-image: Give Mozilla’s developer’s site a read.


W3Schools is a useful quick reference/reminder but often lacks substance and has been known to offer older examples of code. I use W3Schools occasionally to remind me of property values that have slipped from my memory but then, sometimes have to turn to Mozilla or the W3C or CSS-Tricks for more details. I have several reference sources bookmarked.
 

There is no “border-offset”… that property is “border-image-slice”. The number without a unit of measure is interpreted as pixels. If one adds “px” to the number, it doesn’t work. Picky. I changed it from 31% to 62 because 62 is the actual width of the border portion of the image. The border-width should match that value initially, so you should change 75px to 62px. You can add padding to make up for the difference if you wish. I’ll include that in my next submission, anyway.

Later.


#46

The <a>'s were in inline-block, correct? So they stay on the same line on the page, correct?.., but if they are in block display, the anchors take up the whole line?

Okay, I think I had read that page linked, but it looks like I got those properties mixed up.

I’m drafting some more substantial sales copy into the markup. :panda_face:
-ty :smashy:


#47

I tweaked all of the files up on the site now and added a bunch of new content. Have a look at the unordered list I inserted within .left among tweaking the padding and margins a little bit.

Looks good.


#48

There is some more new code that I’ve uploaded to the test site.

Lines 46-53, index.html:

			<ul>
				<li>Properly classify your freight.</li>
				<li>Provide precise quotes.</li>
				<li>Construct accurate Bills of Lading.</li>
				<li>Update the receiver with current tracking information.</li>
				<li>Manage carrier billing.</li>
				<li>...and much more!</li>
			</ul>

styles:

ul li {
	font-weight:bold;
	list-style-type:square;
	list-style-position:inside;
	margin:0 3%;
	padding-top:1%;
}
ul li:last-of-type {
	list-style-type:none;
	font-size:1.4em;
	font-family:"Comic Sans MS";
	text-shadow:1px 1px 3px #f46242;
	text-align:right;
}

Line 60, p.thanks:

<p class ="thanks">Thanks for reading our page!</p>

styles, line 176, homepage.css:

p.thanks {
	font-family:"Comic Sans MS";
	font-size:2em;
	text-shadow:1px 1px 12px #000;
	text-align:center;
	margin-bottom:2%;
}

1: I am trying to find out if I can use a background image on the first link (or .footer) to provide arrows or other emphasis to the first link. Do you need a visual example?
linkarrows

  1. The floated images get very small at low widths (500 max width screen query). I tried the following line to no avail in the media query:
.right img, .left img {max-width:60%;}/* TRYING to keep the images from being too small */

Is there a way to keep the images from getting too tiny (particularly the forklift in .left)? I tried using a min-width, too, and it wouldn’t prevent the forklift from being microscopic.

  1. Would it be worth experimenting to increase the width of everything by 5% (or about 50 px) larger? I want to try if any of the max-width of the entire layout can be made bigger, including the size of the body text. :pizza:

Oh, dear. :fearful: Well, I’m working on this stuff just fine right now. There’s no obligation for you to have to help me. :blush: Would you like some vitamin C? :sunny:

  1. Here is the how the gradient might look:
    gradient2

or

gradient1

  1. Applying text-align:left to ul li:last-of-type at low width media query does not re-align the text to the left, keeping it from being so smushed on the right side.

Files updated, including adjusted paddings, margins, and sizes, etc.
Files validated properly:

-ty :smashy:


#49

How did you make your example gradient? Yours looks very neat, my attempts have been poor. If it’s done with an image, zip the image and add it to your next post, please.

Sorry I didn’t post anything last evening. I started feeling ill and it persisted well into the night. Am OK now.


#50

See above post 48. I’ve edited it several times.


#51
  1. Why shouldn’t I just add in a gradient to the bordergradient.png graphic for the gradient effect?

Maybe like this:
boxborder

How about that? That looks good. :sunglasses:

Here’s a .zip file.
boxborder.zip (43.6 KB)


#52

I’m continuing to check validation after making several more changes / updates… thinking I was tearing the house down for a second there.

  1. Here is a new arrow graphic for the emphasis on the “Contact Us!” link.
    linkarrows.zip (43.3 KB)

I will leave this alone until tomorrow. :crescent_moon:
//
//
//
edit: There is now a font presets section to the CSS file which saves a few repetitive lines on font style.
lines 115-125, homepage.css:

/* font presets */
.freightwrap p,  h2, ul li:last-of-type, p.slogan, p.thanks {font-family:"Comic Sans MS";}
.left, .right, .footer a {font-family:"Times New Roman";}
p.thanks, p.slogan {
	font-size:2em; 
	font-weight:bold; 
	text-shadow:2px 2px 5px #f4a442; 
	text-align:center;
}
span.bold {font-weight:bold;}
/* end font presets */

Update: added line-height to the ul li targets and increased font sizes, i.e.:
lines 175-183, homepage.css:

ul li {
	font-weight:bold;
	list-style-type:square;
	list-style-position:inside;
	line-height:1.5;   /* ADDED line-height */
	font-size:1.2em;
	margin:0 3%;
	padding-top:1%;
}

Very good. :smashy:


#53

I cleared the float on the left and right images at low width using the following lines 266-271:

	.left img, .right img {
		float:none;
		max-width:95%;
		margin:0 auto;
		padding:0;
	}

It works, but the images don’t look centered properly. :triangular_ruler:

I also tried to hide the .right:last-of-type, but it won’t go away at low widths:
.right:last-of-type {display:none;}


#54

Hi, Ronpat,

I tried adding a .png with a transparent background, but I’m still seeing a white border where there should be transparency for the gradient effect.
Capture

I guess I’m on my own for now?

-ty :smashy:


#55

No, but I’ve been sidetracked for awhile. The health insurance bidnesses(sic) leave me feeling ill every year. :shifty:


#56

Understood.


#57

I made three changes to this layout. Your latest changes are not included or addressed yet.
(1) I applied a shadow beneath the banner as you originally demonstrated. I’ll be happy to change it in the next revision to use the graphic with the surrounding shadow, if you wish, but you may be disappointed.
(2) If I followed you correctly, you wanted to change the behavior of the horizontal space outside the .contentwrap box. That has been done (or so I think). div.outer now contains the entire page. It sets the max-width of the page. This has been done to accommodate the content border-image and the variable horizontal space outside of it.
(3) Added divs around the anchors in the footer. One should not need or use a <br> tag to keep these elements on separate lines. Sorry for that blooper.
(*) The red dotted outlines around everything are coding aids. The CSS applying the red dots is the top line of CSS. It can be deleted or commented out. You’ll probably see it again.

I’ll go forward with the next revision after you have commented about these three items.

The version number at the end of the filename should be the post from which the code was taken or new wishes made. I’m a bit behind, but we’ll catch up.

FirstRateFreight35a.html (4.2 KB)
homepage35a.css (5.9 KB)


#58

Wow, this CSS gradient effect should be suitable. :paintbrush: It seems to test well across browsers. I’m going to take some more time to study this update and get clear on some several lines, but I incorporated much of the several updates into the latest index.html and homepage.css files.

Currently, I’m trying to accomplish two items:

  1. center the images after the floats are cleared at low widths, i.e.:
    lines 285-290:
	.left img, .right img {
		float:none;
		max-width:95%;
		margin:0 auto;
		padding:0;
	}
  1. hide the second .right div at low widths so there is only 2 paragraphs of text on the page before the links.
    .right:last-of-type {display:none;}
    That line does not seem to perform as intended in the media queries.

-ty :smashy:


#59

I’ve been catching up and incorporating your new content in the page.

I’be been working on both of those issues today. Hopefully, I’ll have something for you to examine later t-o-d-a-y.

Just for fun, I added a box-shadow around the banner. I don’t recommend it because it reduces the space available for content, but you were interested in seeing how a surrounding gradient would look so it will be included.


#60

No rush. Take care of yourself first.