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

responsive-design

#1

I have 2 issues that I’m now trying to tackle.
The first is the one that is more important - how to “snap” in a design to a neat width on smaller devices. On my first website, worldreviewgroup.com, some styles were implemented that make the size appear the same on mobile phones with different display sizes. I can’t quite remember how parts of that responsive design add up, but it may have something to do with this following code:

/* lines 85-93, homepage.css */
@media (max-width:600px) {
    .head .logo {background-position: 50% -156px;}
}
@media (max-width:470px) {
    .head .logo {background-position: 50% -306px;}
}
@media (max-width:390px) {
    .head .logo {background-position: 50% -466px;}
}

@media screen and (max-width:33em) {
    .table {display:block;}
    .table .tcell {
        display:block;
        width:auto !important;
        max-width:260px;
        margin:0 auto;
    }
    .table .trow {
        display:block;
        padding-top:.3125em;
    }
    .table label {
        text-align:left;
        white-space:normal;
    }
}

I am trying to come up with a strategy on how to implement something similar for my shipping agency website project @ firstratefreight.net

I’m lost, and my hands are tied… again. :earth_americas: :zipper_mouth_face:

Other than somehow coming up with a design that relies on percentage size values, I don’t even know where to start to accomplish this. What I have uploaded to firstratefreight.net currently does display somewhat well on a mobile device, but it doesn’t “snap in” like the World Review Group page does. The obvious guess is to assign a width to .headercontainer for small viewports within one of the media queries. I just don’t know what to put yet.

I would really appreciate if someone can push me in the right direction. I’m sleep-deprived and overworked as this project needs to be getting close to done soon. :tired_face: Oh, well, I can’t rush this.

The other issue is kind of small, but it is this: The design tends to lose its symmetry and alignment by about one pixel when I zoom in and zoom out in the browser (tested with FF, latest IE, and Chrome).

This appears nicely at plain 100% zoom.
1

133% zoom (Bars don’t neatly align.)
2

I wonder if this has to do with .png images, but .jpg images do the same thing. Weird. I don’t think it has to do with my coding.

Thanks for everything over the years, Sitepoint Community.

To success,

-ty :smashy:


#2

What do you mean by “snap in”? Does it go to 100% width, or not?

It would be helpful if you added comments line by line for your css so we can understand what it is doing.


#3

Steve,

No, First Rate Freight site gets very close to 100% width, but it spills over a bit.

Here is what the World Review Group page looks like on my phone.


(It looks like it is neatly “snapped in” on other phones, too.)

This is how the draft of my First Rate Freight site header looks on my phone:


(It definitely displays nicely, but it’s not as precisely fitting as the other one is.)

It was pointless for me to copy those styles from World Review Group since I quickly discovered it is irrelevant to my First Rate Freight site and probably confuses the reader of my question, but I’ll still try to explain it to the best of my level of CSS understanding:

@media (max-width:600px) {     /* at max width of 600 px, do the following: */
    .head .logo {background-position: 50% -156px;}    /* change the logo image background position to its next state */
}
@media (max-width:470px) {
    .head .logo {background-position: 50% -306px;}    /* change it to the next display state */
}
@media (max-width:390px) {
    .head .logo {background-position: 50% -466px;}    /* do it one more time */
}

@media screen and (max-width:33em) {
    .table {display:block;} /* div with the class of table is in the e-mail form submission, changes to block level display */
    .table .tcell {
        display:block;
        width:auto !important; /* width is not important... I think */
        max-width:260px;
        margin:0 auto;
    }
    .table .trow {
        display:block;
        padding-top:.3125em;
    }
    .table label {
        text-align:left;
        white-space:normal;
    }
}

Maybe this is as simple as removing the width with that non-standard !important declaration on the width of .headercontainer.


#4

If you create a free codepen at https://codepen.io/ then others will be able to comment on the underlying code and pinpoint what is happening.


#5

ty,

