Skip to content
OverviewSolutions
15
Comments
13
Babajide Peter Oyafemi
@Babajide777

All comments

  • Rado•150
    @Nezo96Submitted over 2 years ago

    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 😁.

    Four Card Feature Section

    2
    Babajide Peter Oyafemi•200
    @Babajide777Posted over 2 years ago

    Great job @Nezo9, but the website breaks a little at 820px(tablet mode), also always adopt a mobile first setup.

    0
  • Babajide Peter Oyafemi•200
    @Babajide777Posted over 2 years ago

    Your solution seems to be for only mobile display. The media query for desktop display isn't working.

    1
  • Babajide Peter Oyafemi•200
    @Babajide777Posted about 3 years ago

    @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-EritonsSubmitted about 3 years ago

    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

    Flexbox

    1
    Babajide Peter Oyafemi•200
    @Babajide777Posted about 3 years ago

    @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
  • Babajide Peter Oyafemi•200
    @Babajide777Posted about 3 years ago

    @JulienLEUILLIER Thanks it is working fine now. Regards.

    0
  • Babajide Peter Oyafemi•200
    @Babajide777Posted about 3 years ago

    @MirthOsas it still doesn't work with the quotation marks.

    0
  • Babajide Peter Oyafemi•200
    @Babajide777Posted about 3 years ago

    @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
  • Babajide Peter Oyafemi•200
    @Babajide777Posted about 3 years ago

    @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
  • Babajide Peter Oyafemi•200
    @Babajide777Posted about 3 years ago

    Is using React and Material UI for this project not an overkill?

    0
  • Babajide Peter Oyafemi•200
    @Babajide777Posted about 3 years ago

    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-1Submitted about 3 years ago

    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 ..........?

    flex box cards

    2
    Babajide Peter Oyafemi•200
    @Babajide777Posted about 3 years ago

    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
    @knankovSubmitted about 3 years ago

    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

    3-column-preview-card-component

    2
    Babajide Peter Oyafemi•200
    @Babajide777Posted about 3 years ago

    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