Skip to content
OverviewSolutions
24
Comments
10
João Vitor
@jvssvj

All comments

  • Natalia Fracasso•100
    @nataliafracassoSubmitted 12 months ago

    I'm having a problem with responsiveness, scrolling is happening and the image is leaking. Any help and feedback are welcome.

    QR code component

    4
    João Vitor•420
    @jvssvjPosted 12 months ago

    Hello, the problem is with the width. You are setting the fixed width ex.(width: 450px;) instead of ex.(max-width: 450px;). ex:

    main {
    width:100%
    max-width: 500px;
}

    This applies to all your code. Good luck 😊

    Marked as helpful
    0
  • Kurt3z•80
    @Kurt3zSubmitted about 1 year ago

    Any feedback would be extremely welcome.

    Thank you in advance,

    Kurt3z

    QR CODE COMPONENT

    1
    João Vitor•420
    @jvssvjPosted about 1 year ago

    Hi, I'll give you some tips. To use width, replace it with width 100% and then max-witdh:(desired size) so that it has a maximum width, instead of a fixed width, this way you don't need to use media query and it will adjust to any resolution. Take a look at my code, you'll understand better what I'm saying:: https://www.frontendmentor.io/solutions/frontend-mentor-qr-code-component-vPyueruwoI

    Marked as helpful
    1
  • Emile Avoscan•310
    @AvoscanEmileSubmitted about 1 year ago

    I'm revisiting my projects to make them simpler. This one is the first project I made using CSS Grid. Grid its useful for the weird combination of needing a square on top of an image that adapts to the size of the image. On the other parts of the layour I used CSS flexbox (Since I believe it's way simpler to use). I always use CSS variables since they improve readability a lot and make maintaining CSS code way simpler.

    Responsive Stats Preview Card Component

    1
    João Vitor•420
    @jvssvjPosted about 1 year ago

    It turned out very good

    1
  • OLGA•150
    @OLMA08Submitted about 1 year ago

    Does anyone have an idea on how to fit the "pro Monday" text into the $29 line? How do you find it otherwise? Are suggestions for improvement desired?

    HTML & Css single-price-grid

    1
    João Vitor•420
    @jvssvjPosted about 1 year ago

    Hello, you can do the following:

    HTML:

    <div class= 'dollar'>
	<b>&dollar;29 </b><span>per month</span>
</div>

CSS:
.dollar {
     display: flex;
      align-items: center;
       gap: .3rem;
}
    Marked as helpful
    0
  • João Vitor•420
    @jvssvjPosted over 1 year ago

    main { min-height: 100vh; display: grid; place-items: center; }

    Use the properties to center, congratulations on completing the project

    1
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqSubmitted over 1 year ago

    👾 Hello, Frontend Mentor Community,

    This is my solution for the FAQ Accordion Card Challenge .

    • I learned how to use and style the <details> and <summary> HTML elements.
    • Eventhough the <details> doesn't need JavaScript i used it to ensure that only one summary want to show up during others are closed.
    • If all summary are opened it's not looking nice, so only i provided that logic using js
    • Scored 100% on Google Pagespeed Insights! 🤩
    • Layout was built responsive via mobile first workflow approach
    • Had a lots of fun building this challenge !

    Now for the questions :

    • I have no idea about heading structures, if you have any idea regarding to improve my heading structure then please leave a feedback
    • And the <details> element has support for tabfocus, so when the user hits the tab then outline will arise if user hit enter then summary is opened. But how a visibility disabled person can use this ? i used screen readers but i'm not satisfied with that
    • Finally, Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

    .

    👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

    Ill be happy to hear any feedback and advice !

    FAQ Accordion Card 🎯 [ USING DETAIL SUMMARY - VANILLA CSS3 - BEM ]

    2
    João Vitor•420
    @jvssvjPosted over 1 year ago

    It turned out better than the original design, very good friend 🤩

    2
  • Douglas•170
    @douglas-yokomizoSubmitted over 1 year ago

    I found out a way to finish the challenge but I think my CSS is a little confusing. I'd like some tips on how to improve the organization of it and how to start properly

    QR code component

    3
    João Vitor•420
    @jvssvjPosted over 1 year ago

    Hello friend, I have some tips, in your HTML you can put all your content (main class = container). Create a div class = card /// Create a div just for the text /// Create a div for the qr-code

    In your CSS use display:grid for the center (center by container)

    • min-height:100vh
    • display: grid
    • place-items: center

    I recommend you do your css again, look for videos on YT about your doubts. Good Luck

    Marked as helpful
    0
  • João Vitor•420
    @jvssvjPosted over 1 year ago

    It turned out very well friend, but pay attention to the details, like the color of the title. In your HTML, you can put all your text in one (div class=text) to be more organized. You are on the right path 😉

    1
  • João Vitor•420
    @jvssvjPosted over 1 year ago

    Hello friend, I'll give you some tips, to center the text (text-align:center;). Group all content into (main class=container). Use (width:#;) to limit the space consumed by the text. Wrap all your text in (div class=text). You are on the right track.

    0
  • João Vitor•420
    @jvssvjPosted over 1 year ago

    Hello, I'll give you some tips, put all your content in <main class=container>. To centralize

    .container { height:100vh display:grid place-items:center }

    In your ".card" delete the settings of "display:flex". In your ".container" delete the "width: 1440px; height: 2560px;".

    Marked as helpful
    1