Written as an experiment. Please try this and see if it has any appeal to you. I wrote this a few days ago so the down arrows are not included.

Images needed:
images.zip (406.6 KB)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>FirstRateFreight4</title>
<!--
https://www.sitepoint.com/community/t/centering-layout-for-new-page/307718
FirstRateFreight4
code by ronpat
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
body {
    background:url("images/bgdark.jpg") repeat 50% 50%;  /* 50x50 */
}
.outer {
    max-width:800px;
    width:90%;
    background-color:#fff;
    margin:0 auto;
}
.border {
    border:100px solid transparent;
    border-image:url("images/borderimage.png") 100 100 repeat;  /* 300x300 */
    overflow:hidden;
}
.freightwrap {
    padding:0 5%;
    font-size:1.875em;
}
.freightwrap::before,
.freightwrap::after {
    content:"";
    display:block;
    font-family:"Comic Sans MS";
    font-weight:normal;
    font-style:italic;
    text-align:center;
    margin:.25em auto;
}
.freightwrap::before {
    content:"Welcome to..."
}
.freightwrap::after {
    content:"Please scroll down"
}
.imgbox {
    padding-top:67.60%;
    background-image:url("images/headerlogo.png");  /* 500x676 > 500x338 */
    background-repeat:no-repeat;
    background-size:cover;
    background-position:50% 0;
}
.imgbox:hover {
    background-position:50% 100%;
}
/* media queries scale the residual space beside the outer box, the width of the border image, and the font-size. */
@media screen and (max-width:800px) {
    .outer {width:93%;}
    .border {border-width:80px;}
    .freightwrap {font-size:1.625em;}
}
@media screen and (max-width:700px) {
    .outer {width:95%;}
    .border {border-width:60px;}
    .freightwrap {font-size:1.5em;}
}
@media screen and (max-width:600px) {
    .outer {width:97%;}
    .border {border-width:40px;}
    .freightwrap {font-size:1.375em;}
}
@media screen and (max-width:400px) {
    .outer {width:auto;}
    .border {border-width:30px;}
    .freightwrap {font-size:1.125em;}
}
    </style>
</head>
<body>

<div class="outer">
    <div class="border">
        <div class="freightwrap">
            <div class="imgbox"></div>  <!-- 500x338 (500x676) -->
        </div>
    </div>
</div>

</body>
</html>

Can you post the image(s) used to make the fancy bar near the edge of the border? I would like to try to put the fancy bar on a transparent background.


#6

ronpat,

I might have to get your name tattooed on my tookus one day…
Am I allowed to say that here? Oh, well… out with it! :man_dancing:
Well, maybe I’ll just leave the ronpat signature in the code and consider it a present for my 30th birthday (tomorrow). :birthday: Other than that, I’m exhausted and stressed.

Overall, this is really close to what I’m after. The color scheme with that purple-ish gradient, the fancy bar, and the image hover looks absolutely fantastic. I had a great concept of what the header should look like, and I know what will make the body of the page look stunning with an original image I designed. You did this in roughly 90 lines less than I had, and you are using the entire box in 1 image. Interesting. You utilized the :before and :after targets. I was using :hover and :active targets on divs because I’m a n00b (A div can’t be “active” or highlighted). I will get a chance to study this more in depth after I count some sheep. :sleeping_bed:

It’s been uploaded as the work in progress to the live site now, but I have my original files stored in backup.

I do have some thoughts on this. I’m not sure what you think of some of some of this.

-I had the “welcome to” and the “scroll down” in the HTML if there ever was a screen reader (never heard of anyone using one, let alone a prospective shipping customer). I also don’t see the HTML accessible “First Rate Logistics” in there, either. Maybe you left those out on purpose. Also, when the browser gets small, there’s no need for the “Please scroll down.”. I’ll edit that out in the media query section.

