Skip to content
OverviewSolutions
13
Comments
25
P
Jayco
@jayco01

All comments

  • P
    Jayco•330
    @jayco01Posted 1 day ago

    I really like the cool animation and how responsive the site feels. It’s really polished.

    Here's some feedback on areas that could be improved:

    1. Theme Toggle Visibility: The theme toggle button blends into the website background, which makes it hard to see. Maybe a more contrasting color or a subtle shadow would help it stand out.

    2. Character Limit Input: The character limit input field accepts letters, but it should only allow numbers. Adding some validation could improve user experience.

    3. Sentence Counter Accuracy: The sentence counter doesn't seem to count sentences ending with a question mark.

    Marked as helpful
    1
  • P
    Jayco•330
    @jayco01Posted 4 days ago

    I noticed your grid is sticking to the top left of the screen when viewed on a desktop resolution. Instead of being centered, it feels unbalanced and crammed to one side.

    Potential reason:

    • No max-width or width on the .container Without a defined width, the grid takes up all available horizontal space but doesn't align itself properly.
    1
  • P
    Jayco•330
    @jayco01Posted 4 days ago

    I noticed an issue with your project where the grid doesn’t seem to fill up the entire screen on smaller resolutions. It only fills up the left side of the screen instead of stretching across the full width.

    Potential reasons why:

    • Grid Columns Setting You are using grid-template-columns: repeat(4, 1fr); which is not adjusting properly for smaller screen sizes.
    0
  • P
    Jayco•330
    @jayco01Posted 6 days ago

    I noticed that the quotation mark image doesn’t disappear or adjust on smaller screens, and it ends up sitting right on top of the text, which makes it harder to read. There are a couple of ways you could improve that:

    You could wrap it in a <picture> element with a <source> that only loads the image at larger screen widths. That way, the quotation mark only appears when there’s enough space for it.

    <picture>
  <source media="(min-width: 768px)" srcset="images/bg-pattern-quotation.svg">
  <img src="" alt="" style="display: none;">
