Submitted over 3 years ago

Base Apparel Page Using CSS Grid & Flexbox

Rowland• 185

@Rowkibet

Preview site View code

This is a solution for...

Base Apparel coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello, I have encountered a problem when trying to make the page responsive. I wanted to kindly ask should I change the HTML markup I used or is it possible to get the layout for the mobile devices with the same markup I used?

I saw that getting the logo, text and input field would be ideal in getting the mobile layout but when I made the items separate it proved hard to get a desktop design close to the one provided in the challenge.

Any other feedback on my solution would be very much appreciated.

Thanks!

Community feedback

Roman Filenko• 3,335

@rfilenko

Posted over 3 years ago

Hey, there are some issues with layout and overflow - use mediaqueries to overwrite styles on different breakpoints. Usually mobile-first approach results in less code. Pay attention to change values of grid or flex, margin, paddings, etc on smaller viewports. Also don't use so man selectors - just one class is enough.

Cheers, Roman

Rowland• 185

@Rowkibet

Posted over 3 years ago

@rfilenko Thanks for the feedback, I will try the mobile-first approach and fix the other issues you pointed out.

SathishVM• 280

@SathishVM

Posted over 3 years ago

Hello Rowland,

Yeah, rfilenko is right. use some media queries and don't use selectors and in the form input using flexbox will be more head pain when it comes to specifically for this solution and try reducing font-size by 1 or 2 px when it gets to mobile screen.

If you get problems again feel free to view my solution

https://github.com/sathishvm/Frontend-Mentor-Challenges/tree/master/base-apparel-coming-soon

Rowland• 185

@Rowkibet

Posted over 3 years ago

@sathishvm thanks for helping me out and providing the link to your solution. I have started adding the media queries to my solution but I am not yet done.

For the selectors, did you mean I should reduce the number of selectors i have written when targetting an element in the css file?

SathishVM• 280

@SathishVM

Posted over 3 years ago

@Rowkibet yes Rowkibet when you using the selectors use them when you have a unique CSS declaration which means it shouldn't affect anything else and writing css for each element to design will help you when you add the media queries to it. ✌️. So that's why I too suggested using less selectors in the code

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord