Skip to content
OverviewSolutions
19
Comments
4
Ahmet Kabacali
@ahmetkabacali

All comments

  • Ahmet Kabacaliโ€ข450
    @ahmetkabacaliPosted almost 2 years 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
  • Ahmet Kabacaliโ€ข450
    @ahmetkabacaliSubmitted almost 2 years 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
    Ahmet Kabacaliโ€ข450
    @ahmetkabacaliPosted almost 2 years 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
  • Ahmet Kabacaliโ€ข450
    @ahmetkabacaliPosted almost 2 years 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-QSubmitted almost 2 years 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
    Ahmet Kabacaliโ€ข450
    @ahmetkabacaliPosted almost 2 years 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