Piotr• 50
@dzm11
Submitted
What should I do to make my css simpler? I think im doing too much code. Thanks for every help :)
Ivan
@PeresvetIvan
All comments
- Ivan• 245
@PeresvetIvan
Posted
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
@iamdulce
Submitted
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 :)
Ivan• 245@PeresvetIvan
Posted
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 - Favourite Jome• 1,110
@jomefavourite
Submitted
I couldn't make the desktop background work. Please suggestions will be appreciated.
Ivan• 245@PeresvetIvan
Posted
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 - Allison Bates• 170
@allisonkbates
Submitted
I would like some feedback on how to make the design transition better from mobile to desktop views.
Ivan• 245@PeresvetIvan
Posted
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 - Bernardo Munz• 30
@moonbe77
Submitted
How can I post the desktop and mobile version, or it should be responsive?
Ivan• 245@PeresvetIvan
Posted
Hi Bernardo. It should be responsive)
0 - Z11mm• 195
@Z11mm
Submitted
The page background in the design images has a slight border-radius between the two colour tones. I'll like any suggestion on how to create it. Thank you!
Ivan• 245@PeresvetIvan
Posted
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
@NadaFarook
Submitted
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.
Ivan• 245@PeresvetIvan
Posted
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 - Dolapo• 820
@nofeesahdee
Submitted
Hi please is there anyone who can view my code and tell me why the background image isn't showing? i will really appreciate it. Thanks
Ivan• 245@PeresvetIvan
Posted
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 @Utkarsh69
Submitted
How can I align the images to the extreme left?
Ivan• 245@PeresvetIvan
Posted
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-David
Submitted
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
Ivan• 245@PeresvetIvan
Posted
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
@DawidKopicki
Submitted
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
Ivan• 245@PeresvetIvan
Posted
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:
-
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").
-
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.
-
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 -
