Scaling Images for Viewport Widths (Generic Question)

HTML & CSS
1

Hi all,

I’ve been reading similar threads but still find myself stumped on simply scaling 2 images within a containing div.

These are images of my smiling face and my autograph within the #boxheader section on my legal templates page. Hi, everybody! :grinning:

There is a div nested within the div with the ID, #farewell, within the #boxheader section, and my current attempt at the HTML & CSS is this:

templates.html, lines 30-36

<div id="farewell">
       <div>
           <p>Love,</p>
	       <img src="style/signature.gif" alt="Tyler Smith&apos;s Signature" width="338" height="95">
       </div>
       <img src="style/tylersmith.jpg" title="Tyler Smith" alt="Tyler Smith&apos;s picture" width="140" height="188">
</div>

templatesection.css, lines 207-231

#farewell {
	margin:30px 0 4px 35%;
	/*border:2px solid green;*/
	min-width:485px;
	height:auto;
}
#farewell div {
	float:left;
	/*border:1px solid #9F0;*/
	height:auto;
	min-width:60%;
}
#farewell div p {
	text-align:center;
	font-weight:bold;
}
#farewell img { /* this is for the monkeyboy image */
	height:auto;
	max-width:30%;
}
#farewell div img {
	width:auto;
	height:auto;
	max-width:100%;
}

I would like the images to scale to roughly half of their size (or whatever it takes to look nice on smaller devices) and for the div to be moved to the left in the media queries as needed. height:auto and different width values are ineffectual.

Really grateful to post here and to see if anybody has an approach I haven’t tried yet. I’ve had this account for a long time now.

Hope you’re doing well. :star_struck:

2

As a start I would change the farewell and farewell div rules to this:

#farewell{
    margin:30px 20px 10px;
    display:flex;
    min-width:0;
}
#farewell div{
    float:none;
    border:border: 1px solid #9F0;
    min-width:0;
    margin-left:auto;
}

That will get some semblance of normality back into the page.

You have a number of logic errors in that you give a min-width of 485px which immediately rules out most phones but you also gave it a margin-left of 35% thus ruling out most tablets and making the element too wide for small desktops also.

Your orange buttons are also pushing too wide on small screens and do not wrap in time so you will need to look at that. Maybe something like this:

#tablenav div > div {
    display: inline-block;
    width: auto;
    margin:6px;
}
#tablenav div a{
    margin:0;
}

That was another logic error because how d you know what 27% + 12px means at different screen sizes. At smaller screens the three items push the page wide because they are larger than the container. You need sensible and controllable logic in responsive design and not rely on guestimates:)

The code above will fix those errors and the image will align right and scale with viewport and the buttons will line up on small screen.

Here are the before and after screenshots:

Before:

www.worldreviewgroup.com_templates.html
www.worldreviewgroup.com_templates.html482×839 67.6 KB

:after:
.

www.worldreviewgroup.com_templates.html (1)
www.worldreviewgroup.com_templates.html (1)456×845 88.9 KB

1 Like
3

Hey, Paul.

Ah, so a quick review of the display property yields the flex value that, of course, I had not tried yet after roughly 13 years of exposure to CSS. :lying_face:
This is what aligns the child elements within the #farewell div and eliminates the need for a float. It scales the images proportionally to “flex” across its container. Imagine being the CSS developers that arranged for these behaviors and how the browser translates the syntax to do all of this…

Oops. I’ll be careful not to mix elastic and definitive values.

I’m assuming float:none is required on the nested #farewell div. Haven’t removed that line to see how it alters behavior.

min-width:0… I don’t know where this rule comes from.

My little message box is complete now! Looking good in the neighborhood. :sunglasses:

I could make a new thread addressing your bonus addition about the table navigation section which is broken. I had only the time to set up the full-width prototype thus far, but I’ll go on about this portion of the page in this response.

Your second code snippet was added at an arbitrary point in the media queries (until I decide where the right switching point is between the horizontally and vertically oriented styles). It looks great, too, though I will close the vertical margin in between the two nested divs.

For the SP reader, here is the markup structure at present for #tablenav:

templates.html, lines 39-67:

<section id="tablenav">
			<h3>Click to show a table: (under construction)</h3>
			<div>
            	<div>
					<a href="javascript:void(0)" onclick="showStatusCorrection()">Status Correction</a>
                </div>
                <div>
					<a href="javascript:void(0)" onclick="showA4V()">Debt Discharge</a>
                </div>
                <div>
					<a href="javascript:void(0)" onclick="showDefense()">Civil &amp; Criminal Defense</a>
                </div>
			</div>
			<div>
            	<div>
					<a href="javascript:void(0)" onclick="showForms()">Forms</a>
                </div>
                <div>
					<a href="javascript:void(0)" onclick="showAdminProcesses()">Administrative Processes</a>
                </div>
                <div>
					<a href="javascript:void(0)" onclick="showNotaryPresentments()">Notary Presentments</a>
                </div>
			</div>
			<div id="expandhide">
				<a href="javascript:void(0)" onclick="hideTables()">Hide All Tables</a>
				<a href="javascript:void(0)" onclick="expandTables()">Show Me Everything!</a>
			</div>
		</section> <!-- END OF TABLE NAVIGATION SECTION -->

The design is still broken, but I need a break and will be back to the CSS grind shortly.

I honestly am interested in changing the HTML structure in the media queries. I’m thinking of 3 rows of 2 becoming 2 rows of 3 (with 3 nested divs for rows) until, finally, the items stack vertically using inline-block display. Since the table switcher will depend on some simple JavaScript functions I haven’t written yet, I’m guessing it would be okay to use JS to switch to these visual goals. Kind of like this one called Isotope.

Even the tables, themselves, are very unfinished in their styles. I tried changing the content of the links in the third column at narrow widths, but it’s not changing from “Download It!” to “Download”:

line 332:

tbody tr td:last-of-type a { content:"Download"; }

Thanks, all. It’s truly an honor to be here.

4

You can’t change the html content with css… You can hide it and add something new but you can’t change the html itself.

The content: property only refers to the psuedo:class :before or :after and not to normal html elements.

Therefore for your example you could change the colour of the downloadIT text to transparent and then shim the word download on top.

e.g.

tbody tr td:last-of-type a {
  color: transparent;
  position: relative;
}
tbody tr td:last-of-type a:before {
  content: "Download";
  pointer-events: none;
  color: blue;
  text-decoration: underline;
  position: absolute;
}

www.worldreviewgroup.com_templates.html (2)
www.worldreviewgroup.com_templates.html (2)1157×624 206 KB