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

responsive-design

#21

Okay.

First of all, I implemented the overlay effect using z-index and absolute positioning. The first alternative method you listed generated a “bouncing” effect on Opera browser. At smallest, the hover state would display a size greater than the img:first-of-type, thereby “bouncing” the layout size. It’s hard to demonstrate without videos / photos. The second one involving absolute positioning (relative to .imgbox) has no issues. The third one involving the hover image in the background works at all sizes, too, but I stuck with the second method, i.e.:

.imgbox {
    min-height:100px;
    position:relative;
    text-align:center;
}
.imgbox img {
    display:block;
    width:100%;
    height:auto;
}
.imgbox img:last-of-type {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:-1;
}
.imgbox:hover img:last-of-type,
.imgbox.active img:last-of-type {
    z-index:1;
}

I’m not really having a full understanding why image box has a minimum height and why the image itself a width of 100%, but that’s for me to experiment and figure out why.

Moving on to the “blink” of the hover state image, you wrote the following:

…so I went and searched how to preload an image, and I came up with the following code to add within the <head> tag:

<link rel="prefetch" href="style/headerlogo2.png">

I will do a bit more research to see if there is more to this prefetch to make it effective (like some JS); however, I do not see the blink between the images shifting anymore on two different browsers. I think it’s complete across all types of devices after testing it on a few different computers, and honestly, if the images don’t shift to the hover state on all types of devices, I’m not very concerned about it as the effect is cosmetic and mainly for glamor.

I read all of that thread that you linked, but I didn’t quite understand its application to the problem at hand. Perhaps, I haven’t tested enough touch screen devices, but the ones I have (including my phone) are all responsive between the image states. Was I supposed to be paying attention to the JavaScript bits? Not sure what you wanted me to see there, but it was informative. I have come to like reading the discussions.

Every time I respond or update, I have always uploaded the most recent files to the test site, so I might forego the “files updated” bit.

Is there really anything else before I move on to the content body? I think I’m going to have some new files and code uploaded to the test site by sometime tomorrow.


#22

I found this boo boo on :medal_sports: ‘award-winning’ IE11:
Capture

I’m not even sure if I care to explore what CSS properties are not being rendered on IE, but there it is.
Maybe it’s not jiving with the CSS variable. I’m not sure.

Edit: Yes, Internet Explorer cannot handle CSS variables. Is anyone surprised?
So, I took out the boffset variable, unfortuantely. A lot of my customers are “old school” as some are farmers and likely still use primitive browsers like Internet Explorer. Some may even still have 56k connections.

Also, the browser window size on IE can get really, really tiny, and I’m wondering if it is prudent to add a minimum width to .outer. For now, I added a title attribute to the images which I will likely remove after I figure out what to do next.


#23

Left-over. The min-height on imgbox prevented the height from collapsing completely when the foreground image/s were not found during dev. It isn’t needed now. Can be deleted.

Assigning img {width:100%; height:auto;} is fairly standard for responsive foreground images to make them respond to the width of their parent container and keep their aspect ratio. The foreground images presently have a width of 500px. Imgbox, the parent container, has a calculated max-width of 540px (after border images, padding, etc). The {width:100%} assigned to the image/s causes them to enlarge or shrink to fit the width of their parent container. Ideally, the image would be 540px wide or larger so it always shrinks to fit rather than enlarges to fit which can become blurry. In your case, I don’t think the trace of fuzziness is significant. Some outdoor scenes can generally withstand a bit of fuzziness, whereas architectural or geometric shapes would not. Finally, one does not have to assign the restricting width to a parent container, it can in fact be assigned to the image itself, but for a variety of reasons I usually put images in a parent container.

I haven’t used a prefetch, but I believe it would work just as you’ve shown and store the image in the browser’s cache.

Like I said, I just tossed it in in case there was something of interest in it that caught your eye.

Actually, it’s a good reminder. You might even include the URL occasionally, if you don’t mind.

Sorry about IE and the CSS variables. I should have checked
https://caniuse.com/#search=css%20var
It seemed like such a great “learning by example” opportunity, I got careless. Oh, well, that will add 12 lines to the media queries.

IE is a desktop browser. One would not be expected to use it at tiny widths, so I would not think a min-width would be necessary. The contents would have long since overflowed their containers before tiny was reached.

:racing_car:


#24

Late response from me… I’m overworked over the last several weeks, and my partner is hoping that I can finish this initial page soon. :stuck_out_tongue_closed_eyes:

