Skip to content
OverviewSolutions
14
Comments
12
Mtalafa
@Mtalafa

All comments

  • Jacksen•350
    @jacksen30Submitted about 1 year ago

    Hello, FE-Mentor Crew !

    I'm really new to the <details> and <summary> tags so I'd really appreciate any constructive feedback you may have on my solution.

    Specifically in relation to the height change when a details section is opened, currently the .accordion-wrapper increases in height from the centre but id like the top of the .accordion-wrapper to stay in place and just extend in height / length from the bottom. Also any advice on how I could improve the illustration placement on desktop as well as hiding the overflow.

    Looking forward to starting my next project this afternoon ! Happy <coding /> 💻

    Responsive FAQ's Accordion component using HTML, CSS & Javascript

    1
    Mtalafa•350
    @MtalafaPosted about 1 year ago

    Hi Jacksen,

    Well done for completing this challenge.

    Your card extends from top and bottom because it is centered. So when the height changes it is added from both top and bottom to keep it centered.

    I have not tried this, but I`m guessing you can use grid on your accordions to make sure they have the same height and then leave one of them open when the page loads in. This way your box will stay the same height when you open another one.

    Marked as helpful
    1
  • Annika Veksø•40
    @VeksoeSubmitted about 1 year ago

    I had some issues with "resetting" the grid in the media queries, but I managed to figure it in the end - I think.

    Everything else seems to have went okay, but I do have some questions I hope someone can help me with!

    • We are given some sizes for desktop and mobile, and I'm not sure how to work with them. I believe my screen is 1920px wide, so do I have to do anything in the code to match the 1440px or is the given size mostly for those working on screen smaller than the 1440px? I hope my question make sense.
    • Should I have added some shadow? It seems that some of the boxes have shadow, but in the mobile version the shadow seems a bit more random. I feel like all the projects have shadow on the bottom and right side, so is just something from FrontendMentor, or an actual design choice?

    Responsive Testimonials Grid Section

    2
    Mtalafa•350
    @MtalafaPosted about 1 year ago

    Hi, Annika

    Regarding your question about the sizes. 1440px refers to the size of your design. In your case this is the main. You can remove the margin from the main and add max-width 1440px. then in order to center it you use flexbox on the body adding a min-height of 100VH align items and justify content center

    If you want it perfectly centered you need to remove the footer that is added by default. The one saying challenge by frontend mentor

    Hope this helps. Have a good day

    Marked as helpful
    0
  • NBD•240
    @bdal90Submitted about 1 year ago

    Hey All,

    Here is my next project. No fixed widths, no heights, first time I didn't actually set the size of the container initially and I made my life much easier! Any comments are welcome.

    Cheers,

    Dalma

    Starting to Grasp Responsiveness

    2
    Mtalafa•350
    @MtalafaPosted about 1 year ago

    Hi Dalma, -Well done for completing this challenge. -Here are some suggestions. -I noticed that as you hover over the button everything gets a bit bigger because of the border of the button. You can fix this by adding the border to the original state of your button and make it same color as the background. -Another way to fix this is to remove the border from the button:hover and replace it with this:
    'box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, 0.75);'
    This will add a shadow inside the button and it will not mess with your spacing. -I also noticed that you did your media queries for 400px max-width. Your design gets messed up before it reaches 400px. I would recommend changing it to 650-700px. -Hope this helps. Minden jot kivanok

    Marked as helpful
    0
  • Frida 🌼•90
    @FridaWaldtSubmitted about 1 year ago

    One of the questions I had for this project was if there's a better way to place the images in the banners than I did by using #id for each and adding a background-image? I'd love any feedback really regarding best practices in any capacity, I'm here to learn and improve! Thank you all in advice for being so kind to review my work.

    Mobile-first Time Tracker Challenge using NextJS

    2
    Mtalafa•350
    @MtalafaPosted about 1 year ago

    Hi, well done on completing this challenge.

    I`m not very good yet with JavaScript but I did have a quick look at your CSS.

    You can add this: transition: all 0.3s; to everything that changes on hovering, like for example the .lastweek

    This will make the transition from the original color to the hover color more smooth.

    Marked as helpful
    0
  • David Grossmann•110
    @davidgrossmannSubmitted about 1 year ago

    This was interesting css grid challenge. I have use it to practice, what I have learned about Grid and fall in love with grid-template-areas while doing so. I am still not sure, when to use Flexbox and when Grid. Any ideas and suggestions?

    Grid areas solution

    1
    Mtalafa•350
    @MtalafaPosted about 1 year ago

    Hi, well done fore completing this challenge. Looks good and is responsive. About your question. when to use Gris and when to use Flexbox. You can use Grid when the size of things is important . In this case the size of each article is important so you used Grid. And you can use Flex when size is not important, like putting the small img and the name next to each other. Hope this helps. Happy coding

    Marked as helpful
    2
  • parkerrn9•210
    @parkerrn9Submitted about 1 year ago

    I'm looking for feedback on my 'Testimonials Grid Section Main' project, and I'm particularly interested in your insights in the following areas:

    1. Layout and Responsiveness: I want to ensure that the layout of the testimonials grid is visually appealing and that it works well on various screen sizes and devices. In particular, I've noticed that in the mobile version, it may be necessary to increase the viewport height to fully view the design, and I'd appreciate feedback on this aspect.

    2. CSS Styling: I'd appreciate feedback on my CSS techniques, including the styling of elements and any opportunities for improvement in terms of design and aesthetics.

    3. Code Organization and Structure: I'm keen to know if the code is well-organized, efficient, and follows best practices. Please provide insights on the logical structure of my code.

    4. Accessibility and User Experience: Any suggestions related to improving the accessibility and overall user experience of the project are highly valued.

    -- Any Specific Enhancements: If there are specific aspects or features you believe could be enhanced or refined, please share your thoughts.

    Your feedback will greatly assist me in refining this project, and I'm eager to learn from your valuable insights. Thank you in advance for your help!

    Testimonials Grid Section Main

    1
    Mtalafa•350
    @MtalafaPosted about 1 year ago

    Hi there, Well done for completing the challenge, however it is totally unresponsive to smaller screens. So here are some suggestions: Remove the 'centered' class. To center everything you can add this on the body: display: flex; align-items: center; justify-content: center; min-height: 100vh; You should use CSS grid to solve this challenge. From the 'wrapper' remove: width: 350px; padding: 5em 0; Now add to the 'wrapper': display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); Now each of your 'person' boxes is a grid item, so you can lay them out one by one like in the solution. If you don`t know how CSS Grid works I recommend watching some videos and reading about it.

    0
  • MelodyPatin•40
    @MelodyPatinSubmitted about 1 year ago

    Here is my second frontendmentor challenge! The result is not bad, but the code seems a bit messy to me. Let me know what you think :) Also, if someone knows the "trick" to change the color of an SVG on hover, I tried using "fill: white" but it seems I may not have used it correctly...

    Responsive landing page

    1
    Mtalafa•350
    @MtalafaPosted about 1 year ago

    Hi, First of all, well done on completing this challenge. To change the color of the svg, copy it into your html (not as img) and delete the following from the svg: fill="#2C7566" fill-rule="nonzero". After you can add fill in css, you can also add fill on hover. You can also add this to the original state of your links: transition: all .3s; When you hover over a button or a link the transition from one color to the other will be more smooth. Happy coding.

    Marked as helpful
    0
  • Mtalafa•350
    @MtalafaPosted about 1 year ago

    Hi,

    Seems like the image is missing from your solution.

    This is how you added the image: <img src="images/image-qr-code.png" alt="" class="img-fluid"> In your project folder you have no folder named images Try adding it like this: <img src="image-qr-code.png" alt="" class="img-fluid"> You should also provide alternative info for the image: <img src="image-qr-code.png" alt="Image of a qr code" class="img-fluid">

    Marked as helpful
    0
  • Mtalafa•350
    @MtalafaPosted about 1 year ago

    Hi, To change the font size:

    h1 { font-size: 40px; }

    1
  • Clémence Tafforeau•110
    @ClemenceTafforeauSubmitted about 1 year ago

    I didn't struggle much with this one ; the only difficulty I encountered was how to add the cards' colored top border without it following the curve. I added an empty div with a background color and it did the trick. Is there an easier/better way to achieve this? Thank you for your feedback.

    Four card feature section solution - HTML and CSS

    1
    Mtalafa•350
    @MtalafaPosted about 1 year ago

    Hi,

    You can add border-top to your card like this:

    border-top: 4px solid #color;

    0
  • Mazen Mohamed•90
    @lowkey-mazenSubmitted about 1 year ago

    I need some help with a couple of things if anyone can help: 1- Positioning 2- Flex, FlexBox, Grid 3- How to write clean code 4- Js So if you know any (free because I am broke) courses or websites to help me with those topics that would be greatly appreciated, and any tips on this design would be helpful as well :)

    3-column preview card using HTML and CSS

    3
    Mtalafa•350
    @MtalafaPosted about 1 year ago

    Hi,

    On the frontend mentor website, on the top right you have: challenges, solutions and resources. If you click on the resources you will find plenty of websites where you can learn front end development for free.

    Hope this helps. Happy coding!

    Marked as helpful
    0
  • Lauren Delmar•80
    @lrdelmarSubmitted about 1 year ago

    I found it difficult to align the qr component in the center vertically so I did a bit of searching around and found a solution on Stack Overflow, which was to use absolute positioning and set the position to 50% and use transform translate by -50%.

    I am wondering if this is best practice? I am able to center content using flexbox but this only seemed to be working horizontally and not vertically. When using align-content it didn't seem to move. I thought maybe I needed to set a height for this to work but it didn't have any effect.

    I had originally created padding around the qr image however this created problems with the border-radius, so I changed this to margin and set the image to 90% width instead.

    QR Code for Desktop and Mobile

    3
    Mtalafa•350
    @MtalafaPosted about 1 year ago

    Lauren Delmar, well done for completing your first challenge. The way you centered it it`s not wrong, but you can also do it with flexbox in the following way: display: flex; align-items: center; justify-content: center; height: 100vh; You can also check my solution, I centered it with flexbox. Hope this helps. Happy coding!

    Also, I usually delete the footer from my projects. If you have the footer as well and you display flex on the body you should use flex-direction: column; as well

    Marked as helpful
    1