Scaling Images for Viewport Widths (Generic Question)

[etidd]

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!

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.

[PaulOB]

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:

:after:
.

[etidd]

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.
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…

@PaulOB

That was another logic error because how d you know what 27% + 12px means at different screen sizes

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.

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.

[PaulOB]

@etidd

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

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

[etidd]

Okay. I misused the content property.
Surely, you have to use JavaScript to change text content like you said.

I changed your code snippet that uses the :before pseudo-element to this:

templatesection.css, lines 267-271, 315-328

section table a {
	font-size:0.8em;
	margin-top:1px;
	position:relative;
}

@media screen and (max-width:45em;) {
	section tbody tr td:last-of-type a {
		visibility:hidden;
		position:relative;
	}
	section tbody tr td:last-of-type a:before {
		visibility:visible;
		content:"Download";
        color:blue;
		font-size:inherit;
		pointer-events:none;
		text-decoration:underline;
		position:absolute;
	}	
}

My application of this method using absolute positioning of the pseudo-element isn’t working. Obviously, I placed this last code snippet about the pseudo-element in the media queries. Maybe it needs to be in the main styles can be switched using the visibility property.

I want it to say “Download It!” like it always was but to shrink down to “Download” on smaller devices.

edit: I think I know why you implemented position:absolute on the pseudo-element. Is it to remove if from the flow of its parent element, the table cell?

[PaulOB]

@etidd

edit: I think I know why you implemented position:absolute on the pseudo-element. I

I used position absolute because the original text is still in place but just invisible and if I didn’t use absolute the cell would be twice as wide as needed. The absolute places the text on top of the existing text which is invisible.

Your visibility:hidden is just doing the same thing as my transparent text does and does not collapse space. If you want to collapse the space then set the font-size to zero and place the new text without positioning.

e.g.

@media screen and (max-width: 45em) {
  section tbody tr td:last-of-type a {
    visibility: hidden;
    font-size: 0;
  }
  section tbody tr td:last-of-type a:before {
    visibility: visible;
    content: "Download";
    color: blue;
    font-size: 0.8rem; /* will need to be rem or px*/
    text-decoration: underline;
  }
}

…and remember to remove the semi-colon from the media query as that breaks it.

It should be:

(max-width: 45em)

[etidd]

@PaulOB

…and remember to remove the semi-colon from the media query as that breaks it.

I haven’t been making mistakes like this, but I am le tired. Obviously, the semicolon was breaking the first column from aligning to the left (other changes I’m making).

I’m still making a positioning mistake, or the space still isn’t collapsing appropriately, though it does successfully toggle the visibility of the these two link elements. The text still appears small and out of position and without enough space in the downloading column.

The layout is still a work in progress as I have not yet “timed” the media queries, looking back on the post regarding the table navigation buttons. It’s still not complete. I just threw up a picture of the flag on the #boxheader section and haven’t yet centered that into its position.

I’m even needing to make an images folder and edit all HTML and CSS files which will be tedious.

-ty

[PaulOB]

@etidd

I’m still making a positioning mistake,

Just use the latest code I gave you. It’s fully working and does what you want. No need to change anything else.

[etidd]

I still had absolute positioning on the pseudo-element that needed to be removed. All good.

Going back to the original topic of this post, I had another idea to put a picture of the civil flag in the left end of the #farewell div, so the code needs adjustment for the three images now. I want the flag, my signature, and my picture to appear in that order. It’s broken right now.

Of course, I started by nesting a div:

      <div id="farewell">
            	<div>
            		<img src="style/images/civilflag.jpg" title="Civil Flag" alt="It&apos;s the civil flag of the united states of America." width="130" height="78">
                	<div>
                		<p>Love,</p>
						<img src="style/images/signature.gif" alt="Tyler Smith&apos;s Signature" width="338" height="95">
                	</div>
                	<img src="style/images/tylersmith2.jpg" title="Tyler Smith" alt="Tyler Smith&apos;s picture" width="130" height="187">
                </div>
			</div>

Here are some random adjustments I made. Of course, I’m trying to float the #civilflag.

#farewell div {
	display:inline;
	float:left;
}
#farewell div + div {
	float:none;
    min-width:0;
    margin-left:auto;
}

[etidd]

I removed the nested div and the float, but I think it needs to be there as a container.

Here’s what I’m seeing now:

I think I’m going to buy a book soon.

[PaulOB]

Your flag image is being stretched tall because its a flex item and will match the heights of the other flex-items. The flag is a different aspect ratio so you can’t really do that. You will need to change the flex alignment to stop this happening and instead centre the items vertically.