-I will make a new purple box that doesn’t have the original fancy bar on it so as to make room for the new and improved fancy bar. Here are the files with the new and improved fancy bar with one of the files placed on said transparent background. Obviously, I don’t know how you intend to arrange it and in how many files. Hopefully, these .png files are able to be manipulated in your graphics software (GIMP / Fireworks / etc.)
fancybar.zip (126.7 KB)

-In my e-mail signature for work, I have the First Rate logo in my e-mail without all the ornamental stuff (the little white truck, the forklift, the tree, etc.). I also removed the intensity of the shadow. That is solely for readability (and the fact that you can’t tell what those things are when they are microscopic). Readability is sovereign above all. I don’t know what your position is on this, but adding the second state without the ornamental swag might be worth it for the viewer. It looks like this (without the gradient bars I had in my original page design):
new%20first%20rate%20logo%20small%20version

-I still like my green dashed border, but maybe you hate it. I’m just fine without it.

That’s about all I can think of right now. It really looks majestic.

I was doing so well and learning so much all on my own, but this is the example to follow since your way is better thought out than mine is / was and resulted in less bloated code and not a 938KB image that essentially only changed once (looked clunky and less fluid than your experiment). Your experiment is my thesis.

No worries about the arrows for now. I’ve got to turn them a shade of yellow, but all of that’s to come next after I break out of “the box”. Like the World Review Group project, the arrows will go away at slim viewport widths because the content body will be right there near the top of the page (a very short blurb of “Who We Are” / “What We Do” typical stuff). There will be a total of 3 pages to our freight agency’s website (comprising of only me and my biz partner).

I can’t say thanks too many times.

-ty :smashy:


#7

Looks like it’s a day later than I realized already.

Happy Belated Birthday, ty biggrin Hope you had a great day.

bday_2


#8

Ty, the “images needed” included a 300x300 border image. Can you make a duplicate without the ornamental bar for me? I want to be sure the gradients in the two images match.


#9

Hey Ronpat,

Here is the ornamental image without the bar. I already uploaded it to the live site along with the .freightwrap logo image. I doubt the gradients match up perfectly to the original, but I can check that. For the logo image, I’m thinking it’s probably best to stick with one image hover state. Things look pretty readable to me even on my mobile phone. On the desktop at low widths, things look small, but I don’t think it warrants another hover state that’s smaller. If I move to pixels instead of percentages, I’m guessing that will throw off the fluidity of the image.

boxborder


#10

As long as you are happy with the image, it’s fine! I remember that you use a lot of creative grapics, so I’m trying to keep my submissions from drifting [very far] off target. :tongue:

This is another experimental submission whose sole purpose is to tweak the position and size of the ornamental bar over the gradient background. It is a cosmetic mod… ie. just for looks.

See what you think.

new images: images5.zip (7.7 KB)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>FirstRateFreight5</title>
<!--
https://www.sitepoint.com/community/t/centering-layout-for-new-page/307718
FirstRateFreight5
code by ronpat
The size and position of the ornamental bar changes with the width of the viewport
  but less than that of the gradient so it remains clearly visible.
-->
    <style>