Yes, without a 100% width assigned, the image does not fill the parent container, and it does not scale with the design. Without the width defined as such, it breaks the .imgbox design (The image will not scale in size.), and the border div will engulf it at low widths. See below screen captures:


Well, it is an optimal learning experience, and that variable saved 12-15 lines of code before I re-implemented the top, right, bottom, left values. It had practical application, and I didn’t think it to be careless at all. I don’t like to sound sappy, but all of your practices I intend to mimic to the best of my ability. Maybe IE will break its reputation of being the sluggard of the web browsers and adapt to CSS variables like all the other modern browsers seem to handle without incident (I am yet to try “Winamp Browser” to see how it displays on the audio player browser.).

I will see how it displays on Mike’s tablet IE display tomorrow when he’s back in town. It has the capability to adjust the browser window size and is not a desktop computer.

The thread you linked had some discussion about detecting hover effects on touch devices since they behave differently on those types of devices. The tablet devices I have tested do act differently with respect to the hover state (and the class of active in this case), but every device I have tested does seem to respond and show the hover image. If it doesn’t, the effect isn’t essential and can be neglected if/when the .imgbox images don’t behave as intended.

There wasn’t enough time :stopwatch: for me to continue to play with the content body designs and implement some test code on this Tuesday, but I aim to spend a bit of time in the beginning of the day tomorrow to see what I can come up with. I guess I’ll continue the discussion here, or I can make a new thread targeting whatever roadblocks I might come up against.

-ty :smashy:


#25

IE is a discontinued browser. Microsoft’s Edge is their new kid on the block. It isn’t bug free, but IE11 was a disaster from the get-go (probably intentionally to “frustrate” people into upgrading to Win10 and Edge). Sorry, being cynical.

Will look for you again whenever you are ready. cat-sm


#26

Speaking of discontinued browsers, here is the site display on “Winamp Browser” :laughing: :

I don’t think that browser understands the border-image property.

Umm… Who cares?? I should sneer at this??


#27

I’ve never heard of Winamp browser. It quick search leads me to believe it is outdated. I’d say it’s your site so it’s your call. How likely are any of your customers to be using it?

https://caniuse.com/#search=border-image


#28

Hiya ronpat :cat: ,

Did ya have a good weekend in the cold weather :snowflake: ?

I would wager there is something close to a 0% chance that anyone uses “Winamp Browser”. There is also probably a low chance that anyone worthwhile is using anything less than a modern browser. I was just being a little overly eager to test the page in any different type of browser I can think of.

Now, I have made a substantial update to the test site. I added the majority of the sample content, including “test images” (colors will need to be experimented with as things progress.), h2 elements displayed as list items, floated images and their containing divs, links at the bottom, copyright in the footer, etc. Here is the HTML I added so far:

	<div class="bodycontainer"> <!-- body wrap -->
		<div class="trow">
			<div class="contentleft tcell"></div>
			<div class="contentmid tcell">
				<p class="slogan">&quot;Let Us Help You<br>Become a Freight Pro!&quot;</p>
				<div class="floatRight">
					<img src="style/truck.jpg" title="Big Truck" alt="Here is an illustration of a flatbed truck with a shipping container secured to the trailer." width="290" height="250">
					<h2>Who We Are</h2>
					<p>We like to ship things. Trucking companies are annoying, so we make it better for you. We give you a fair freight cost. When things go awry, you complain to us, and we fix it for you. We promise we won&apos;t express our deep anguish to you when you complain too much. I&apos;m sure I will replace this sample text before a customer reads this. I need a new job. We are freight brokers for both full truckload and less&ndash;than&ndash;load (L.T.L.) shipments. Exporting and border customs suck. Please manage your own customs and port manifests. I don&apos;t like that part of freight world.</p>
				</div> <!-- end floatRight -->
				<div class="floatLeft">
					<img src="style/forklift.jpg" title="Forklift" alt="This is a forklift that is used to load pallets and crates into a truck." width="290" height="200">
					<h2>What We Do</h2>
					<p>Give you quotes. Produce bills of lading. Track your shipments. Manage the carriers. Update your receivers. Answer any questions you might have about the trucking industry. Dispute carrier bills when they make a mistake. A bunch of other stuff in this sample text. Blah Blah Blah. I&apos;m too tired to think of compelling sales copy right now.</p>
				</div> <!-- end floatLeft -->
				<div class="floatRight">
					<img src="style/pallet.jpg" title="Pallet" alt="A pallet is often loaded and secured with shrink wrap as shown in this illustration." width="180" height="190">
					<h2>How You Benefit</h2>
					<p>Lorem ipsum dolor blah blah blah sample text web design development coding graphics CSS LTL shipment PRO number freight brokerage quotes freight class dimensions residential delivery lift gate limited access delivery commercial dock forklift</p>
				</div> <!-- end floatRight -->
				<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 contentmid -->
			<div class="contentright tcell"></div>
		</div> <!-- end table row -->
		<div class="contentfooter tcell"></div>
	</div> <!-- end body container -->