#farewell {
    margin: 30px 20px 10px;
    display: flex;
    min-width: 0;
    align-items: center;/* added*/
}
#farewell img {
    height: auto;
    max-width: 20%;/* reduced fro 30% */
}

#farewell div img {
    width: auto;
    height: auto;
    max-width: 90%;/* reduced from 100%*/
}

I also note that the “Hide all tables” and “show me everything” links are far too wide on a small screen. You need to do this:

@media screen and (max-width:45em) {

    #tablenav div a{
        width:100%;/* added this */
        font-size: 1.3em;
        margin: 0;     
    }
}

[etidd]

Yes, this last bit of code does move things closer.

I was assuming that these images should still use the flex value of the display property.

The flag is still not aligning to the center. It seems that the farewell div might need a definitive width, but that’s just a guess at getting the flag to move to the right, hugging the other images.

I tried to target the flag image, but it’s requiring of me to supply an id tag of #civilflag. Otherwise, the top margin, pushing the flag down with a nice touch, will not apply.

I think this part of the #farewell div inside of the #boxheader section is almost complete. It’s coming along as a really important addition to the page.

---

table navigation buttons:

I think JavaScript may come into play to modify the HTML structure, but at present, before timing the changes in the media queries, this prototype is starting to look acceptable. I had in mind that the 2 rows of 3 would become 3 rows of 2 and then stacked vertically. I can live with this inline-block structure idea it becomes at medium widths, though. I may add document table # 7 at some point (if a seventh link button appears). Of course, this table navigation is broken and unfinished yet.

I made your suggested change of setting the width at 90%, leaving a space cushion on its sides. Maybe I’ll go to 95% for the smallest devices.

The table nav links have a weird space bump to the left on the first links at smaller widths, and the button sizes lose their uniform appearance. It’s just not done yet.

[PaulOB]

@etidd

The flag is still not aligning to the cente

I thought the idea was the flag to be on the left and the signature and image on the right. If you want it all centred then you will need to make these changes.

#farewell{justify-content:center;}
#farewell div {margin-left:0}

[etidd]

That’ll do quite right!

I actually discovered that a max-width of 90% applied to the signature image was causing an undue bump of space between that and my picture. So, I changed it to max-width of 100% after noticing that margins & padding weren’t causing the space bump.

I think I have all I need to finish styling the tables responsively on my own. The table in the header element is looking terrible with a huge font and small widths.

I will make another thread regarding the table navigation design as I begin working on that part of the page soon.

Thanks, Paul.

[etidd]

Going back to post # 6 (using the :before pseudo-element to target a change of link content), I noticed that the pseudo-element does not retain the hyperlink to the document files. It cannot be clicked. Is there a way to retain the hyperlink using this method?

edit: I think there needs to be a hidden link element already in the markup which is displayed at narrow widths. The :before pseudo-element doesn’t behave like a link element. The text underline doesn’t even change like it did before.

[etidd]

I added a second link element in the HTML structure:

					<tr>
						<td data-th="Document Name">Power of Attorney in Fact</td>
						<td data-th="Date Modified">4 &frasl; 1 &frasl; 2024</td>
						<td data-th="Download Document">
                        	<a href="ucc/POWEROFATTORNEYtemplate.docx">Download It!</a>
                            <a href="ucc/POWEROFATTORNEYtemplate.docx">Download</a>
                        </td>
					</tr>

And here is the current CSS code:

/* links */
a {
    display:inline-block;
}
a:hover, a:visited:active, a:before:hover, a:before:visited:active {
    text-decoration:none;
    color:#4d4dff;
}
a:visited {
    color:#603;
}
a:visited:hover, a:visited:active {
    text-decoration:none;
}
section table a {
	font-size:0.8em;
	margin-top:1px;
}
section tbody tr td:last-of-type a + a {
    display:none;
}

@media screen and (max-width:63.75em) {
	header table { width:54%; }
	
	section tbody tr td:last-of-type a:first-of-type {
    	display:none;
	}
	section tbody tr td:last-of-type a + a {
		display:inline-block;
		font-size:1.1rem;
		pointer-events:none; /* is this the problem? */
	}
}

Removing pointer-events:none solved the links not being able to be clicked, but I always liked when the text underline was removed on hover state. It doesn’t do that anymore. Maybe it’s the order of the CSS rules.

[PaulOB]

@etidd

a:before:hover

Should be;

a:hover:before

And the same for the others of course. The hover must come first as you can’t hover the pseudo element itself.

a:hover,
a:visited:active,
a:hover:before,
a:visited:active:before {
  text-decoration: none;
  color: #4d4dff;
}

[PaulOB]

@etidd

Removing pointer-events:none solved the links not being able to be clicked,

Yes that should be removed. It was in place for the previous version which was overlayed on top of the existing space.