All comments

• 

  Laxman Jonchhen• 50

  @LaxmanJonchhen12

  Submitted over 1 year ago

  

  Responsive 3 Column Challenge Solution using Flex box

  2

  20

  

  Ahmet Kabacali• 450

  @ahmetkabacali

  Posted over 1 year ago

  hi,

  if you interested i will give you few suggestion.

  if you want centered any object, to center 1 object, the inside must be smaller than the outside. If you say 100% to the object in it, it won't be an centering. Although there are several methods for centering, the simplest is to give the outer object an display:flex ​​value. if the object inside is smaller than the outside. You can center it horizontally with justify-content:center; and vertically with align-items:center.

  Maybe you knew, but when I saw that there was a problem in this project, I wanted to point it out.

  you can fix with theese cods:

  body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  
  .container {
      width: fit-content;
  }
  
  .card {
      height: 93vh;  /* delete this */
      padding:3rem;
  }
  

  i hope i helped.🙂 Good coding.🙂

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Ahmet Kabacali• 450

  @ahmetkabacali

  Submitted over 1 year ago

  This is my first challenge with js.

  i tried 2 page on a html with javascript without display:hidden. İt worked but i have a problem with when i revisited first page after push 'RATE AGAIN' button. Problem is when i visit first time everythink working perfectly but second time visit doesn't vork javascript files.

  How can resolve this problem. may someone help me about that?🤔

  Also, feel free to express your positive or negative opinions. Your opinion is important to my development.

  ty🙂

  

  Interactive rating component with JS

  2

  50

  

  Ahmet Kabacali• 450

  @ahmetkabacali

  Posted over 1 year ago

  Hi Eileen;

  First of all, thank you very much for taking the time to deal with my problem.😇

  Yes I resolved the problem with location.reload() too. But then i noticed that it refreshed the page completely. It could be used for this project, but if I have this problem in larger projects in the future, I want to learn how to resolve the problem without refreshing.

  is there any other solution? Or should I back up everything to localstorage before the script?

  Ty🙂

  0
• 

  Faith Kalu Onyeani• 60

  @Beautifulone0

  Submitted over 1 year ago

  Not proud of this i need help to styling it properly please help

  

  Testimonial - Grid

  1

  40

  

  Ahmet Kabacali• 450

  @ahmetkabacali

  Posted over 1 year ago

  hi,

  I checked your code but there are many encoding error. I can make some suggestions.

  • Dont use <br> in grid section.
  • Give the grid a height and width or give them to its container .
  • There are 4 grids, not 3. change with this .grid{grid-template-columns: repeat(4, 1fr);}
  • Use 'grid-area' each grid at this challenge. The grid-area property specifies a grid item's size and location in a grid layout.

  .daniel{ grid-area: 1 / 1 / span 1 / span 2; }
  .jonathan{ grid-area: 1 / 3 / span 1 / span 1; }
  .kira{ grid-area: 1 / 4 / span 2 / span 1; }
  .jeanette{ grid-area: 2 / 1 / span 1 / span 1; }
  .patrick{ grid-area: 2 / 2 / span 1 / span 2 }
  

  • Remove all width and height from person grids. The grill will still fit them. Like this .jonathan{ width: 40%; height: 40%; }

  • Dont use margin:10px 10px this is same with margin:10px and i recomended use "rem" and "em".

  • Don't use margin between grids if there is no major reason. You can use gap:10px.The gap property defines the size of the gap between the rows and columns in a grid layout.

  I'm no expert either, but these are some of the ones I've seen. i hope i helped.

  Good coding:)

  Marked as helpful

  0
• 

  Yathip Kenichi Takahashi• 250

  @Ken-Takahashi-Q

  Submitted over 1 year ago

  • How to move the quotation sign without the top space in container?
  • I always have problem with making container horizontally and vertically center and it needed margin: auto. Why don't others' code need it?

  

  Testimonials grid section

  2

  20

  

  Ahmet Kabacali• 450

  @ahmetkabacali

  Posted over 1 year ago

  hi,

  -Give it the attribute position:relative according to which container you want it to be positioned and give position: absolute; to the item you want to move. Your fault is you gave it to ".bg"

  *editted code

  .item1 {
      position: relative;
  }
  .bg {
      position: absolute;
      top: 0;
      right: 20%;
      height: 100px;
      z-index: -1;
  }
  

  -Note that the width/height do have to be specified absolutely, which uses sizing relative to the viewport.

  *simple example;

  #parent {
      width: 500px;    /*100vw*/
      height: 500px;    /*100vh*/
      background-color: gray;
      display: flex;
  }
  
  #child {
      width: 50px;
      height: 50px;
      background-color: red;
      margin: auto auto;
  

  <div id="parent">
      <div id="child"></div>
  </div>
  

  Happy Coding😉

  Marked as helpful

  1