:root {--boffset:8px;}  /* CSS variable.  border offset for ornamental bar. */
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
body {
    background:url("images/bgdark.jpg") repeat 50% 50%;  /* 50x50 */
}
.outer {
    max-width:800px;
    width:90%;
    background-color:#fff;
    position:relative;
    margin:0 auto;
}
.outer::after {
    content:"";
    border:14px solid transparent;
    border-image:url("images/ornament.png") 14 repeat;
    position:absolute;
    top:var(--boffset);
    left:var(--boffset);
    right:var(--boffset);
    bottom:var(--boffset);
    pointer-events:none;  /* Required! to prevent ornamental bar overlay from blocking clicks or hover to .imgbox.  MUST TEST touchscreens! */
}
.border {
    border:100px solid transparent;
    border-image:url("images/bordergradient.png") 33.3% 33.3% repeat;  /* 286x286 */
    overflow:hidden;
}
.freightwrap {
    padding:0 5%;
    font-size:1.875em;
}
.freightwrap::before,
.freightwrap::after {
    content:"";
    display:block;
    font-family:"Comic Sans MS";
    font-weight:normal;
    font-style:italic;
    text-align:center;
    margin:.25em auto;
}
.freightwrap::before {
    content:"Welcome to...";
}
.freightwrap::after {
    content:"Please scroll down";
}
.imgbox {
    padding-top:67.60%;
    background-image:url("images/headerlogo.png");  /* 500x676 > 500x338 */
    background-repeat:no-repeat;
    background-size:cover;
    background-position:50% 0;
}
.imgbox:hover {
    background-position:50% 100%;
}
/* media queries scale the residual space beside the outer box, the width of the border image, and the font-size. *//**/
@media screen and (max-width:800px) {
    :root {--boffset:7px;}
    .outer {width:93%;}
    .outer::after {border-width:13px;}
    .border {border-width:80px;}
    .freightwrap {font-size:1.625em;}
}
@media screen and (max-width:700px) {
    :root {--boffset:6px;}
    .outer {width:95%;}
    .outer::after {border-width:12px;}
    .border {border-width:60px;}
    .freightwrap {font-size:1.5em;}
}
@media screen and (max-width:600px) {
    :root {--boffset:5px;}
    .outer {width:97%;}
    .outer::after {border-width:11px;}
    .border {border-width:40px;}
    .freightwrap {font-size:1.375em;}
}
@media screen and (max-width:400px) {
    :root {--boffset:4px;}
    .outer {width:auto;}
    .outer::after {border-width:10px;}
    .border {border-width:30px;}
    .freightwrap {font-size:1.125em;}
}
    </style>
</head>
<body>

<div class="outer">
    <div class="border">
        <div class="freightwrap">
            <div class="imgbox"></div>  <!-- 500x338 (half of 500x676) -->
        </div>
    </div>
</div>

</body>
</html>

I have not tested to see if {pointer-events:none} will allow touch screens to pass touches. That has to be on the top of the list of things To Be Tested. :wink:

Please let me know if I’m drifting astray. boat


#11

First, I updated the files on the site.

Now, there is much to be learned from this update. At least two new concepts were introduced in this update- CSS variables using the --varname declaration and the :root target (which I’m assuming is the root of the document, the HTML). I’m wondering why you chose to use those since it looks like all you meant to use it for was to declare the 8 pixel offset. I have some research to do before posting again.

You also used absolute positioning, taking the ornament bar out of the document flow. I have yet to do my own experimentation to comprehend the practice behind each line that I do not have an understanding of.

I don’t see this as going astray, but what I’m going to do from this update is the following:
-Replicate your ornament.png file with the new fancy bar design that doesn’t have the woven pattern. I think it looks better. :gift:
-Change the --boffset variable to 12 pixels to give it just a bit more space.
-Put the text elements, including a new <h1>, into the markup for accessibility.

Lastly, I have no idea what touch screens and “passing touches” represents in relation to the pointer-events property. I’m sure this comes with experience, but you are aware of things that I had no idea were relevant. I wonder if such a pointer-events value was applied in the World Review Group styles. :thinking:

What really matters here is that I learn to mimic these fluid design and image practices so that I can apply these and ween myself off of the training wheels for the future. :biking_man: Yes, I do use a few creative images, but I am picking up on how you construct the layout images based upon our previous correspondence and how you implement them so as to minimize code and image count / size.

I will write back when ready to proceed.

Cheers,

-ty :smashy:

Edit: Is there a reason why ornament.png is 231 x 231 pixels, or is that just how it turned out?


#12

No special reason. That is just how it turned out. I’m sure it could have been smaller without consequence.


#13

