@dod123-stack
Akshay Meshram
@akshay63All comments
- @akshay63
Hey @Doaa. The thing that made your layout a bit confusing is that you have used display: grid for the container but in the media query you've used the "Mobile-first" approach where you have used the "display: flex;" property. This is where all the problems related to layout issues lie.
If you want to use grid, use only grid for the placement of the component & set display: grid; to the container and once you set this then you don't have to specify the display property in the media queries. Just use its properties for alignment and position.
for ex: .container{ display:grid};
@media screen and (min-width: 800px){ grid-template-rows: repeat(2, 1fr); }
Hope it helps.
- @syedalimansoor@akshay63
Hey @Syed Ali Mansoor! Great effects, there. I loved it👌😉. Thanks for sharing your solution. I'm too learning a lot from APG. Btw how did you achieve the hover effect though?
- @FranciscoFrontEndDeveloper@akshay63
Hey@ FranciscoFrontEndDeveloper! Even if you done some mistakes you can improve a lot by trial and error approach in the challenge.
I have done some changes to the code if you don't mind. You can improve your mistakes and change accordingly. Thanks
- @matiussi@akshay63
Hey laura-2035! Your solution looks great and yeah a bit messy in the Media query part. I know building the "Mobile-first" layout is a bit difficult because I have told it is. I used max-width only till now but I will try min-width also in my coming challenges.
Some suggestions from me are- When media queries are triggered in 1200 and 900, I found extra space between rating bars and review cards. You can center the rating bars and make the review cards 100% width.
Keep coding! 👌👍
- @santu369@akshay63
Hey! shiva santosh jana. I liked your solution to this challenge. Keep coding! 🎉
- @vstrogalev@akshay63
Hey, Viacheslav! Even if you have done some mistakes, you have done a great job in creating the site for the desktop. Don't bother much rather revise the concepts of basic layout methods using CSS and apply those to your project.
Some changes I suggest you try out: 1.To answer your first question: We have to only change the font size of the overall font in the HTML element itself only and not to both HTML and Body element. 2.To change the background-image size: set the 'background-size: cover' for the image and do not use the object-fit property for images because it is for background videos.
I also have done some changes to your code if you don't mind.
- @pikapikamart@akshay63
Hey, @Raymart Pamplona! Apart from some minor changes that APG mentioned, your solution is looking great. It's my current challenge and in 1-2 hours I'll submit it. Great work!👍😎
- @pikapikamart@akshay63
Hey, @Raymart Pamplona. It is looking great. 👍
- @Alexandre-Chs@akshay63
@Alexandre-Chs Hi Alexandre. A few changes i want you to make which are-
-
In CSS(both mobile layout and desktop layout), the header__image doesn't need a transform property because you can position the background image in the Y-direction using "background-position" itself. For this I recommend you refer to MDN for a property that I've just mentioned.
-
In ".btn" declaration in CSS, correct the "justify-content: flex-end;" as this correct value of justify-content property.
-
In many places you don't need to use transform property I think because you are using flexbox for placements of items.
Thats it! Keep coding.👍😎
-
- @pikapikamart@akshay63
Hi @Raymart. I want to tell you that you've set "height: 100%" to the grid container and set the "grid-template-rows: repeat(2, 282px);". I think we need not set the height of the container if we set row tracks because row track will determine the height and thus the container height becomes overall row tracks height.
- @akshay63@akshay63
Thanks!
- @itsmeEVIL@akshay63
Hi, @ITSMEEVIL. Your site is looking great. I want to ask you how did you position those social media icons because I had trouble positioning them. Well I have just finished this challenge you can check out my solution by visiting my profile if you want. Thanks👍
- @RITESH29-web@akshay63
Hi, Ritesh. Congratulations on completing the challenge. Just one change should be done which is changing the color of the paragraph of the heading part. It is grayish-blue. Happy coding!
- @Bonrey@akshay63
Hi @BONREY. The site is looking great. The sounds of each button and the animations are amazing. I just want to say that when we view the site in the mobile version, the navigational menus are aligned in an inconsistent manner. But otherwise, all your work is Great! Congralutions👌👌
- @Art-wdt@akshay63
Hi, @art. Your site is looking very good. I observed that you used the Mobile-first approach in responsive design and that's great. I just want to say that when we move up to a larger screen at 1000px, the left and right cards are inconsistent. Well, it's a very minute detail I shared, anyway the design is great. It's my next challenge and I'm working on it. Happy coding!
- @larkceresin@akshay63
@JENNA TOFF Hi, there. I think using position: absolute will break the normal flow of the layout if you use it to position any element. In cases like stacking contexts where we want to position elements on top or below each other, it is best to use that method. But here the case is different. Here we want the images to be in the background. And there is one property that we can use to position the images. I think you guess it correctly. Its background-position property. I had some issues using this property but it is what we have as the best solution for positioning our background images. Please refer to MDN for this property and check out an example for 'Multiple background images' and try different values for positioning the images.
- @kefer16@akshay63
Great Job! I really liked it.
