ahr aitch

Thank you! That is a great lesson you taught me.

This screen is done with grids and gets 99% of the way to my final goal. Fixing the inter-box spacing and centering text in the Name box will get it the rest of the way. In the screenshot attached, I drew green rectangles around areas that I want to shrink but cannot figure out how. I've tried margins and setting gaps to no avail. Also, I want to center align the text in the top rectangle where Name appears underlined in red; and I want to set the font-size to about 15px. Text-align doesn't work nor does justify-content nor does font-size for me. I've been through the W3c tutorials numerous times without finding my answers. I've also searched for articles and YTs without finding one that addresses my issues. Any help will be greatly appreciated. CSS item1 { grid-area: name; width: 600px; height: 40px; margin-left: auto; margin-right: auto; margin-bottom: 10px; border-style:ridge; border-width: 5px; border-radius:10px; } .item2 { grid-area: photo; width: 245px; height: 225px; margin-left: 70px; border-style:ridge; border-width: 2.5px; border-radius:20px; } .item3 { grid-area: birth; width: 75px; height: 65px; border-style:ridge; border-width: 2.5px; border-radius:20px } .item4 { grid-area: birth-details; width: 300px; height: 65px; border-style:ridge; border-width: 2.5px; border-radius:20px } .item5 { grid-area: marriage; width: 75px; height: 65px; border-style:ridge; border-width: 2.5px; border-radius:20px } .item6 { grid-area: marriage-details; width: 300px; height: 65px; border-style:ridge; border-width: 2.5px; border-radius:20px } .item7 { grid-area: death; width: 75px; height: 65px; border-style:ridge; border-width: 2.5px; border-radius:20px } .item8 { grid-area: death-details; width: 300px; height: 65px; border-style:ridge; border-width: 2.5px; border-radius:20px } .item9 { grid-area: children; width: 700px; height: 35px; margin-right: auto; margin-left: auto; border-style:ridge; border-width: 2.5px; border-radius:20px } .item10 { grid-area: bio; width: 700px; height: 95px; margin-right: auto; margin-left: auto; border-style:ridge; border-width: 2.5px; border-radius:20px } .item11 { grid-area: thumbnails; width: 700px; height: 55px; margin-left: auto; margin-right: auto; margin-left: auto; border-style:ridge; border-width: 2.5px; border-radius:20px } .grid-container { display: grid; background-color: rgb(234, 217, 201); row-gap: .25px; margin-left: auto; margin-right: auto; border-style:ridge; border-width: 3px; border-radius:20px; width: 860px; height: 540px; grid-template-areas: 'name name name name name name' 'photo photo birth birth-details birth-details birth-details' 'photo photo marriage marriage-details marriage-details marriage-details' 'photo photo death death-details death-details death-details' 'bio bio bio bio bio bio' 'children children children children children children' 'thumbnails thumbnails thumbnails thumbnails thumbnails thumbnails'; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: left; padding-left: 9px; padding-top: 1px; font-size: 11px; } .name { display: grid; width: 600px; height: 30px; margin-top: 5px; margin-bottom: 8px; border-style: ridge; border-width: 6px; border-radius: 5px; padding-left: 5px; padding-top: 3px; padding-bottom: 2px; background-color: #fff; } .photo { display: grid; margin-bottom: 1px; width: 225px; height: 225px; border-style:ridge; border-radius: 5px; border-width: 2.5px; background-color: #fff; } .birth-legend { display: grid; width: 75px; height: 60 px; } .birth-details { display: grid; width: 300px; height: 60px; margin-left: 290px; margin-bottom: 1px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-bottom: 2px; text-align: center; } .marriage-legend { display: grid; width: 75px; height: 60; margin-left: 295px; } .marriage { display: grid; margin-left: 290px; margin-bottom: 1px; width: 400px; height: 60px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } .death-legend { display: grid; width: 75px; height: 60px margin-left: 295px; } .death { display: grid; margin-left: 290px; margin-bottom: 1px; width: 400px; height: 60px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } .bio { display: grid; margin-bottom: 3px; width: 730px; height: 60px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } .children { display: grid; margin-bottom: 3px; width: 730px; height: 60px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } .thumbnails { display: grid; margin-bottom: 1px; width: 730px; height: 60px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } HTML <!DOCTYPE html> <html lang="en-us"> <head> <meta http-equiv="content-type" content="text/html" charset=UTF-8> <link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> <title="the-clan">GRID</title> </head> <body> <style> </style> </head> <body> <div class="grid-container"> <div class="item1">Name</div> <div class="item2">Photo</div> <div class="item3">Birth</div> <div class="item4">Date:<br> Place:<br> Mother:<br> Father:</div> <div class="item5">Marriage</div> <div class="item6">Spouse:<br> Date:<br> Place:</div> <div class="item7">Death</div> <div class="item8">Date:<br> Place:<br> Burial: </div> <div class="item9">Children</div> <div class="item10">Bio </div> <div class="item11">Thumbnails</div> </div> </body> </html>

Thanks. I'll play around with it some more.

If I'm trying to do the impossible, please tell me so. If you have suggestions I'd like to hear them. In the screenshot on the left below you will see an area with a reddish purple box to the left of 3 rows for data. I want to define a box for a photo like the one in the screenshot on the right to fit in that space. I'm adding my HTML and CSS code to show what I've done. In the HTML the 'photo' container child element is commented out in order to preserve the rest of the layout. If I un-comment the 'photo' div, the layout shifts destroying the intended layout. Searching and watching YTs have not revealed any clues for me. I've been through the W3c Tutorials on Flexbox and related topics a number of times but I haven't uncovered anything to get me past this. Discovering how to 'break' rows was a real leap forward for me, but I can't figure out how to do this for child containers of unlike heights. Can flexboxes contain child containers of different heights? I can't find an answer to that question. Am I trying to do the impossible? Any help will be greatly appreciated. HTML <!DOCTYPE html> <html lang="en-us"> <head> <meta http-equiv="content-type" content="text/html" charset=UTF-8> <link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> <title="the-clan"></title> </head> <body> <div class="flex-container"> <div class="name" style="font-size: 20px;"> Charles Haddon Spurgeon Hutchins</div> <div class="break-row"></div> <!--<div class="photo">pic</div> --> <div class="break-row"></div> <div class="birth">BIRTH<br> INFORMATION:</div> <div class="birth-details">DATE:<br> PLACE:<br> FATHER:<br> MOTHER:</div> <div class="break-row"></div> <div class="marriage-legend">MARRIAGE<br> INFORMATION:</div> <div class="marriage">SPOUSE:<br> DATE:<br> PLACE:</div> <div class="break-row"></div> <div class="death-legend">DEATH<br> INFORMATION:</div> <div class="death">DATE:<br> PLACE:<br> BURIAL:</div> <div class="break-row"></div> <div class="bio">BIOGRAPHY:</div> <div class="break-row"></div> <div class="children">CHILDREN:</div> <div class="break-row"></div> <div class="thumbnails">PHOTOS:</div> </div> </html> CSS .flex-container { display: flex; flex-wrap: wrap; background-color: rgb(234, 217, 201); justify-content: center; margin-left: auto; margin-right: auto; border-style:ridge; border-width:5px; border-radius:20px; width: 860px; height: 540px; } .flex-container > div { background-color: #ffffff; justify-content: left; font-size: 9px; } .break-row { flex-basis: 100%; height: 0; } .break-column { flex-basis: 100%; width: 0; } div .name { font-size: 22px; justify-content: center; } .name { display: flex; justify-content: center; font-size: 20px; width: 600px; height: 30px; font-size: 20px; margin-top: 5px; margin-bottom: 8px; border-style: ridge; border-width: 6px; border-radius: 5px; padding-left: 5px; padding-top: 3px; padding-bottom: 2px; background-color: #fff; } .photo { display: inline-flex; margin-bottom: 1px; width: 225px; height: 225px; border-style:ridge; border-radius: 5px; border-width:2.5px; background-color: #fff; } .birth { display: flex; margin-left: 240px; margin-bottom: 1px; width: 80px; height: 58px; border-style:ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } .birth-details { display: inline-flex; margin-bottom: 1px; width: 400px; height: 58px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; }/* date - line 1 place - line 2 parents - line 3*/ .marriage-legend { display: inline-flex; margin-left: 240px; margin-bottom: 1px; width: 80px; height: 58px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } .marriage { display: inline-flex; margin-bottom: 1px; width: 400px; height: 58px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } .death-legend { display: inline-flex; margin-left: 240px; margin-bottom: 1px; width: 80px; height: 58px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } .death { display: inline-flex; margin-bottom: 1px; width: 400px; height: 58px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } .bio { display: inline-flex; margin-bottom: 3px; width: 725px; height: 60px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } .children { display: inline-flex; margin-bottom: 3px; width: 725px; height: 60px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; } .thumbnails { display: inline-flex; margin-bottom: 1px; width: 725px; height: 60px; border-style: ridge; border-radius: 5px; border-width: 2px; background-color: #fff; padding-left: 5px; padding-top: 2px; }

Proving once again that blind pigs find acorns occasionally, I can report that I got this to work by going to Command Palette (F1) and entering Live Preview. The viewport with a browser view opened. Posted in case someone else searches here for the same issue.

If this is not appropriate here, I hope the admins will flush the post. I'm using VS Code. I want to be able to view the results of my changes without having to go from VSC to my browser. I know that MS Live Preview interoperates with VSC - I've used it before - but I can't seem to get it activated. I have it installed and can click on the extension and get it to display in the right side of my screen as the screenshot shows, but I cannot figure out how to activate it. I've searched online and watched several YTs but nothing tells me how to get it activated so that I can get the icon to show so that I can click it and get the browser view. Can someone point me in the right direction, please?

Thank you. I presumed that there was a hierarchy but had not seen the Specificity article and couldn't make a search argument that revealed it for me. After reading the Specificity article, I used an in-line style to set font-size to 20px. Worked fine!

In the screen I am trying to design, I want one of the flexbox child containers to have a different font size than declared in the the class shown below. In the screenshot where the name appears I want font-size: 20px but putting that statement in the .name class descriptors has no effect. Can I make just that area have the larger font size? If so, how? .flex-container > div { background-color: #ffffff; justify-content: left; text-align: center; font-size: 9px; } .name { display: inline-flex; width: 500px; height: 30px; justify-content: center; font-size: 20px; margin-top: 5px; margin-bottom: 3px; border-style: line; border-width: 1px; border-radius: 5px; padding-left: 5px; padding-top: 5px; background-color: #fff; text-align:center; }

Thanks!

I'm working to understand how to use a Flexbox and the related CSS and HTML statements. For the moment, ignore the pic, birthdate and birthplace containers but I'm sure I will have questions about placing them later. Right now, I want to know if it is possible to center the container itself onscreen, and, if so, how to do it. Somebody please tell me if I'm not sharing my code correctly. I'm new here and learning. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" charset=UTF-8> <link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> <title="the-clan"></title> </head> <body> <div class="flex-container">container <div class="name">name</div> <div class="photo">pic</div> <div class="birth">birthdate</div> <div class="birth-details">birthplace</div> </div> </html> /* This code is NOT in the HTML file but is a separate file named styles.css */ .flex-container { display: flex; background-color: rgb(228, 219, 209); left: 19%; right: 17%; border-style:ridge; border-width:5px; border-radius:20px; width: 860px; height: 490px; } .flex-container > div { display: flex; position:relative; margin-top: 0.05%; margin-bottom:2%; border-style:ridge; border-width:5px; border-radius:20px; width:600px; height:470px; background-color:rgb(228, 219, 209); text-align:center; font-size:14px; font-family:Verdana; } .name { display: inline-flex; position: relative; top: 20px; right: 27.7%; width: 400px; height: 30px; border-style:line; border-width:.5px; padding-top: 2px; background-color: #fff; color: em#2d18c6; border-radius:5px; text-align:center; font-size: 22px; } .photo { display: inline-flex; width: 250px; height: 250px; border-style:ridge; border-radius: 5px; border-width:2.5px; background-color: #fff; text-align:center; } .birth { display: inline-flex; margin-left: 40%; margin-right: 40%; border-style:ridge; border-radius: 5px; border-width: .5px; padding-left: 10px; padding-top: 20px; text-align: left; font-family:'Franklin Gothic Medium'; font-size: small; height: 35px; width: 60px; } */ /*.birth*//*FIXED [if exists BIRTH] <div class="birth-square"> </div>*/ .birth-details { display: inline-flex; margin-left: 40%; border-style:ridge; border-radius: 5px; border-width: .5px; padding-left: 5px; padding-top: 5px; padding-bottom: 1px; text-align: left; font-family:'Franklin Gothic Medium'; font-size: small; height: 57px; width: 400px; }/*

Thanks!

The attached screenshot is taken from one of the CSS Flexbox tutorial pages. I have several questions. I 'think' that the first .flex-container CSS group defines the container and the second one - with the "> div" syntax - defines the items in the container. Is that correct? Is ".flex-container" a reserved word that must be used to identify a container to browsers, or can any term be used, especially one that might be more meaningful in some circumstances? It's my understanding that "display:flex" are reserved words and that this is what defines the container, not the style class name. Am I wrong? This ss comes from the lesson on "align items." The example confuses me. I understand the lesson to mean that the flex items will be center-aligned; yet the example shows them left-aligned. Yes, the boxes are aligned to the center vertically, but context makes me believe that they are supposed to be centered horizontally. Because the flex items are not centered horizontally, I have to ask if it is possible to center align them horizontally and, if so, how? I put a box around the container CSS definition at upper left. There is no width definition, only a height definition. Can the size of the container be defined using both width and height? The example doesn't make it clear for me. In the flex items declaration I circled in blue the "text-align: center" statement. I believe it is this statement that causes the numbers in the flex items to be centered in the white space. Do I understand this correctly?

I'm 81 yo, retired as CIO for a multi-state bank. Wrote my first mainframe code in the early '70s. Progressed through the ranks from programmer, to project leader, to analyst, to project manager and eventually to CIO. I haven't written code in a long time although I did create a web page for my high school class about 15 years ago using HTML/CSS/js. I'm trying to get my hand back in intending to create a family web page. I'm working my way through the W3c Schools tutorials. I don't intend to do any certifications 😂 I intend to make good use of this forum by picking your brains when I run into problems I can't find answers for or can't figure out. Be kind to an old man, please!

In going through the CSS Flexbox tutorial I encountered the code in the screenshot that I don't understand and can't find an answer for searching online. It appears that there are 2 .flex-container declarations. Why are there 2? Why does the second one (in the attached ss, .flex-container > div { etc) exist. It puzzles me. I could find no explanation for having to have a second declaration nor for the "> div" syntax. Obviously, this declaration defines the container, but why couldn't that have been done in a single declaration? Could someone please explain this for me?