The absolutely positioned coordinates of pseudo-element .outer::after {} - top:8px, right:8px, bottom:8px, and left:8px - determine the outer corners of the fancy bar relative to .outer (the outer box). For aesthetic reasons, I chose to reposition those corners as the width of the viewport changed. To reposition the corners of the fancy bar, one might need to list and change the value of all 4 corners in each media query as the width of the viewport changed. By using a CSS variable, I only had to change the value of the variable in each media query. Saved a dozen lines of CSS and most of all is much easier to modify. :slight_smile:

EDIT:

That value is for the desktop view. It is changed in the media queries as the width of the viewport changes.


#14

Perhaps this will help your get started with the down-arrows.

add to CSS:

.arrows {
    display:block;
    max-width:100%;
    height:auto;
    margin:0 auto;
}

 
Add after closing box “outer”

<img class="arrows" src="images/arrows.png" width="320" height="360" alt="arrows">

#15

Files updated.

I have had a little bit of time to study the update from yesterday. There are a couple of things I am not familiar with.

-Your explanation of why you implemented the variable for the border offset makes sense despite that you can use the find / replace function of text editors like Notepad++ (what I’m using) to replace all the values at once. Either way, it’s a meaningful demonstration. I understand how the variables are accessed now with the var() function, but what I don’t understand is if :root is the only target to declare the variable (never heard of :root). I don’t really think this is worth much deliberation as I’m doing my own research as we go along.

-width:auto is another bit I’m unclear on when it is applied to .outer at line 107 (within the media query for the slimmest widths). I understand that auto widths are determined by the browser, so does this mean that .outer takes 100% width since the widths that come before it seem to lead up to maximum width. I’m assuming that the margins on the outside are still applied by the browser to keep that nice “bump” of space around the border itself, but I am uncertain as to where that margin is coming from.

-Since fancybar.png is implemented using the pseudo-element .outer::after, does its absolute positioning put the bar within the width of .outer, or is it positioned in regard to the page itself (which I doubt)? I will do a bit more experimenting to find out. :zipper_mouth_face:

Other than that, I think I have a somewhat functional understanding as to how this design adds up.

I have made some updates of my own to this :tada:, and here is what I have done:

  1. I implemented fancybar.png with the new design of the ornamental bar. Changing the border offset to anything greater than 10 pixels doesn’t look so good, so I made it 9 pixels and left it at that.

  2. I came to an understanding of your concern of the pointer-events:none;, and I tested this on 2 different touchscreen tablets that I could find using my neighbor’s devices. It seems that the bar overlay on .outer doesn’t prevent the hover effect on such devices (nor on my phone). What I don’t know is where that overlay actually overlaps .imgbox since the image box is nested within the .outer box. The image box should be overlaying the outer box, but perhaps I’m incorrect.

  3. There is now a bit more HTML to make the text accessible like I was discussing earlier.

	<div class="outer">
		<div class="border">
			<div class="freightwrap">
				<p>Welcome to...</p>
				<h1>First Rate Logistics</h1>
				<div class="imgbox"></div>  <!-- 500x338 (half of 500x676) -->
				<p class="scrolldown">Please scroll down.</p>
			</div>
		</div>
	</div>
	
	<img class="arrows" src="style/arrows.png" width="310" height="136" alt="arrows">

Let me know if you disagree with this implementation since it replaces the .freightwrap::before, .freightwrap::after. The scroll down text switches to display:none in the media queries.

  1. I inserted the arrows into the markup after adjusting the design to be much smaller and a more matching color to the overall scheme, but what seems odd to me is that the arrows are HTML accessible whereas the image box is not! If it was me, I would make a div in the HTML and assign the arrows as a background image. Also, I would like to bump it up to overlap the bottom of the border box like such:
    arrowsdemo
    They also need to scale a bit using percentage values and possibly even disappear at small widths.

I know this is a lot, but I’m trying to document the process for my studies and for anyone else that may read the discussion. :open_book:

Shall I upload the simple designs I have for the content body? :paintbrush:

