Skip to content
OverviewSolutions
23
Comments
11
P

Ronnarit00000

@Ronnarit00000310 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Ronnarit00000•310
    @Ronnarit00000Posted 3 months ago

    Good job.

    0
  • P
    Ronnarit00000•310
    @Ronnarit00000Posted 4 months ago

    Well done! It looks good.

    1
  • P
    Gillian Oliveira•260
    @lia-oliveiraSubmitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    The challenges were many. For example:

    Positioning the image in the background The floating numbers The hero image splitting into two separate images I researched, watched an entire course on Flexbox, and used a trial-and-error approach.

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

    I’d like to learn how to position a background image exactly as it appears in the layout and how to control its "zoom" effect.

    Responsive landing page using HTML5 and CSS Flexbox

    1
    P
    Ronnarit00000•310
    @Ronnarit00000Posted 4 months ago

    The pictures size moblie, table and desktop are of different sizes. Make the background "zoom" effect."

    This solution use image desktop-size from url('./../images/desktop/image-footer.jpg') only.

    step 1 : remove image style on viewport 1440

    @media (min-width: 1440px){
.bkg-image {   /*remove this*/
   background-image: url('./../images/desktop/image-footer.jpg');  /*remove this*/
   background-position: top; /*remove this*/
 }
}

    step 2 : remove image style on viewport 768 - 1440

    @media (min-width: 768px) and (max-width: 1440px) {
.bkg-image { /*remove this*/
  background-image: url('./../images/tablet/image-footer.jpg'); /*remove this*/
 } /*remove this*/
}

    step: 3 change image background in the line code : 322

    from

    .bkg-image {
   /*image mobile size*/
   background-image: url('./../images/mobile/image-footer.jpg');
}

    to

    .bkg-image { 
    /*image desktop size*/
    background-image: url('./../images/desktop/image-footer.jpg');
}
    0
  • Tarek Islam•220
    @tarekulSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?
    • Add CSS Grid layout with responsive breakpoints
    • Create custom color variables for consistent theming
    • Implement smooth transitions for width changes
    • Add tablet-specific layout for better UX
    • Update README with solution screenshots and learnings
    What challenges did you encounter, and how did you overcome them?

    1. Grid Layout Complexity

      • Creating a responsive grid that accommodates differently sized cards
      • Managing the unique layout where the first card spans two columns and the last card spans two rows
      • Ensuring the grid maintains visual hierarchy across different screen sizes
      • Implementing a tablet layout that effectively breaks down the desktop design

    2. Responsive Design Issues

      • Cards initially stacked incorrectly in mobile view due to inherited grid positions
      • Had to carefully consider breakpoints (768px for mobile, 1024px for tablet)
      • Needed to adjust the container width (90% mobile, 75% tablet, 55% desktop) for optimal viewing
      • Added max-width to prevent layout from becoming too wide on large screens

    3. CSS Specificity Challenges

      • Encountered issues with grid positioning rules conflicting between breakpoints
      • Explored two solutions: 
        /* Solution 1: Using !important */
.card {
    grid-column: 1 !important;
}

/* Solution 2: Using specific selectors */
.card:nth-child(1), .card:nth-child(2)... {
    grid-column: 1;
}
      • Learned about the trade-offs between using !important and more specific selectors

    4. Design and Styling Details

      • Implementing the quotation mark background image with correct positioning
      • Creating consistent card styles with proper border-radius and padding
      • Managing text opacity for different elements (verified status, testimonial text)
      • Styling profile images with border effects and proper sizing

    5. Performance and Optimization

      • Adding smooth transitions without affecting performance
      • Using CSS custom properties for maintainable color management
      • Organizing CSS with proper grouping of related properties
      • Ensuring the layout transitions smoothly between breakpoints
    What specific areas of your project would you like help with?

    N/a

    Implement responsive testimonials grid with desktop, tablet, and mobil

    1
    P
    Ronnarit00000•310
    @Ronnarit00000Posted 5 months ago

    Hey @tarekul Good work!.

    1
  • P
    Mario Graf-Schantl•540
    @mariosearchteamSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    This one was pretty straight forward, only the top borders of the cards needed a little research to get them straight.

    The scss loop for the four border colors was fun! :)

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

    Every feedback is appreciated, maybe there are more flexible ways to setup the grid?

    Four Cards with HTML and SCSS

    #sass/scss
    1
    P
    Ronnarit00000•310
    @Ronnarit00000Posted 5 months ago

    Good work! I like your feature-card. I have easy way setup grid by create map for feature-card use grid-template-areas

    @media screen and (min-width: 55rem) {
  .features {
    &__cards {
       /*create map*/
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-areas: 
          "card-cyan card-red card-blue"
          "card-cyan card-orange card-blue"
        ;
    }

    &__card {
      max-width:350px; /* fixed card max-width*/
      min-height:250px; /* fixed card min-height */
    }

    &__card-cyan {
      grid-area:card-cyan;
      align-self: center; /* set card center*/
    }

    &__card-red {
       grid-area:card-red;
    }

    &__card-orange {
      grid-area:card-orange;
    }

    &__card-blue {
       grid-area:card-blue;
       align-self: center; /* set card center*/
    }
  }
}
    0
  • P
    Ronnarit00000•310
    @Ronnarit00000Posted 5 months ago

    good work!. one thing in class .card size is over, can try add max-width: 350px and min-height 250px.

    Marked as helpful
    1
View more comments