Display, Differences between computer and mobile screens Options

[TW Allen]

Noobie here.

Ref: https://allendesigns.com/residential_remodel_projects.html
and:
https://allendesigns.com/projects/22310/22310.html

Both display as I intend on my computer. However, on my mobile screen, everything is aligned to the left margin.

Why is that?

Thank you,

Bill

[Jason Knight]

Alright, let's talk the CSS of my rewrite. Follow the bouncing ball at:

https://cutcodedown.com/for_others/TWAllen/...llen.screen.css

I start out with what's called a "reset". Resets exist because what things look like was never supposed to be any of HTML's business, so prior to CSS every browser maker had their own rules. These preferences slipped into the early CSS implementations so that every browser maker's "defaults" didn't agree with each-other. A reset attempts to fix that since even today, gecko (firefox), blink (chrome-likes), and webkit (safari) are NOT all on the same page. FF is particularly egregious in this regard.

There are smaller resets like the so-called "universal reset" of:

CODE

* { margin:0; padding:0; border:0; }

But that can wreak havoc on styling form elements between FF and RoW. (Rest of world).

There are larger resets like Eric Meyer's "Reset Reloaded" or the bloated trash found in most frameworks, but those give resets such a bad name many developers rail against the very concept of using a reset at all... which leads to even more code than the reset and inconsistent broken layouts across browsers and devices.

At half a k, the reset I use is small enough to be easily dismissed in terms of "performance hit", only targets what needs to be fixed, sets up useful stuff like making width be around the border not inside the padding, and is what I would say lands it in the Goldilocks zone.

After the reset I set up the general page behavior.

CODE

body {
    text-align:center;
    padding:0 0.5rem;
    font-family:arial,helvetica,sans-serif;
    background:url(images/graybrck.jpg);
    color:#069;
}

I center text site wide, and add a minimum side gap so when the screen gets small the text isn't rubbing up against the display edge compromising legibility. Apart from that, given what you had for code you should be able to digest that.

CODE

body > header,
body > main {
    max-width:52rem;
    margin:1rem auto;
}

The primary outer containers get a max-width on them so that long paragraphs don't become unwieldy and hard to follow. Max-width is your friend, use it. A lot. The auto-margin centers the header and main tag, and the top/bottom margins space things nicely.

CODE

body > header {
    margin-bottom:2rem;
}

Give the header an extra push. Yawn.

CODE

body> header > hgroup,
#mainMenu ul {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}

body> header > hgroup {
    flex-direction:column;
}

Flex is fun stuff. It can be used to make things behave a lot like tables without using tables for layout. We want the menu UL as a line, we flex it. We want things centered horizontally and vertically, we go ahead and set that too. Because the header HGROUP and #mainMenu UL get the same flex, I put both seelctors here. The only difference is that HGROUP flexes as a column.

Why flex a column there? If we just set border-bottom on the H1 for that line you had, we'd end up having it go full screen width. Setting a manual width could kinda do it, but it's better to just have stull like that work automatically. The child of a flex-box when set to "center" behavior on an axis will shrink to the size of its content! Boom problem solved. Thus that divider goes on the H1 easy.

CODE

h1 {
    font-size:2.625rem;
    border-bottom:0.25rem solid #069;
}

Notice the use of REM for font size. Again, PX is junk. Don't use it, you're just making your pages less accessible.

The menu is pretty simple:

CODE

#mainMenu ul {
    list-style:none;
    gap:5rem;
    margin:1rem 0 2rem;
}

#mainMenu a {
    display:block;
    padding:0 1rem
    font-size:2rem;
}

Perfectly good ID tells us what we're styling. Turn off bullets, we already set it to a flex container defaulting to row, and "gap" sets the space between our LI. Margin to space things apart. The anchor I like to set to display:block just in case I later want to add vertical padding and have it actually obeyed.

The paragraphs inside <main>...

CODE

main p {
    margin:1rem 0;
    line-height:1.5;
}

Get margin top and bottom, and a taller line-height. With long lines of wrapping text a taller line-height can greatly improve legibility whe trying to follow it as it wraps back and forth. Combined with our max-width restriction on <main>, we get far more legible text than you had.

Though side note, this giant fist-in-the-face 24px flow font is a bit of a wonk, even when stated as 1.5 rem. Real "punch in the face".

CODE

section:not(:first-child) {
    margin-top:1rem;
    padding-top:2rem;
    border-top:0.25rem solid #000;
}