This is looking GREAT so far when compared to what competing brokers have for their websites.
I had some older sets of eyes peer at the logo image at small widths on desktops, and they all say they can read it. The image ornaments are not very discernible, but it’s not worth the extra stress and code to implement a second state to the logo image. Either way, it’s time to move on…

Cheers,

-ty :smashy:


#16

I spent the day addressing some of your questions before I looked at your updated your test site.

The following information is based on your questions before looking at the test site. I’ll have to work with the test site’s code before posting anything more.

Sorry for the oversight.

I’m glad to hear that because that was the intent of the demo. Whether you find a use for it or not in your work is entirely up to you. :smile:


 

The space around the edge of the viewport is coming from the default margin assigned by the browser. You can override/change that margin by assigning body {margin:0}. That is a common “reset” employed by many coders.

 

By design, “auto” is the default value of the width of a block element. The element extends to the maximum available width of the page.
Per the Box Model, the “width” property does not include any padding, borders, or margins assigned to the element.
IF a block element has padding, borders, or margins assigned, but no width assigned, it will auto extend to the maximum available width of the page.
IF a “width” value is assigned to a block element that contains padding, borders, or margins it may overflow the parent element if the parent element has a fixed or maximum width that is exceeded (such as the edge of the browser window).

This can be demonstrated by experiment:
For convenience, drag your browser window narrow until you enter the narrowest range. The presentation should be “normal”.
First, add some horizontal margin to .outer in the last media query.
.outer {width:auto; margin:0 16px;}
Refresh the page.
Observe: The presentation should be squeezed by the horizontal margin.
Next, change {width:auto} to {width:100%} and Refresh the page again.
Observe: the block “.outer” overflows the page. (width 100% + margins 32px = more than 100%)
 

It is relative to .outer. See .outer {position:relative}
As an experiment, temporarily comment out or delete .outer {position:relative} and Refresh the page.
Observe: the fancybar becomes relative to the viewport.
 

You are correct. The overlay with the fancy border is overlaying the .outer box and everything in that box at the coordinates defined by top:, right:, bottom:, and left:.

More after I look at your current code. :slight_smile:


#17

The arrows are a foreground image, the image box contains a background image. Semantically I agree with you… the arrows belong in the background and the images in the imagebox belong in the foreground.

Time to play… cat-sm


#18

Ty, the ball of yarn is getting thick.

(1) I changed the name of .outer to .banner, then added a new .outer. The way I stack boxes, it was overdue.
(2) The headerlogo images have been separated into two images, headerlogo10.png and headerlogo20.png.
(3) The headerlogo images will respond to :hover and JS (to .imgbox toggle classname .active)
(4) .banner::after   has been changed to   .banner::before.
(5) A new   .banner::after   has been added to hold the down-arrows.
(6) The <h1> is hidden behind the banner instead of being hidden offpage. Don’t ask why. :shrug:

Everything moves fairly well, but you haven’t added content yet and that may change everything.

See what you think.

images7b.zip (392.3 KB)

<!DOCTYPE html>
<html lang="en">
<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">
    <title>LTL &frasl; Truckload Shipping with First Rate Logistics</title>
<!--
https://www.sitepoint.com/community/t/centering-layout-for-new-page/307718
FirstRateFreight7b
code by ronpat
-->
    <style>
