Rado• 150
@Nezo96
Submitted
After long time i completed another project. This one was not too hard but i had hard time to fix some issues with responsive design but i managed to do it 😁.
Babajide Peter Oyafemi
@Babajide777
All comments
@Babajide777
Posted
Great job @Nezo9, but the website breaks a little at 820px(tablet mode), also always adopt a mobile first setup.
0- RTX3070• 490
@RTX3070
Submitted
Feedbacks are welcomed! : )
@Babajide777
Posted
Your solution seems to be for only mobile display. The media query for desktop display isn't working.
1 @Babajide777
Submitted
I further improved my skills with CSS Grid and SASS. I will like your comments on what I could have done better. Regards.
@Babajide777
Posted
@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.
1- Eriton_• 60
@Both-Eritons
Submitted
Sorry if I'm wrong... but the reason is that I did it on my cell phone because I'm without a PC and besides I'm starting now. obs: i'm using translator hahaha i'm portuguese and my english is bad
@Babajide777
Posted
@Both-Eritons I believe it is better you get a PC so that your websites and web applications come about better than this. Regards.
1 @Babajide777
Submitted
Good day all,
This is my first time using SASS, so I'll appreciate any comment on the file structure and how to make it better. Regards.
@Babajide777
Posted
@JulienLEUILLIER Thanks it is working fine now. Regards.
0@Babajide777
Submitted
Good day all,
This is my first time using SASS, so I'll appreciate any comment on the file structure and how to make it better. Regards.
@Babajide777
Posted
@MirthOsas it still doesn't work with the quotation marks.
0@Babajide777
Submitted
Good day all,
This is my first time using SASS, so I'll appreciate any comment on the file structure and how to make it better. Regards.
@Babajide777
Posted
@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.
0@Babajide777
Submitted
Good day all,
This is my first time using SASS, so I'll appreciate any comment on the file structure and how to make it better. Regards.
@Babajide777
Posted
@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; }0- Gábor Rajczi• 10
@gabor-rajczi
Submitted
Sould I customize the MaterialUI theme in this way?
@Babajide777
Posted
Is using React and Material UI for this project not an overkill?
0 - Jai Patel• 10
@goldenPheonix02
Submitted
Having trouble with the mobile design :(
@Babajide777
Posted
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
0 - Lealem Birhanu• 75
@Aklog-1
Submitted
if you look at the buttons, they have a color of the background of their respective card. is there any way to make that happen with out specifically calling each "learn more" button? I mean like by making their color transparent or / and ..........?
@Babajide777
Posted
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
0 - Kiril• 20
@knankov
Submitted
Hi guys.
How did you solve the issue with the transparency(opacity) of the buttons? when not active their text color is the same like the background of the respective block(div). I was trying to style them at once and somehow made the text transparent but it didn't worked. So finally I had to make three classes and give color(same like background color of the div) for every text of the buttons. Could you please share some tips.
Best Regards, Kiril
@Babajide777
Posted
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
0 @Oscarandio
Submitted
Hello! The desktop version looks amazing. I dare to say it looks exactly the same as the preview, but I can not say the same with the mobile version... Can someone help me to make this responsive and looking good on mobile version? I know about the mediaqueries and all that, but for some reason I can not make it work. I would appreciate some guiding here, thanks!
*Things needed on mobile version: Change the border-radius and the width of the boxes.
@Babajide777
Posted
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
1
