@frontendnusSubmitted about 3 years ago
I have a problem with cta. How do I make the width of the button always 100% in the box - padding instead of me having to always set the width in every media query? Please, your feedback is helpful for me.
Asif M
@asifm37All comments
- @asifm37Posted about 3 years ago
If you have a div container as the parent element for your button, you can use 100% The button will always be the full width of the container.
0 - @UnTalPelucaSubmitted about 3 years ago
I understand that the h1 can only be used once and that instead the h2 can be repeated if it has the same importance as the adjacent titles. Is it okay that you have used h2 for titles leaving h1 reserved for a main title or still should I have used h1, h2 and h3?
@asifm37Posted about 3 years agoHi UnTalPeluca,
Using headings order is actually flexible. It is just standard rules to maintain clean and understandable code. But in practice, you can use multiple h1/h2s, and nothing wrong with them.
Marked as helpful1 - @thaiscodeSubmitted over 3 years ago
It's okay to use fixed sizes with flexbox?
@asifm37Posted about 3 years agoLook into
flex: 1this will help in setting up equal size cards.1 - @karnatisrinivasSubmitted over 3 years ago
I haven't yet made it responsive for mobile( newbie here). Please provide the feedback and suggestions.
@asifm37Posted over 3 years agoHi Srinivas karnati,
Really good job with the desktop version. For the Mobile version, use the media query
@media screen and (max-width: 900px) {}.I see you are already using
flex, so it's just a matter of changing a few direction-related properties in CSS.Marked as helpful0 - @ratan17Submitted over 3 years ago
the background image part was tricky especially for mobile design. i used multiple breakpoints for the background-image size and used 'rem' unit to give it height. it's not perfect according to the design but I think I have made a descent job.
I heartily invite you all to take a look. I'll will be glad to discuss with you guys how I approached this challenge.
@asifm37Posted over 3 years agoHi spyder,
Yes, the background image section was a bit tricky for me too. I used the image as the foreground with 80% opacity and added a color background, which worked for me.
Another approach I recently figured out was to use image and add filter option in CSS, this eliminates background logic completely.
Give these a try maybe.
Happy Coding. -Asif M
1 - @asadali209Submitted over 3 years ago
This project took me 2 days to complete. Most of my time was consumed due to positioned elements as I am not very good at that. So I would highly appreciate if you guys can give me feedback and also what can I do to improve it. Regards.
@asifm37Posted over 3 years agoHi asadali209, Initially, even I struggled with positioning. My suggestion would be to use flex or grid in CSS. And also I learned that it's better to use bg-images in CSS-background. Hope this helps.
0 - @asifm37Submitted over 3 years ago
In Chrome the Mobile version has a minor gap between the image card and the text card. I couldn't figure out the cause. Any recommendation will be appreciated.