:root {--boffset:9px;}  /* CSS variable.  border offset for ornamental bar. */
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
body {
    background:url("images/bgdark.jpg") repeat 50% 0;  /* 50x50 */
}
.outer {
    max-width:800px;
    margin:0 auto;
}
.banner {
    background-color:#fff;
    position:relative;
    outline:1px dashed red;  /* TEMP Outline to identify .banner.  TO BE DELETED. */
}
.banner::before {
    content:"";
    border:14px solid transparent;
    border-image:url("images/fancybar.png") 14 repeat;
    position:absolute;
    top:var(--boffset);
    left:var(--boffset);
    right:var(--boffset);
    bottom:var(--boffset);
    pointer-events:none;  /* Required! to prevent ornamental bar overlay from blocking clicks or hover to .imgbox.  MUST TEST touchscreens! */
}
.banner::after {
    content:"";
    width:40%;
    max-width:400px;
    height:20%;
    background-image:url("images/arrows.png");
    background-repeat:no-repeat;
    background-position:50% 0;
    background-size:contain;
    position:absolute;
    top:90%;
    left:0;
    right:0;
    margin:0 auto;
}
.border {
    border:100px solid transparent;
    border-image:url("images/bordergradient.png") 33.3% 33.3% repeat;  /* 300x300 */
    overflow:hidden;
}
/* HTML accessible text removed from the natural flow of the page
   with absolute positioning and hidden behind content with z-index */
h1 {
    position:absolute;
    top:40%;
    left:0;
    width:100%;
    text-align:center;
    z-index:-1;
}
.freightwrap {
    position:relative;
    padding:0 5%;
    font-size:1.875em;
/*    border:3px dashed lime;  /* OPTIONAL green dashed border */
    overflow:hidden;
}
.freightwrap p {
    display:block;
    font-family:"Comic Sans MS";
    font-weight:normal;
    font-style:italic;
    text-align:center;
    margin:.25em auto;
}

.imgbox {
    min-height:100px;
    position:relative;
    text-align:center;
}
.imgbox img {
    width:100%;
    height:auto;
}
.imgbox img:first-of-type {
    display:block;
}
.imgbox img:last-of-type {
    display:none;
}
.imgbox:hover img:first-of-type,
.imgbox.active img:first-of-type {
    display:none;
}
.imgbox:hover img:last-of-type,
.imgbox.active img:last-of-type {
    display:block;
}

/* media queries scale the residual space beside the outer box, the width of the border image, and the font-size. */
@media screen and (max-width:700px) {
    :root {--boffset:7px;}
    .banner::before {border-width:13px;}
    .border {border-width:80px;}
    .freightwrap {font-size:1.625em;}
}
@media screen and (max-width:600px) {
    :root {--boffset:6px;}
    .banner::before {border-width:12px;}
    .border {border-width:60px;}
    .freightwrap {font-size:1.5em;}
}
@media screen and (max-width:500px) {
    :root {--boffset:5px;}
    .banner::before {border-width:11px;}
    .border {border-width:40px;}
    .freightwrap {font-size:1.375em; padding-bottom:5%;}  /* ADDED bottom padding to keep the box looking square at small widths */
    p.scrolldown {display:none;}  /* hides the scroll down text */
}
@media screen and (max-width:400px) {
    :root {--boffset:4px;}
    .banner::before {border-width:10px;}
    .border {border-width:30px;}
    .freightwrap {font-size:1.125em;}
}
    </style>
</head>
<body>

<div class="outer">
    <div class="banner">
        <div class="border">
            <h1>First Rate Logistics</h1>
            <div class="freightwrap">
                <p>Welcome to...</p>
                <div class="imgbox"> <!-- add/remove class "active" to imgbox to toggle imgs -->
                    <img src="images/headerlogo10.png" width="500" height="338" alt="First Rate Logistics">  <!-- 500x338 -->
                    <img src="images/headerlogo20.png" width="500" height="338" alt="First Rate Logistics">  <!-- 500x338 -->
                </div>
                <p class="scrolldown">Please scroll down.</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

Let’s get this portion of the page finalized before adding content.


#19

Files updated. :+1:

Sorry I haven’t been able to respond until now. :crying_cat_face:

I intend on keeping the CSS variable not only for the practical reasons of manipulating many elements with one declaration (one of the main practices of programming logic), but referring to past work like this will be of great significance in future projects (I have some stuff to code after this website is complete.) along with my new book on responsive web design. I have an understanding now of the :root psuedo-class (I thought it was called a “target”) as it targets the “root” tag of the markup (the <html> tag). Unrelated, but I have no idea what other markup language could use a CSS variable (or CSS styles to begin with).

