MoBlack00• 80
@MoBlack00
Submitted
This is my first challenge using a mobile-first approach. Waiting for your feedback.
UG
@0x-UG
All comments
- UG• 140
@0x-UG
Posted
Well done bro! This is clean. I'm following a course and we've not yet begun learning mobile designs yet. I can't wait to start.
0 - alexcoy06• 30
@alexcoy06
Submitted
The hardest part of this project was dealing with the buttons, but it wasn't too difficult. Each time I do a project, I try to add something I haven't done before and make a habit of following more best practices. So, after publishing my work online, I decided to run it through Lighthouse. That made me realize I needed to tweak my code so it would be more syntactical.
Also, if you're not familiar with using clip paths to make a picture round, a super helpful site is https://bennettfeely.com/clippy/. Or, you could always change it in a picture editor like Figma.
UG• 140@0x-UG
Posted
Hey bro. You don't need to make your picture round by editing it, you can just use CSS And make the picture have a border radius of 50%,that makes anything round (buttons, pics etc). Also adding new features on any new design is a good idea and something I'll try too. I normally just practice what I know
0 - isaac kiplangat• 60
@isaac-kiplangat
Submitted
I found it challenging to [describe the specific challenge, e.g., vertically center the div]. The approach I took was [briefly describe your approach], but I'm open to suggestions on a more effective method.
I'm unsure about the [specific code snippet, e.g., CSS flexbox properties] I used for centering. I would like feedback on whether this is a recommended approach or if there's a better way to achieve the same result.
I'm interested in learning more about best practices for centering elements in CSS. Are there any recommendations or considerations I should be aware of based on my current implementation?
Here's a snippet of my code for reference:
<!-- Your HTML code here --> <div class="centered-div"> <!-- Content goes here --> </div>.main-div { background-color:hsl(0, 0%, 100%) ; width: 30%; margin: 60px auto; padding: 20px; border-radius: 15px; }UG• 140@0x-UG
Posted
What I normally do to make sure divs are centered is to make the whole page body a flexbox, with a column direction and then align and justify to center. It's the most reliable for me body { display : flex; flex-direction: column; align-items : center ; justify-content: center; }
Marked as helpful
0 - Vedant Thorat• 60
@vedant027
Submitted
Why is the button hover state not working for media queries when device width is less than 700px ? Also how can i give the gradient color like the given in the challenge for the left container ?
UG• 140@0x-UG
Posted
To give gradient color , select the button in css then use background-color: linear-gradient(to left(or whatever direction you want the gradient to go) , the 2 colors you want to combine separated by commas)
eg background-color: linear-gradient(to right, blue, red) using hsl colors for gradients are advised tho. Good luck
0
