Skip to content
OverviewSolutions
18
Comments
12
Genildo Cerqueira Souza
@Genildocs

All comments

  • Alisson Lins•100
    @AlissonLinsSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Demorar menos na criação das resoluções

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

    Deixar o layout responsivo, principalmente na questão do mobile e as configurações dos botões que apesar da configuração no js não funcionam como deveriam para o desafio.

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

    As configurações do botão do JS, tive muita dificuldade com eles e ainda não consegui faze-los funcionar corretamente.

    Dropdown-Navigation

    1
    Genildo Cerqueira Souza•470
    @GenildocsPosted 3 months ago

    Hello, congratulations on completing the challenge. I hope these tips help you with the buttons.

    • In the class "one," use top for alignment.
    .one {
    /* bottom: -170px; */
    right: 0;
    top: 30px;
}
    • Remove the display: none property from the "menu-secundary" class.
    • Create a "close" class with the following values:
    opacity: 0;
visibility: hidden;
    • You need to apply the toggle to the div that contains the modal with the items. For example, in this "menu-secundario one" div.
    Marked as helpful
    1
  • AdamullaOsas•800
    @AdamullaOsasSubmitted 3 months ago
    What specific areas of your project would you like help with?

    There are little borders, especially in corner of my boxes and I dont know how to fix them

    html, sass, js

    1
    Genildo Cerqueira Souza•470
    @GenildocsPosted 3 months ago

    Here is the translation to English:

    Hello, congratulations on completing the challenge. Regarding the borders, try increasing the border-radius of the .box div and removing the overflow property.

    body section .box {
    border-radius: 20px;
    width: 255px;
    position: relative;
    /* overflow: hidden; */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

    I tested it here, and it worked. You’ll just need to position the image by adjusting the top value.

    Marked as helpful
    0
  • dooffenschmitz•60
    @DgitialSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully implementing a responsive design that adapts well to different screen sizes. The media queries effectively adjust the layout and text size, ensuring the content remains visually appealing and functional across devices. Next time, I would focus on enhancing flexibility and maintainability by exploring advanced layout techniques like CSS Grid or Flexbox. This could improve control over positioning and responsiveness. Additionally, optimizing CSS for performance and conducting thorough cross-browser testing would help ensure consistency and efficiency across different environments.

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

    I encountered challenges with responsive design, text alignment, and cross-browser consistency. I overcame these by implementing media queries, adjusting CSS properties, and conducting thorough cross-browser testing, while also streamlining the CSS for efficiency.

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

    I’d like help with refining the responsive design to ensure optimal performance across all device sizes and browsers. Specifically, I’m interested in improving the efficiency of my CSS and exploring advanced layout techniques, such as CSS Grid or Flexbox, to enhance flexibility and maintainability.

    responsive CSS styling

    1
    Genildo Cerqueira Souza•470
    @GenildocsPosted 3 months ago

    Here is the translation to English:

    Hello, congratulations on completing the challenge. As a tip, don't apply a fixed height and width to the body. For center alignment, you can do it like this by applying the style directly to the body:

    body{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: bisque;
    min-height: 100vh;
}

    This way, you can already achieve good responsiveness across different resolutions.
    I hope this helps.

    Marked as helpful
    0
  • Cesar Ramirez•100
    @sean365-bitSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Please check out my solution, there are some areas that I would like to improve, if you have any feedback, please let me know. Best Regards

    Tip Calculator App

    1
    Genildo Cerqueira Souza•470
    @GenildocsPosted 3 months ago

    Here’s the translation:

    Hello, congratulations on completing the challenge.
    As a tip, I believe it would be more effective to apply the flex property directly to the body instead of creating the div with the class main-container.
    Example:

    body {
    background-color: var(--light-grayish-cyan);
    font-family: "Space Mono", monospace;
    font-weight: 700;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    Apply the flex property to calculate and create two div elements, one for the calculation and another to display the value.

    <main class="container">
    <div class="section-1"></div>
    <div class="section-2"></div>
</main>

    In the input div, it would be helpful to separate bill, select tip, and number of people each into their own div. This makes it easier to apply styles, and you wouldn't need to use inputForm.

    To properly align select tip, use the grid property and divide it into 3 columns.
    Example:

    .section-1 .percentage-number {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 10rem));
    grid-gap: 2rem;
}
    Marked as helpful
    0
  • جهاد أحمد•280
    @Gehad28Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Proud that using grid to implement the layout was easy, finally :D

    Also, proud I could use relative and absolute positions to put the quotation image, as I always afraid of using them 😅

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

    I tried to use subgrid to align all cards' content, but it was a nightmare 🤦🏻‍♀️, so I just used some padding and margin to align them.

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

    Any feedback is welcomed :)

    Testimonials Grid Section

    1
    Genildo Cerqueira Souza•470
    @GenildocsPosted 3 months ago

    Hello, congratulations on completing the challenge.
    Here are some tips for you:

    • In the grid, there’s a property called auto-fit that automatically reorganizes grid items according to their size. It might be interesting for you to try it out instead of switching to display: flex for mobile device resolutions.
    • Example:
    .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  row-gap: 25px;
}
    • To use this property, it's mandatory to have minmax for the grid items.

    If this approach isn’t suitable, you could start by creating the grid for mobile devices first and then use media queries to adjust the columns.

    • Example:
    .container {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 25px;
}
.card {
  width: 300px;
  height: 300px;
  background-color: #ea7777;
  border: 1px solid black;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 25px;
  }
}

    I hope these tips can help you.

    Marked as helpful
    0
  • Genildo Cerqueira Souza•470
    @GenildocsPosted 11 months ago

    Hello, congratulations on completing the challenge! I have some suggestions to enhance the design. In the footer, consider placing the links within the <a> tags to make them clickable. Here's an example:

    <ul>
    <li><a href="#">Press Kit</a></li>
    <li><a href="#">Install Guide</a></li>