…and the new styles:

/* content body design */
.bodycontainer {
	display:table;
    overflow:hidden;
	max-width:770px; /* keeps the body box slightly slimmer than the header at max widths */
	margin:0 auto;
	margin-top:0;
	padding:0;
}
.trow {display:table-row;}
.tcell {display:table-cell;}
.contentleft {
	background:url("bodyLR.png") 0 0 repeat-y;
	width:59px;
}
.contentmid {
	background:#FFF;
	width:80%;
	margin:0 auto;
}
.contentright {
	background:url("bodyLR.png") 50% 0 repeat-y;
}
.contentfooter::before {
	background:url("bodycorners.png") 0 0 no-repeat;
	width:59px;
}
.contentfooter {
	background:url("bodybotcenter.png") 0 0 repeat-x;
}
.contentfooter::after {
	background:url("bodycorners.png") 100% 0 no-repeat;
	width:59px;
}

/* content elements */
p.slogan {
	text-align:center;
	font-size:2em;
	font-weight:bold;
	font-style:italic;
	font-family:"Comic Sans MS";
	padding-top:30px;
}
h2 {
	font-size:2em;
	margin-left:1.5em;
	display:list-item;
	list-style-type:disc;
}
.floatRight img {
	float:right;
    border:3px inset #000;
    width:auto;
    max-width:55%;    /* tweak as desired */
    height:auto;
}
.floatLeft img {
	float:left;
    border:3px inset #000;
    width:auto;
    max-width:55%;    /* tweak as desired */
    height:auto;
}
a {
	display:inline-block; /* this isn't enabling me to break the anchor from the block level. Can't apply left margins or move them to the center. */
	text-align:center; /* won't move to the center yet */
	margin-top:15px;
	font-size:2.5em;
}
a:hover, a:active {
	text-decoration:none;
	color:#42adf4;
}
a:visited:hover, a:visited:active {color:#69198b;}
h4 {
	text-align:center;
}

Obviously, I’m adding a lot in a short period of time, and I will have to address a lot of issues as I work through this. :roll_eyes:

What I want to focus on is the layout images that I have improperly implemented. Sometimes I really wonder how much I truly know… :slightly_frowning_face: I get discouraged when I fail to do something as simple as displaying my background images properly. I’ll figure it out. :pray:

I started off by using an image with the complete design which should look like this:
bodybox

When implemented similarly to the .border element using a line like this:
border-image:url("bordergradient.png") 33.3% 33.3% repeat; /* 300x300 */
the design does appear and scales well with the browser, but it is absolutely tiny.
(I don’t understand what the 33.3% shorthand is referencing here)

I gave .bodycontainer a max-width of 770 pixels so that the body is slightly slimmer than the header at maximum page widths. That looks really nice.

However, I think the best way of implementing this is by using a table display and the .tcell and .trow presets, but it just doesn’t seem to display at all with the CSS I have erroneously used.

Some more investigation I will do with Firebug or Developer Tools, and maybe I will find the answer faster than someone else does. I’m really trying my best to be self-sufficient. :sunny:

Here are the current images:
bodyimages.zip (233.7 KB)

-ty :smashy:


#29

A couple of quick notes.

(1) Run the current test page through the validator. For me, it shows 16 errors.
Then, move the dev comment block from above the <!doctype html> to somewhere below it.
I usually put it below the <title>, which is the last line in the <head> on your page.
Repeat the test with the validator. For me, it shows no errors.
Lesson: The <!doctype html> declaration should be at the top of the page. No HTML, CSS or space should preceed it with the exception of PHP.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">    
    <meta name="Description" content="Need to ship something? We can help with that! Through a vast library of reliable freight carriers and over a decade of combined industry experience, we can offer a trustworthy transportation service at a fair cost.">
    <meta name="Keywords" content="LTL shipping, truckload shipping, pallet shipping, ship a motor, how to ship an engine, ship an engine, ship a engine">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link href="style/homepage8a.css" rel="stylesheet" type="text/css" media="screen">
    <link rel="prefetch" href="images/headerlogo2.png">
    <title>LTL &frasl; Truckload Shipping with First Rate Logistics</title>
<!--
https://www.sitepoint.com/community/t/centering-layout-for-new-page/307718
FirstRateFreight8
c0de by ronpat (and ty)
-->
</head>
<body>

(2) Can you point me to a URL where I can find the image used to make the “bodybox.png”. If not, it’s OK; I’ll ad lib. :eek:

(3) Google “border-image” to find instructions explaining how to use it and what the 33.3% value in my code for the “banner” section stands for.

(4) Please allow me to recommend that you store your images in an “images” folder (directory). They are not usually found in the “styles” folder. Your call, of course.


#30

I placed the comment within the <head> tag as instructed. The page is validated with no errors or warnings reported.

I uploaded the original vector graphics to the below link, but I’m still unsure if you’re able to manipulate the graphics file.

Since you’ve asked for that file in particular, I’m guessing you’re intending on using the big picture instead of the segments (corners, sides, bottom border). Is border-image your preferred method again? Maybe I had it very close since I had the image scaling responsively, but I didn’t play with the parameters at all.

I did a quick read on the border-image property, so I will now try to translate the shorthand.
The line:
border-image:url("bordergradient.png") 33.3% 33.3% repeat;
is shorthand for:

border-image-source:url("../images/bordergradient.png");
border-image-slice:33.3%;
border-image-width:33.3%;
border-image-outset:0; /* omitted - sets to default value of zero */
border-image-repeat:repeat;

Okay. I can change the code and image files for a new directory. I have no objections.


#31

The image is a vector graphic? It looks like a .png to me. Try posting a link without the https portion of the address. Maybe I can find the code that way.

In the meanwhile, I’ll tinker with it as a .png.


#32

I thought GIMP and Fireworks produce both vector and bitmap graphics. There is a flattened .png version that gets uploaded to the images folder, but there is an editable version that is also in .png (which I’m pretty sure is comprised of vectors). A .png file is produced by Fireworks as a default. Hopefully, this version should be the one that can be edited in a graphics software: www.firstratefreight.net/images/bodybox.png

Edit: There may be a way I can export the vectors so that they can be accessed in other programs. I will see if that’s possible.


#33

The only way I know of to export a graphic with layers is in its native format. But then the recipient’s program has to be able to import and use the sender’s format. GIMP apparently can handle simple vector graphics. OpenOffice/LibreOffice Draw can create vector graphics. Adobe has several products as does Corel. There appear to be many others.

Am attaching a new bodyborder.png image for the bottom content portion of the page.
bodyborder.zip (11.0 KB)
FirstRateFreight8a.html (3.9 KB)
homepage8a.css (5.1 KB)

“Try before you buy.”

I changed the layout of the content portion so it would easily behave responsively. Your original plan would be difficult to implement. If you don’t like this, then we try for your original.

The gradient is no longer part of the border-image. You should be able to add the gradient back with CSS.

There are a couple of className changes to beware of and some deleted table-row and table-cell CSS. You may wish to change the h2 font size at narrower widths in the media queries.

If questions, the wishing well is open. tongue


#34

Ty,

You may want to add a line to one of the media queries to eliminate the margin around the browser window. Doing so will allow about 20px more width for your content.

example:

@media screen and (max-width:600px) {
    body {margin:0;}  /* ADD Me */

#35

Okay. I applied the new styles and images. :sunglasses:
I instantly hated the body border design I created, so I made a new one in the likeness of the fancy bar in the header. That looks a little bit better, although I wish I could get the bars in the middle of the squares, but the gray background assigned to .bodywrap protrudes at the end. I think that border is now fine the way it is.

I tweaked a couple of things, including adding a text shadow to the slogan, keeping the red dashed borders around .left and .right, spacing out the <h4> as close to the bottom as I can get it, etc. For the body margin on the media query you listed, I made the margin 5 pixels since I like the bump of space that the browser provides by default.

Now, I will toss my pennies into the wishing well :fountain: as I dream of the following:

  1. I really want to keep the links clickable within their own text instead of block display. I think the only way to do that is by using a wrapping div which may not be preferable. Either way, I think it’s a small item of not very much importance, but I’m going to play with it a bit.

  2. A gray gradient serving as a shadow at the top of .bodywrap would look very nice as it transitions from the header to the body. Do I need to create a new div for this or add a target to one of the existing elements?

Now for an opinion of whomever may read this thread:
With the Comic Sans font and general cartoon-ish theme of this page, does it look like a kids’ site? I experimented with different fonts, but I couldn’t seem to find a font that gave as much personality as Comic Sans does, but I’m afraid the whole thing looks a bit childlike (though nicely done).

Question about the code:

  1. i don’t understand yet the value round in the border-image property:
    border-image:url("../images/bodyborder.png") 31% round;

Also, for compatibility, isn’t it wise to add in these two lines:

-webkit-border-image:url("../images/bodyborder.png") 31% round; /* Safari 3.1-5 */
-o-border-image:url("../images/bodyborder.png") 31% round; /* Opera 11-12.1 */

??

Thanks for everything.

-ty :smashy:


#36

It’s a repeat value when used in the border-image shorthand property.
border-image-repeat: round;


#37

AFAIK this is “CSS3” so some browsers even in their latest versions may still be in “catch up”. It looks like most recent versions do fairly well with “general support” and it’s the “partial support” that needs to be considered.

https://caniuse.com/#feat=border-image

In any case, you probably mean this anyway, but it should be “add vendor prefixed rules” as in prepend not append. Presuming the non vendor prefixed implementations are better than the older vendor prefixed implementations.


#38

Show me a screen clip of what you are talking about. It should be very possible to center the boxes on the bars, if I understand correctly. … and show me a drawing or clip of what you wish to see so I know the difference. dizzy

:+1:

Are you talking about the 2 links at the bottom of the page? No prob.

Will need to look at the code.

Take a look at this hands-on demo and see if it helps:
https://www.w3schools.com/csSref/playit.asp?filename=playcss_border-image
and be sure to read the link posted by @Ray.H for a technically accurate description.

Probably not needed. The reference that @Mittineague linked to “caniuse” (I think I’ve mentioned “caniuse” before, too :slight_smile: ) should tell the story. While I doutbt they are necessary, there is no harm in including them before you list the un-prefixed property. (The un-prefixed property should be the last of the group listed.)


#39

Yes, I bookmarked the caniuse.com site for the future. Though, I am not aware of what is meant by “un-prefixed property”. I’m guessing @Mittineague means that I need to have another property, say background with the shorthand, for compatibility of older browsers (Winamp Browser being a terrible example).

I did take a look at the demo version of the border-image and border-image-repeat and tried out the different values of border-image-repeat. I found that round means that the border image is repeated a whole number of times and is scaled to fit the area of the element it is applied to. This is different than the value of repeat.

Here is an image of the body border with the bar centered within the end squares (just like the fancy bar in the header). I don’t see how this is possible to apply without the gray background-color protruding from the sides, i.e.:
bodybox
Capture

I think I’m deliberating over something of very little significance. :rofl: It does look a tad better like this, though.


#40

One way I think of it is (not entirely correct) like this

  1. a new CSS property makes it to “yes, this should be a thing” eg. “awesomeness”
  2. browser X begins working on their code to make it a reality in their browser.
  3. browser X gets it “working” but the way they do it isn’t really the way it should be done
  4. to differentiate their way from the “ideal” way, they make their browser work with the rule when it begins with “x-” eg. “x-awesomeness”
  5. when browser X gets their browser to work with the “ideal” they support it and the “x-” prefix is no longer needed. eg. “awesomeness” will work.

During the transition between some using an older browser version and others using a newer browser version, both types of CSS rules should be used. When a browser sees a rule it “understands” it will continue. eg.

tag { 
  awesomeness: 100%;
  x-awesomeness: 100%; 
} 

vs.

tag { 
  x-awesomeness: 100%; 
  awesomeness: 100%; 
} 

In the first, a newer version of the browser will do “they want awesomeness, oh, wait, they want the older less perfect version x-awesomeness”

In the second, an older version of the browser will do “they want x-awesomeness, huh? I don’t know what awesomeness is, skip it”. A newer version will do “they want x-awesomeness, oh, wait, they want the improved awesomeness”.

tl;dr put vendor prefixed rules first so a user will get the “awesomeness” when their browser supports it.