top margin and top padding sace the border nicely. You had a <hr> there which is just the wrong markup since it would be redundant to both <section> and <h2> from a semantic (grammatical / structural) standpoint.

Remember -- or if you've not heard this -- <hr> does NOT mean "draw a line across the screen". It means horizontal rule, as in a GRAMMATICAL break in thought that doesnt' warrant a new <seciton> or numbered heading.

Almost all HTML tags have MEANINGS and that means if you're choosing your tags -- and by extension attributes, classes, or id's -- based on appearance when writing your markup, you're choosing all the wrong code for all the wrong reasons! Anyone telling you otherwise is packing your fudge.

With raisins and peanuts.

Finally the plate image:

CODE

.plate {
    display:block;
    margin:1rem auto;
    max-width:95%;
}

Since we just want it centered display:block removes a ton of headackes, simple margin to center and push it away from sibling content, and a max-width so the image is forced to shrink as the display gets too small for it.

And... that's it. How I'd go about what you were trying to do. Should work well across most if not all mobile devices, though again those monster font sizes are probably not doing you any favors.

Take your time, digest what I've written, go over it, and if you have questions fire away.

I'm here to help and educate.

[TW Allen]

First of all, please recommend a good reference for learning HTML properly. I have a couple, the latest one published in 2019.

Thank you

[Jason Knight]

First of all, please recommend a good reference for learning HTML properly. I have a couple, the latest one published in 2019.

Sadly most of what's in print -- even new -- is 20+ years out of date because the authors themselves aren't qualified to be writing about it.

What I recommend to most beginners is the MDN website. The Mozilla Developer Network. It follows the specifications, translates the spec into something us "mere content creators" can understand, and doesn't come with the "baggage" of disinformation, misunderstandings, incomplete explanations, web-rot, and sometimes outright lies you find on sites like W3Schools or TutorialsPoint. Or worse the agenda of trying to sell you something like meaningless "certifications"


I don't agree 100% with everything they say -- big shock -- but it's hard to go wrong with MDN's Tutorials:

https://developer.mozilla.org/en-US/docs/Web/Tutorials

OR any of their references. Once you have the syntax of HTML down, I would suggest just reading the HTML reference for each and every tag. Might seem like a slog, but each of those pages aid in better understanding it.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

https://developer.mozilla.org/en-US/docs/We...cript/Reference

Don't try to memorize every little detail. Just learn what exists, and when you use something refer back to the reference to make sure you're using it right and/or what it's for. You can't possibly remember it all, just make yourself aware of what options exist.

Why light money on fire with books that aren't even usually correct, on something that is inherently free online?

In the HTML reference though there is one BIG thing to learn. What tags go where and when. There are rules like the fact that the only valid child of a OL or UL is LI. Or the only valid children of a TR is TD and TH. That is where most beginners make the most mistakes, tossing tags in with no care for the rules.

Like if you go to MDN's reference page for the LI tag and scroll down to the technical summary:

https://developer.mozilla.org/en-US/docs/We...chnical_summary

Permitted content Flow content.

Permitted parents An <ul>, <ol>, or <menu> element. Though not a conforming usage, the obsolete <dir> can also be a parent.

You'll learn them over time, but really if you are using a tag research what is and is not allowed. This is why I point people at the element reference as a learning tool because you need to know what tags exist, what they are for structurally and grammatically and where they can and cannot be used.

A detail a lot of tutorials and books seem to gloss right over.

This post has been edited by Jason Knight: Nov 8 2023, 07:46 PM

[TW Allen]

First of all, please recommend a good reference for learning HTML properly. I have a couple, the latest one published in 2019.

A detail a lot of tutorials and books seem to gloss right over.

Sorry it has taken me so long to respond. Billable hours got in the way.

https://allendesigns.com/residential_remodel_projects.html looks good.

https://allendesigns.com/projects/22310/22310.html looks good.

The rewrite cleaned out a LOT of code!

I'm working on https://allendesigns.com/index.html now. It's more difficult.

First of all, in the section headed by "Types of Projects:", I want that aligned left and a unordered list with bullets. I can get it to align left, but I cannot get the bullets.

I'm also struggling with image sizing to work with both a large monitor and a mobile screen without using pixel sizing. If the images are large, it pushes all of the text to the left on the mobile screen. If I make it small, like 300px, it looks fine on the mobile screen. But, as soon as I make it larger, say 600px, then the text gets pushed off to the left on the mobile screen.

What am I doing wrong in both cases?

Thank you,