Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by luuis

  1. as I said, this: "1fr 3fr" concerns only the card-area. A change from "1fr 3fr" to "1fr 5fr", or even to "1fr 1fr 3fr", doesnt change the card area Your answers were useless, sorry
  2. unforten, it's not, I picked the code again, placed text much more then here, the field grows then, but thats all. Yes, I did, but within a comment, except the card area. But no matter if it has 5fr or 3fr, doesnt concern the structer of the page. And finally even max-width or width doesnt change anything, the image, even a large image, is placed very well within that card-area.
  3. I added width and margin here: header{ grid-area: header; width: 50%; /* maybe better 60 or 70*/ margin: 0px auto; } (Copy from a post above). I even thanked you for your sentence, about sidebar and the amount of letters within, so?
  4. And I cant understand, whats left in all my letters, to see what I want. And I cant understand why you never said whats so unclear all the time, I mean you answered. - There is the link to that video, - there is the code I picked, - the screenshot which shows the difference of the page look which I have, in comparnes the Kevin Powels look. And after that, there is my post from Dec 14, saying only with margin and width I can force it, to have it as KP has it, but he did not made it this way.
  5. I'm not a professional in this fields, regardless I cant considere this codelines as something huge. Hard to believe that someone like cant see whats left in comparnes to the video,
  6. changing the amount of columns goes into another topic, I have to say. Cause the whole thing collaps. If it has to be another amount of columsn, where is the point in the video, where he changes it. Or has he not? Is it something what we, the one who watch it, have to guess?
  7. Very thank you again, it comes to what its supposed to be. Just header, footer, hero, is left change. I can force it, jut give the header (so the others) a: width: XX%; margin: 0px auto;" So it looks then this way: header{ grid-area: header; width: 50%; /* maybe better 60 or 70*/ margin: 0px auto; } But he, the maker, doesn't have it this way. What is it what I haven't seen? Have some to add. I looked again for the p element. Because of a p element within the sidebar, I did not care about the amount of letters. It is described as something what cares about the breaks, so I understand it?
  8. I don't understand it either, but that's the way it looks like, thats the difference which still remains between my page, based on that code I posted, and the page the video shows up. I have no idea what needs to be changed, especially the code is the code as video has it. And because of your answer where you corrected this "1fr 5fr compared to 1fr 3fr,", you saw how the page of that video, so you saw the difference.
  9. Gladly I thank you. Do you have any idea why the areas(header, hero, footer) doesnt fit the space as it is in that video. All this 3 areas have a width as the screen-space has. All this 3 areas are supposed to be managed by and there we have "header header header header" 10em" and for hero-area: "hero hero hero hero 50vh". I can change 50vh or 10em, but it works only for height?
  10. It doesnt say just pdf files are limited, but any file.So, 160kb available it has worked for this file. What also doesnt work is managing images. Right now, the union jack I have here, is very small, if I take a larger one it doesnt fit the space as supposed to be, its always originally size.
  11. twice times yesterday I added a pdf file. I waited each time till its say's done. Today its not possible cause it says just 163kb allowed. The text within the aside tag doesnt mean any. In the first place I had just some letters, but did not mean any for the page.
  12. I picked the code from this youtube video(https://www.youtube.com/watch?v=v5KzBPUEgGQ), but my page doesnt look as the video shows it(no matter what browser). I added a pdf file, it shows how the page looks like. I looked over and over to see if I missed anything. My intencion, whenever I go through such videos, is, to get it work and then to analyze the things. So, maybe someone sees whats left or whats wrong. <!DOCTYPE html> <html> <head> <title>supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <header> <h1 class="header-Title"> Header CSS Grid Templat Area </h1> </header> <div class="hero">HERO AREA <div class="hero-title">hero-title Grid-Areas</div> <p class="hero-subtitle">hero-subtitle making life easier</p> </div> <main> <h1>main starts from the blog </h1> <div class="card"> <img src="GB.jpg" alt="foto" class="card-img"> <h2 class="card-title">blog post title</h2> <div class="card-content"> <p>text ljvslvhöh psoupsdhp bölabvnta</p> </div> <a href="">read more</a> </div> </main> <aside> <h1>sidebar stuff</h1> <p>kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf</p> </aside> <footer> <h1 class="footer-Title"> footer</h1> </footer> </body> </html> /*https://www.youtube.com/watch?v=v5KzBPUEgGQ*/ body{ background-color: transparent; /* @include font-base; */ line-height: 1.6; display: grid; /* grid-template-rows: 10em 50vh auto 10em; grid-template-columns: 1fr 5fr 2fr 1fr;*/ grid-template: "header header header header" 10em "hero hero hero hero" 50vh ". main sidebar ." auto "footer footer footer footer" 10em / 1fr 5fr 2fr 1fr; } header{ grid-area: header; } header,footer{ display: flex; background-color: yellow; justify-content: center; align-items: center; } .header-Title, .footer-Title{ background-color: red; font-size: 1.0rem; } .hero{ background-color: coral; grid-area: hero; /* background-image: url('SCL90R_GraphBig.png');*/ background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; } aside{ grid-area: sidebar; background: #fff; } footer{ grid-area: footer; } main{ background-color: red; grid-area: main; } .card{ display: grid; /* grid-template-columns: 1fr 3fr; grid-template-rows: min-content auto; grid-template-areas: "img title" "img content";*/ grid-template: "img title" min-content "img content" auto / 1fr 5fr; } .card-img{ grid-area: img; max-width: 100%; background-color: pink; } .card-title{ grid-area: title; background: lightblue; } .card-content{ grid-area: content; background: lightgreen; }
  13. luuis

    font size 62%

    Thanks for answer, havnt expected anymore. If your "Why does this matter? " is refered to "1.4 rem are not 14px", then I say: Well, I'm still alive, but hopefully that I just missed or mixed something of the description. Cause as I said from the beginning, using 62% is explained this way.
  14. luuis

    font size 62%

    Sometimes it seems, it doesnt matter, if the answer really fits the question, it helps the rank of that person anyway. I havnt thought that I have to repeat myself the explication of that example this line: html { font-size: 62.5%; } its like a new default value for the size of each font. and 14px = 1.4 rem, or 18px = 1.8 rem and so on without this line: I would have to calculate, always, the size of rem or em, to figure, to picture how big the letters became. Thats the idea behind. I used it and have to see, 1.4 rem are not 14px
  15. luuis

    font size 62%

    Hi dsonesuk, explainig me this "Actually its 19.6px not 24px", makes you stupid. (I consider it as a favor, telling you that) And with your last answer you just repeat whats written on that page, so?
  16. luuis

    font size 62%

    This css construction is explaind to hanlde the rems and ems easier, like cause 14px are then = 1.4rem. https://snook.ca/archives/html_and_css/font-size-with-rem I cant see it this way, 14px are always bigger than 1.4 rem(dont need glases for that) What do i miss here? <!DOCTYPE html> <html> <head> <title>Developing</title> <link rel="stylesheet" href="styleFont.css" type="text/css"> </head> <body> <h1>Developing</h1> <p>...lufgofgt </p> </body> </html> html { font-size: 62.5%; } body { font-size: 1.4em; } =14px h1 { font-size: 1.4em; } =24px h1 { font-size: 14px; }
  17. luuis

    font size with 62%

    Developing ...lufgofgt
  18. Hi dsonesuk, thank you , but it brings me back to what ingolme sayed in the beginning, "better not to use". So there must be something else. But its allright, I dont wanna overload it
  19. Sure, refering to your answer, the universal selector is the only one to have it for all elements. What is it what your are using instead of?
  20. @Ingholme, if this is the purpose"It just adds the specified style to all elements on the page. ", then there is no other way to have it this way. Brings me back to your recomendacion, (better not), but what is it what you are doing, instead?
  21. I can imagine to agree, to better not to use. But how to replace it, without having the page changed? Whats the meaning here, I have to ask, "...specified style to all elements ...". An element has to me o n l y its specified style, or what else does it have?
  22. I found this W3School example, some days ago. Its meant to explain clearfix, but what intrests me is this: "* { box-sizing: border-box; }" The star symbol, what is that for? If replace it with 'body' then it has a different style, not totally just the letters "The City...." are above, not left. But this symbol doesnt have any explication anywhere. * { box-sizing: border-box; } .header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; } .menu li:hover { background-color: #0099cc; }
  • Create New...