@Nezo96
Babajide Peter Oyafemi
@Babajide777All comments
- @Babajide777
Great job @Nezo9, but the website breaks a little at 820px(tablet mode), also always adopt a mobile first setup.
- @RTX3070@Babajide777
Your solution seems to be for only mobile display. The media query for desktop display isn't working.
- @Babajide777@Babajide777
@pikamart Thanks for your in-depth feedback. I did use a mobile-first approach, but I want to work with only 2 breakpoints for now. I will increase the first breakpoint to about 475px for other projects as you advised. I plan to use 3, 4, or 5 breakpoints when I get to more complex projects like landing pages. I really appreciate you taking the time to look at my work. Regards.
- @Both-Eritons@Babajide777
@Both-Eritons I believe it is better you get a PC so that your websites and web applications come about better than this. Regards.
- @Babajide777@Babajide777
@JulienLEUILLIER Thanks it is working fine now. Regards.
- @Babajide777@Babajide777
@MirthOsas it still doesn't work with the quotation marks.
- @Babajide777@Babajide777
@marcus-hugo
Thanks for your time. I really appreciate it. However, the background is still not showing. I updated my code on Github and the live website. Please check it here: https://github.com/Babajide777/faq-accordion-card
https://babajide-faq-accordion-card.netlify.app/
Regards.
- @Babajide777@Babajide777
@marcus-hugo Thanks for the advice Marcos, but I used this method, and for some reason, the background image doesn't show up. Please what do you think might be wrong? This is the code:
.accordion-svg { background-image: url(../images/illustration-woman-online-desktop.svg), url(../images/bg-pattern-desktop.svg); background-position: -76px, -571px; background-size: 472px, 966px; background-repeat: no-repeat; } - @gabor-rajczi@Babajide777
Is using React and Material UI for this project not an overkill?
- @goldenPheonix02@Babajide777
I think giving the card class a max-width of 90% will solve the issue. Or you can also put a padding-left and right on the body to prevent the card from touching the sides.
Marked as helpful - @Aklog-1@Babajide777
The way I did it was to make them inherit the background color of their parent. background-color: inherit; You can check my solution to understand better: https://www.frontendmentor.io/solutions/semantic-html5-markup-css3-flexbox-grid-fZ4rIBPVH
Marked as helpful - @knankov@Babajide777
I simply made the background color inherit the background color of its parent. background-color: inherit; You can check my solution to understand better: https://www.frontendmentor.io/solutions/semantic-html5-markup-css3-flexbox-grid-fZ4rIBPVH
- @Oscarandio@Babajide777
Hi Oscarandio,
I advise you use CSS Grid to make it more responsive. CSS grid made build the project a lot easier. You can check my solution here: https://www.frontendmentor.io/solutions/semantic-html5-markup-css3-flexbox-grid-fZ4rIBPVH