That’s what I figured. Thanks for clarifying. Also, this shows the importance of cross-browser testing as the default margins probably vary from browser to browser. Yes, margin:0; padding:0; are common presets that I have seen you and others use in the past.

I did test the difference between width:auto and width:100%. I was thinking they were essentially the same until now, but indeed, the padding and margins are shown within the width of the viewport when implementing width:auto. 100% width stretches beyond.

Ah, I explained what was going on correctly, but what I did not phrase correctly is that the fancy bar is relative to the .outer div. Without position:relative assigned to the .outer div, then the bar is taken completely out of the flow of the HTML.

Now that you have explained a bit of the theory behind these development practices, we can discuss the page design a bit more.

I am very much in favor of the arrows in the background and logo images in the foreground. I thought it to be unfavorable by many developers to use separate image files for hover effects in favor of sprites, but in order to bring the logo into the foreground, I’m assuming this was the only optimal way to do so and to use display:block and display:none to toggle each state. On the inaugural page load, there is a small “blink” of when the image is first toggled due to the HTTP request, but I’m dismissing that in favor of completing this header box and moving on to the rest of the page design. I trust that what you implement is almost always within good taste of logical design practices.

You have hidden the <h1> element using the method of positioning the <h1> relatively to the .imgbox div and using the z-index property to place it under the image box. I’m wondering why this is better when compared to what I had in using absolute positioning and throwing the <h1> off to the left. :genie:

The arrows look decent where they are, and that yellow color really does complement the color scheme (that I LOVE). There is no need to hide the arrows at slim viewport widths.

If there really isn’t any need to tweak anything else (which I don’t really see any need to), why don’t I get started on structuring the design for .contentcontainer (the div to follow the closing of .outer)??

Lookin’ suave so far. :sunglasses:

-ty :smashy:


#20

The blink that you see now can probably be eliminated by preloading the image.

{display:none} isn’t necessarily an ideal choice. In this case, I believe it is fine because if anything goes wrong with the CSS, the user will likely see both images; nevertheless, there are several other ways of swapping the images to get the :hover effect, that you can file in your developer’s notebook.

One can position the “hidden” image off to the side instead of using {display:none}.

.imgbox {
    min-height:100px;
    position:relative;
    text-align:center;
}
.imgbox img {
    display:block;
    width:100%;
    height:auto;
}
.imgbox img:first-of-type {
    position:static;
}
.imgbox img:last-of-type {
    position:absolute;
    left:-9999em;
}
.imgbox:hover img:first-of-type,
.imgbox.active img:first-of-type {
    position:absolute;
    left:-9999em;
}
.imgbox:hover img:last-of-type,
.imgbox.active img:last-of-type {
    position:static;
}

or One can temporarily overlay the primary image with the :hover image using absolute positioning on the temp image.

.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;
}

or One can place the primary image in the foreground and the :hover image in the background. To show the :hover image, set the opacity of the foreground image to “0”.

.imgbox {
    min-height:100px;
    position:relative;
    text-align:center;
    background:url("images/headerlogo20.png") no-repeat 0 0;
    background-size:cover;
}
.imgbox img {
    display:block;
    width:100%;
    height:auto;
}
.imgbox:hover img,
.imgbox.active img {
    opacity:0;
}
                <div class="imgbox"> <!-- add/remove class "active" to imgbox to toggle imgs -->
                    <img src="images/headerlogo10.png" width="500" height="338" alt="First Rate Logistics">  <!-- 500x338 -->
                </div>

They all work.

If they have time, @SamA74 or @PaulOB might be willing to offer additional opinions, pro or con.

While it’s very unlikely to happen, if the images mysteriously became unavailable, the <h1> title would be visible on the user’s screen, whereas if it were pulled offscreen, it would not be.

This is a recently active thread. You may find it helpful. (just tossing it in)
Image Grid with Interactive Content on Hover