All comments

@akshay63Posted over 3 years ago

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.

0

Syed Ali Mansoor•460

@syedalimansoorSubmitted over 3 years ago

Hello!

I used a Firefox extension, 'Pixel Perfect Pro', to get the website to match the design. It's a pretty great tool that I recently discovered.

This was a simple challenge, and good for practice as well. I added a neat little 3d hover effect to the card using Javascript (props to Apple Pie Giraffe for inspiration)

Please check it out and leave your feedback!

Pixel-perfect card component with 3d hover effect

3

@akshay63Posted over 3 years ago

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?

1

Francisco Becerra Rodriguez•390

@FranciscoFrontEndDeveloperSubmitted over 3 years ago

In this challenge the most difficult things was to position the imagen in the center of the card, but thanks to the "calc()" function of css it made my work easier

Mobile firts and sass with BEM

@akshay63Posted over 3 years ago

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

1

matiussi•155

@matiussiSubmitted over 3 years ago

Hello o/.

Here is my solution for the Social Proof Section, this is my first Mobile First website, using the Mobile First Approach was way more complex than I thought 😅, I'm not quite sure if I did the right way, because some people say that this approach is time saver... But in my case was the opposite (Maybe because is my first time), I had to overwrite my CSS a lot of times to achieve a good result in different displays... Honestly I'm still kind lost when it comes to CSS optimization, but I'll do my best 🙌

I also made a tablet layout 👩‍💻

If someone could give me some feedback, especially in the media queries and CSS code optimization I would be super happy 😊

Social Proof Section- Mobile First React and SASS (Grid/Flex)

@akshay63Posted over 3 years ago

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! 👌👍

1

shiva santosh jana•375

@santu369Submitted over 3 years ago

Developed accordion card component using JavaScript. Went on to complete the Bonus and removed JavaScript, updated CSS to toggle the answers. In JavaScript version, I was able to hide all other answers and only show the answer that the user clicks on using small logic. But in CSS version, I was not able to hide other answers. Let me know if this is possible without using JavaScript.

Edit Used radio instead of checkbox to achieve hide other answers apart from user selected one. It can also be done using CSS :target selector

JavaScript Version

Comments are much appreciated.

Responsive FAQ Accordion Using HTML, CSS (no JavaScript)

@akshay63Posted over 3 years ago

Hey! shiva santosh jana. I liked your solution to this challenge. Keep coding! 🎉

0

Viacheslav•20

@vstrogalevSubmitted over 3 years ago

Thank you all, guys for your comments and advices!

Responsive CSS, Flex, media queries

@akshay63Posted over 3 years ago

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.

0

Raymart Pamplona•16,100

@pikapikamartSubmitted over 3 years ago

I like to hear your suggestions about it. I kinda feel not great about this challenge of mine so any tips would be nice^

Practicing more BEM principles^

@akshay63Posted over 3 years ago

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!👍😎

0

Raymart Pamplona•16,100

@pikapikamartSubmitted over 3 years ago

Feel free to drop your comments or question regarding my solution^^

Just using pure css and js except with what they provided^^

3

@akshay63Posted over 3 years ago

Hey, @Raymart Pamplona. It is looking great. 👍

0

Alexandre•140

@Alexandre-ChsSubmitted over 3 years ago

I am progressing more and more, I am happy!

Project only in HTML / CSS / JS VANILLA. I will start SASS on the next project!

Why do my icons not want to appear on my live server and on the host? Surprising, because internally on the computer I had no problems ..

Thx ♥

HTML / CSS / JS VANILLA !

@akshay63Posted over 3 years ago

@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.👍😎

0

Raymart Pamplona•16,100

@pikapikamartSubmitted over 3 years ago

Feel free to ask any question and i'll answer it^^

Just using BEM and scss^^

@akshay63Posted over 3 years ago

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.

1