</ul>

    Additionally, you can remove the inline styles within the HTML:

    I recommend using a CSS preprocessor like Sass, as it can streamline your stylesheets and improve maintainability.

    Feel free to keep the following information inside the footer tag:

    <footer>
    Challenge by Frontend Mentor. Coded by Mudassar Majeed.
</footer>

    I hope these suggestions prove helpful in refining your design. If you have any questions or need further assistance, feel free to ask!

    0
  • abedzeidan•340
    @Abed001Submitted 11 months ago

    hello, I have two questions: when you visit the pages you will notice that the image takes time to load, second I couldn't figure out how to make the page on the navbar active when clicked although I did it for the JSON data.thanks in advance

    space exploration website using react ,tailwind ,json data

    1
    Genildo Cerqueira Souza•470
    @GenildocsPosted 11 months ago

    Hello, congratulations on finishing the challenge. One tip you could implement would be to use the minimum height setting at 100vh so that the background covers 100% of the page.

    .w-full {
    width: 100%; 
    min-height: 100vh;
}
    Marked as helpful
    1
  • Gr3g0ry99•120
    @Gr3g0ry99Submitted over 1 year ago

    Enjoyed this one! Starting to get the hang of using grid and flexbox, whilst also learning JavaScript. If anyone could help me with the following that would be appreciated:

    I know the CSS is messy, is there a good way of simplifying this code? I know I have repeated a few things that I could easily simplify but any best practises would help me.

    What are the best breaking points for media queries with a design like this?

    I have used a lot of absolute font sizes and image sizes, is there a better way such as using Rem and Em?

    I used grid and flexbox for mobile, I know I can just change the grid to span one column but it is very easy just to change it to flexbox for mobile, is this a bad practise?

    How are the semantics with my HTML?

    Responsive News Homepage using Grid and Flexbox

    1
    Genildo Cerqueira Souza•470
    @GenildocsPosted over 1 year ago

    Hello, congratulations on completing the challenge!

    One way to simplify your CSS code would be to use a preprocessor like SASS, which has tools such as mixins and variables to avoid code repetition.

    Regarding breakpoints, I suggest using the developer tool to identify the points where the layout begins to break and make adjustments at those points.

    Regarding font size, use the REM unit, which utilizes the font settings of the root element. In this element, try setting the font size in percentage, for example:

    html{ font-size: 62.5%;}

    In this configuration, the font size is set to 10 pixels, so the REM unit will be relative to this value, making it easier for you to use.

    Regarding the grid, you wouldn't need to change to flex-box, you could have configured the grid on mobile devices to have only one column. I hope these suggestions have been helpful.

    Marked as helpful
    0
  • Genildo Cerqueira Souza•470
    @GenildocsPosted over 1 year ago

    Hi there! Congratulations on completing the challenge!

    As a suggestion, I believe you could have used display grid to define the entire layout of the page and use flex-box only on one-dimensional elements. For example, by applying grid to the "main" block, you could align the elements more efficiently.

    For the main image, I recommend not defining a fixed height and instead letting the element take up 100% of its parent element or using the max-height property for better responsiveness to different screen sizes.

    Lastly, I suggest using grid in the "bottom" section and flex-box on child elements for a better outcome.

    I hope these suggestions are helpful in improving your work!

    0
  • Genildo Cerqueira Souza•470
    @GenildocsPosted over 1 year ago

    Hello, congratulations on completing the challenge!

    As a tip, I advise you to use images with the width property set to 100% of its parent element, so it will adapt to different screen widths.

    Also, opt for relative widths such as em, rem, percentage, instead of fixed widths like px.

    You can also use flexbox for other elements, for example, you could have used it for aligning the information section and the image.

    I hope these tips are helpful in some way. Again, congratulations on completing the challenge.

    Marked as helpful
    1
  • Orazbek•110
    @orazdaurenovSubmitted over 1 year ago

    Here's my solution to this challenge.

    I still have a small issue regarding the items that go off, including the footer, when the page is resized.

    Any your feedback and advices are more than welcome !

    Thank you

    Responsive Order Summary Component

    3
    Genildo Cerqueira Souza•470
    @GenildocsPosted over 1 year ago

    Hello, sorry for the delay in responding. You can do it this way, put the content of the footer in a div, for example:

    <footer> <div class="">content</div> </footer> This way you can apply the display flex to the footer without affecting the elements contained in it.
    0
  • Orazbek•110
    @orazdaurenovSubmitted over 1 year ago

    Here's my solution to this challenge.

    I still have a small issue regarding the items that go off, including the footer, when the page is resized.

    Any your feedback and advices are more than welcome !

    Thank you

    Responsive Order Summary Component

    3
    Genildo Cerqueira Souza•470
    @GenildocsPosted over 1 year ago

    Hello, congratulations on completing the challenge!

    • I have a recommendation about the footer section, could you apply flex-box to it and center-align it, then give it a height so it doesn't get stuck to the main content. It also doesn't have enough width to grow and scale the content correctly.

    I hope I have helped.

    0