Skip to content
OverviewSolutions
6
Comments
11
Ivan
@PeresvetIvan

All comments

  • Ivan•245
    @PeresvetIvanPosted over 4 years ago

    Hello, Piotr. Do your research on css methodologies, like BEM, OOCSS, SMACSS, Atomic Css and so forth. This will help you to repeat yourself less and write more extensible and convenient code. I would advise you to watch lectures on youtube for the query "css methodologies", or read some review article on this topic if you like to read more, and then try to apply it in your code. Good luck)

    1
  • Dulce•115
    @iamdulceSubmitted over 4 years ago

    I had this doubt, the only way to apply border-radius to the entire grid is to appliy it on every single item separetly?

    Any feedback about the project will be welcome :)

    Single price grid component

    4
    Ivan•245
    @PeresvetIvanPosted over 4 years ago

    Hello, Dulce! You can set border-radius to parent element (grid container in this case), and also set 'overflow: hidden'. This way, all child elements will not go beyond the parent element, which means that all their corners will be cut automatically according to the border-radius property on the parent element.

    0
  • Ivan•245
    @PeresvetIvanPosted over 4 years ago

    Hello, Jome. You can make a background for the body element, but for this purpose the "design" element must have a minimum height of 100vh, and you need to remove the margin-top, then the content block will automatically stand in the center of the container. After that, you can set background-size: contain and background-position: bottom on the body element for the image to lower it down. But i would advise you to set the background not on the "body" element, but on another element - for example, any div or pseudo element :before or :after with the 'absolute' positioning, this would be easier, in my opinion, because you can set the height and width of the image yourself, unlike the image in the body element, where the height can only be changed by the cover or contain properties. Try both ways and choose which one you like best.

    1
  • Ivan•245
    @PeresvetIvanPosted over 4 years ago

    Hi, Allison. To prevent the girl from completely disappearing, I would reduce the padding on the right, you can also change the paddings on the sides of the content block to relative (in vw or%, for example calc(20vw / 3) so the indents will change when you change the width of the browser window, but not very much).

    1
  • Ivan•245
    @PeresvetIvanPosted over 4 years ago

    Hi Bernardo. It should be responsive)

    0
  • Ivan•245
    @PeresvetIvanPosted over 4 years ago

    Hello Z11mm! I think you can easily make it with absolutely positioned pseudo element (:after or :before) or simple div element, relative to body with 'top:0' and 'left: 0' and with set border-radius property on bottom corners.

    0
  • Nada Farook•100
    @NadaFarookSubmitted over 4 years ago

    I tried my best to complete the challenge but failed miserably, but i successed half.I need constructive feedback,Please help anyone if you know.Anyone please help me if you know.

    css and javascipt

    2
    Ivan•245
    @PeresvetIvanPosted over 4 years ago

    Hello, Nada. I join the above sayed by rfilenko, and I can also add that you set the relative height for all box elements in the grid container (grid-template-rows property), and all the heights are calculated relative to the largest block - in your case, this is an image. But the problem is that the image changes size, so the height of all the " box " elements will also change, which is why everything slides when you change width of the browser window. Set a fixed image width, for example in px, or delete the grid-template-rows property for the grid container, and manually set internal margins (padding and margin) for all elements. Also you have problem with icons, set to them fixed width and their size will not change. And wrap icons in links ('a' tags), and add property "cursor: pointer" to button and social icons. Good luck)

    1
  • Ivan•245
    @PeresvetIvanPosted over 4 years ago

    Hello, Nofeesah! this may be due to the fact that you incorrectly specified the path to the image. In your repository on GitHub image located in the root folder, not in folder 'images'.

    0
  • Ivan•245
    @PeresvetIvanPosted over 4 years ago

    hey, The-Lunatic-Schizoid-TM! Easier way to position some element inside parent element (in this example img element inside card element), is using property 'position: relative' and 'position: absolute' to parent and child elements respectively. After that done write 'right: 0' and 'bottom: 0' to child element (img). For better understanding, watch some lesson on position property, or check other solutions on this site. Another simple solution is to wrap img in div element, and for this div element set property 'align-text:' to right, left, or center, depending on what position you want. And, of course, set margin of img to 0.

    0
  • David Sumner•195
    @Sumner-DavidSubmitted over 4 years ago

    I had issues with making the grids fully responsive for tablet and mobile. For some reason i couldn't get the rows to auto fit. They would just stick to 2 columns and the 2nd column would just shrink while the 1st column would stay in the min width.

    I resorted to switching to flexbox to get the mobile right.

    If you see a way i could have done it better with grids, please let me know

    Used CSS grids for desktop and tablet, then flexbox for mobile

    1
    Ivan•245
    @PeresvetIvanPosted over 4 years ago

    Hey DPSumner! I don't understand what the problem with tablet resolution, i thought everything was working fine. I tried disabling all grid-related styles in the parent container (". grid") and in the block for cards ('. card'), for the '.grid' block I only wrote 'grid-template-rows: 1fr', and everything works fine in mobile resolution. I think that to work in the tablet resolution, you just need to write for the 'grid-template-rows' property ':repeat(2, 1fr)'and it should work. I hope you will succeed :)

    1
  • Dawid Kopicki•80
    @DawidKopickiSubmitted over 4 years ago

    I would be grateful for feedback regarding my code. The biggest problem was "waves" - I think it would be easier to create them using CSS instead of graphics. I'm not sure if I adopted the good class naming convention.

    Thank you in advance.

    Best regards, Dawid

    Mobile first site using SASS and BEM

    1
    Ivan•245
    @PeresvetIvanPosted over 4 years ago

    Hey David! Good job :) I think, you can make waves by using pseudo elements (for each block :before and :after), but i think your solution is ok.

    I'm interested in other solutions with waves too, maybe someone will share?) Couple of things that i noticed:

    1. In element "site-main__features-item-info-header" you don't need to use padding and set line-height to 0, you need just set property 'align-items: center', not 'align-self' property on the flex container of this element (in your example - "site-main__features-item").

    2. I recommend to use .container block which will be used as a wrapper for all internal blocks, to avoid prescribing padding for all of them. All internal blocks can be simply wrapped in a .container (.wrapper) block that has padding and margin set, and you don't need to specify the same padding and margin for all elements (they are usually the same). You can see how this is done in my solutions for example.

    3. I noticed , that element "site-main__image" element if you set the 'max-width: 100%' property, for some reason, will accepts the width of the source image, and with property 'width: 100%' will accepts the width of parent element. I don't know why this is so.

    Wish you good luck and would be grateful if you also check my solutions and will show any mistakes or easier solutions in them)

    1