</picture>

    Or, even better, you could set it as a background image using CSS. That way, it won’t overlap the text no matter the screen size, and you can control its position more easily.

    Either approach would help keep things clean and readable on mobile.

    0
  • Akshay Gir•40
    @akshaygir15Submitted 12 days ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of the clean, organized grid layout and the effective use of typography and image styling. Next time, I’d focus on enhancing responsiveness with media queries for mobile devices or by utilizing Bootstrap to adjust the layout, and also improve accessibility by incorporating more semantic HTML.

    What challenges did you encounter, and how did you overcome them?

    The challenges I encountered were:

    1. Achieving consistent box sizes for the grid created with <div> tags.
    2. Applying the correct shadow effect to the main container.
    3. Adjusting the spacing and font height accurately.
    4. Ensuring the correct height and width for both the <body> and the main container.
    5. Positioning the quotation symbol behind elements using the z-index property, making it closely match the design.
    What specific areas of your project would you like help with?

    I would like help with two specific areas of my project -

    1.Adjusting the box shadow effect to ensure consistency across all testimonial boxes in terms of direction, intensity, and spread.

    1. I’m looking for guidance on implementing responsive design using either Bootstrap or media queries to ensure the layout adapts smoothly across different screen sizes.

    I used CSS grid, flexbox, and custom fonts to style the layout.

    1
    P
    Jayco•330
    @jayco01Posted 12 days ago

    I noticed that the website isn’t responsive on smaller screens. On mobile devices, the layout doesn't adjust, which causes the content to overflow or appear too small. To fix this, you need to add a @media query to adjust your grid layout for mobile screen sizes.

    Here's an example you could add to the bottom of your CSS:

    @media (max-width: 768px) {
  .container-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem;
  }

  .box {
    width: 100%;
    margin: 1rem 0;
  }
}

    This makes the layout stack vertically and ensures that each card fits within the mobile screen. You can also adjust the padding and font sizes as needed.

    0
  • P
    Oryan Hachamoff•250
    @oryanhachSubmitted 15 days ago
    What are you most proud of, and what would you do differently next time?

    First time really trying to work with a Grid layout. It was pretty challenging, but I learnt a lot. First time also working with positioning and using an SVG file as on the background. While I have many things here to be improved (such as redundant and duplicated CSS rules, not pixel perfect...) I am very proud of myself as it is probably the longest challenge I had so far with Frontend Mentor.

    Testimonials Grid Section Solution

    4
    P
    Jayco•330
    @jayco01Posted 14 days ago

    The font sizes are fixed, which makes the text look smaller than expected on larger screens. Since this is a text-heavy design, making the font sizes responsive would improve readability and user experience.

    A good way to do this is by using clamp(), which allows the font size to scale based on screen width. For example:

    font-size: clamp(1.5rem, 5vw, 2.5rem);

    This ensures the text remains readable on smaller screens while getting slightly larger on bigger screens, without being overwhelming. You could also experiment with em or rem units instead of fixed px values to make the scaling feel more natural.

    Marked as helpful
    1
  • David França•100
    @david-francaSubmitted 19 days ago
    What are you most proud of, and what would you do differently next time?

    Eu pude implementar e praticar um pouco mais o uso de seletores CSS e display Grid. Ainda não está perfeito, mas por agora é o suficiente para a prática atual.

    What challenges did you encounter, and how did you overcome them?

    Em como deixar o container do grid centralizado na tela sem fazer o scroll da tela aparecer devido ao tamanho da altura.

    What specific areas of your project would you like help with?

    Nada em particular

    Responsive Testimonials with grid

    1
    P
    Jayco•330
    @jayco01Posted 15 days ago

    I noticed that the text in the testimonials looks too small on larger screens, making it harder to read. Since this is a text-heavy design, adjusting the font size responsively would help a lot. Try using clamp() to make the text scale better across different screen sizes:

    font-size: clamp(1rem, 5vw, 2.5rem);

    This way, the text stays readable on smaller screens while getting larger on bigger screens

    0
  • JxGrim•170
    @AJsemSubmitted 19 days ago
    What are you most proud of, and what would you do differently next time?

    Everything, I was able to make multiple breakpoints to make it not only mobile and desktop responsible, but tablet responsive. The page is actually static though and the height is based on the content, in most boxings, there are no margins just justify content and space-between. If content is less or more, the spaces correct acting as margin might get cramped with text. Note edit the context, so we are fine. haha

    What challenges did you encounter, and how did you overcome them?

    Breakpoints, that was though main. I just had to use personal breakpoints which are closed to standard breakpoints. 576px is not min-width for mobile desktop. it goes up to about 660px.

    What specific areas of your project would you like help with?

    None for now. I am all good man.

    Semantic and Css FlexBox

    #pure-css
    1
    P
    Jayco•330
    @jayco01Posted 17 days ago

    I noticed that the text on the cards with a white background is a bit hard to read. The light text color blends into the background, making it difficult to focus on the content.

    Suggested Solution

    To improve readability, you could change the text color on the white background cards to something darker for better contrast. There's no need to change the text color on the other boxes, just the ones with a white background.

    0
  • P
    Jayco•330
    @jayco01Posted 17 days ago

    I noticed that the cards don't have a box shadow, which makes the transition between the cards and the background feel a bit harsh. Adding a subtle shadow can help create better visual separation and depth, making the design look more polished.

    Suggested Solution

    To improve this, you could add a box-shadow to .container .box like this:

    .container .box {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

    This will give the cards a soft shadow, making the design feel more layered and modern. You can tweak the shadow values to match the aesthetic you're aiming for.

    0
  • KojoYeboah12•130
    @KojoYeboah12Submitted 17 days ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the progress and achievements made during this project, especially in overcoming challenges and delivering a functional solution. Seeing the idea come to life and making an impact is incredibly rewarding.

    If I were to do it again, I would focus more on refining the planning phase to improve efficiency and minimize unexpected obstacles. I would also explore better ways to gather feedback earlier in the process to ensure continuous improvements along the way.

    What challenges did you encounter, and how did you overcome them?

    One of the great aspects of this project was that I didn’t encounter any major challenges. The process went smoothly, thanks to careful planning, effective execution, and the right resources.

    However, I remained open to learning and improving, and I would still look for ways to refine and optimize the approach for even better results in the future.

    testimonials-grid-section-main

    1
    P
    Jayco•330
    @jayco01Posted 17 days ago

    I noticed that the layout isn't responsive on mobile devices, especially for screen sizes around 375px.

    Suggested Solution

    Option 1: Tweak the Grid for Mobile

    Add a media query to target mobile devices:

    @media (max-width: 375px) {
  main {
    grid-template-columns: 1fr; /* Stack everything in one column */
  }
}

    This way, you keep the grid but have all the cards stack in a single column. It'll make everything easier to read on mobile.

    Option 2: Switch to Flexbox on Mobile

    Or, you could ditch the grid layout just for mobile and go with Flexbox:

    @media (max-width: 375px) {
  main {
    display: flex;
    flex-direction: column;
    gap: 1em; /* Add some space between the sections */
  }
}

    This will simplify things and stack each section nicely without overlapping.

    0
  • P
    Jayco•330
    @jayco01Posted 17 days ago

    I really like the creative approach you took with the design! It’s cool to see a unique take on the layout. One thing I’d suggest is tweaking the background color since the black feels a bit harsh against the softer tones of the newsletter card. Maybe something more earthy would balance it out better. Also, the text color blends in a bit with the card, so adding more contrast could really help make the text pop and improve readability.

    On the functionality side, I noticed the form validation isn’t quite working as expected. Even when I entered a valid email, it still showed an error. It might be because the validation is checking for an exact match. You could try using a regex pattern to check for a valid email format instead. Overall though, great job! A few small tweaks and it’ll be even better.

    0
  • P
    Jayco•330
    @jayco01Posted 22 days ago

    Hey Tryt4n! Great job on the project! Your data fetching and dynamic updates are solid. One thing I noticed is that on larger screens, the layout feels a bit small—maybe increasing the container width could help.

    Also, I noticed multiple instances of using clamp() for padding like this:

    • padding: clamp(0.425rem, 2vw, 0.5rem) clamp(0rem, 2vw, 0rem) clamp(0.425rem, 2vw, 0.5rem) clamp(0rem, 2vw, 0rem);
    • It feels a bit overcomplicated, especially with zero values.
    0
  • P
    Jayco•330
    @jayco01Posted 26 days ago

    Hey Denise! Your code is clean, well-structured, and super easy to follow, better than mine. I love how you handled the error styling with CSS and how smooth the form transition feels. Everything works just the way it should, which is awesome!

    One tiny thing I noticed, when you dismiss the success message, the email input still keeps whatever was typed in before. It might feel a bit more polished if the field clears after dismissing, so the user can start fresh when they come back to the form.

    Marked as helpful
    0
  • P
    Jayco•330
    @jayco01Posted about 1 month ago

    Great job on your Article Preview Component! Your solution is really well-structured, and I think it's even better than mine. Your use of CSS transitions for the share popup makes the interaction much smoother, and I like how you positioned the shared link block with a subtle animation effect—it adds a nice touch of polish to the user experience.

    Your JavaScript is clean and efficient, keeping it simple with a single class toggle. I also appreciate your thoughtful media queries, ensuring the component adapts well across different screen sizes.

    Honestly, I have no negative feedback

    1
  • P
    Emil Raubach•140
    @emil-raubachSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Not a lot to be honest, even though this is marked as 'Newbie' I found it to be a difficult challenge! I am glad I was able to get something together that somewhat meets the requirements within the time-frame I allotted to this exercise. But, I dont' feel like my solution is really all that good. I think next time if I tried this challenge over, I would not use Sass, I would try the 'mobile first' type design approach, and look for ways to make the site more responsive without being so heavy-handed with the layout algorithms.

    What challenges did you encounter, and how did you overcome them?

    I struggled with Sass as I was starting with too many features at once (e.g., partials, mixins, etc). I deleted everything and started over with a single scss file and increased the complexity from there only as needed. Other areas of struggle were with the hero images and how to get them positioned and to scale correctly as the viewport size changed. I tried using flexbox and then ultimately went with css grid but feel like I didn't nail the layout either way. I looked at some other solutions for inspiration as well, and that was helpful to get unstuck in some places.

    What specific areas of your project would you like help with?

    I feel like my overall approach to this challenge was not great. I'm not sure how I grouped the content and put the elements in sections was the optimal for placing everything, and laying it out per the design. I really don't like the way the images scale and couldn't get the spacing on the desktop layout to look like the Figma file without the images squeezing down or some other aspect looking off. The footer section with the background image overlay was also something I struggle with figuring out. It doesn't seem to scale well with the tablet and smaller device sizes, especially the spacing of the content.

    Meet landing page using flexbox, css grid, BEM and Sass

    #bem#sass/scss
    1
    P
    Jayco•330
    @jayco01Posted about 1 month ago

    Your solution is amazing! way better than mine. The layout is beautifully structured, and the responsiveness works seamlessly across different screen sizes. I love how clean and well-organized your HTML and CSS are, making it easy to read and maintain.

    0
  • P
    Jayco•330
    @jayco01Posted about 1 month ago

    Hey! Great job on completing the challenge! Here are a couple of suggestions:

    1. Clearer Class Names: Some class names, like .white1 and .white2, don’t really describe what they do. Instead, using names like .testimonial--light or .testimonial--secondary would make it clearer at a glance. This small change can help make your CSS easier to understand and maintain in the future.

    2. Simplify the Grid Layout: Right now, you’re setting grid-column-start, grid-row-start, and other grid properties as CSS variables, which is a cool idea, but it might be making things more complicated than necessary. Instead, it would be easier to just define these directly in the .card classes inside the media query. That way, your layout is easier to read and tweak without having to dig through multiple layers of variables.

    Hope this helps!

    Marked as helpful
    0
  • P
    Jayco•330
    @jayco01Posted about 1 month ago

    Hey! Your project looks great, and I can see you’ve put in a lot of effort. Here are a few friendly suggestions:

    1. Simplify Your CSS Structure Your CSS does a great job at making the layout responsive, but there are quite a few repeated styles, especially in defining column layouts (.c-1, .c-2, .m-1, .m-2, .l-1, .l-2). Instead of defining each width manually, using CSS Grid or Flexbox could help simplify things. This would make your code more efficient and easier to maintain!

    2. Make Class Names More Descriptive Some of your class names could be a bit clearer. For example, testimonial__img could be renamed to testimonial__quotation-mark so it's immediately clear what it represents. Small tweaks like this can make your code more readable at a glance!

    3. Adjust the Quotation Mark Image for Different Screens I noticed the quotation mark image appears on both mobile and desktop, but it’s only supposed to be visible on larger screens. Instead of using display: none;, you could make sure it only appears in larger screen sizes with a media query. That way, the design stays true to the challenge!

    Hope this helps!

    0
  • P
    Jayco•330
    @jayco01Posted about 1 month ago

    Hey Arman! Great job on your Four Card Feature Section! Your layout is well-structured, and the use of CSS Grid makes the cards align nicely. The responsiveness is also well-implemented, especially with your media queries.

    Suggestions for Improvement:

    1. Class Naming Could Be More Descriptive Currently, classes like .box, .box1, .box2, etc., are too generic and don't describe their purpose well. Consider using more meaningful names like .card--supervisor, .card--team-builder, etc. This improves readability and makes the CSS easier to maintain.

    2. Add Shadows for Better Visibility Since both the body background and the cards are white, the cards blend into the background. Adding a subtle shadow will help them stand out. A light box-shadow effect will create better contrast and improve readability.

    Overall, your solution is Amazing!

    0