ULTRAMAN Posts - Answer Overflow

ULTRAMAN

•Created by ULTRAMAN on 9/20/2024 in #front-end

How to Handle Missing Grid Columns for Mobile Design in Figma?

Hi, so I was watching a Coder Coder project video where she was converting a Figma design to HTML and CSS. The design included grid columns for desktop, tablet, and mobile styles. She was using CSS Grid for the wrapper/container like this:

.wrapper {
  --wrapper-width: 1440px;
  --space-lr: 40px;
  --space-gap: 20px;
  --col-count: 2;
  display: grid;
  grid-template-columns:
    1fr repeat(
      var(--col-count),
      calc(
        (
            min(
                100% - var(--space-lr),
                calc(var(--wrapper-width) - var(--space-lr))
              ) - (var(--col-count) - 1) * var(--space-gap)
          ) / var(--col-count)
      )
    )
    1fr;
  gap: var(--space-gap);
}

.wrapper {
  --wrapper-width: 1440px;
  --space-lr: 40px;
  --space-gap: 20px;
  --col-count: 2;
  display: grid;
  grid-template-columns:
    1fr repeat(
      var(--col-count),
      calc(
        (
            min(
                100% - var(--space-lr),
                calc(var(--wrapper-width) - var(--space-lr))
              ) - (var(--col-count) - 1) * var(--space-gap)
          ) / var(--col-count)
      )
    )
    1fr;
  gap: var(--space-gap);
}

and then she was using grid lines for positioning. So I decided to convert a Figma design into HTML and CSS myself, but the design only has grid columns set for the desktop view. What should I do in this case to create responsive layouts for tablet and mobile?

2 replies

KPCKevin Powell - Community

•Created by ULTRAMAN on 4/5/2024 in #front-end

Seeking Feedback on My First HTML/CSS Project!

Hi web developers, I'm excited to share that I've just completed my very first project using HTML and CSS! 🎉 As a beginner in the world of web development, I've poured my heart and soul into crafting this project, and now I'm eager to seek your valuable feedback. Would you mind taking a look at my code and sharing your thoughts? I'm open to any suggestions, critiques, or tips you may have to offer. Whether it's pointing out areas for improvement, suggesting better practices, or sharing handy tricks, your insights will be immensely helpful in my learning journey. I believe constructive criticism is the key to growth, so don't hold back! Thank you in advance for your time and expertise. I truly appreciate it! 🙏 Looking forward to hearing from you all! Best regards Link: https://chrismaswebsite.netlify.app/ GitHub: https://github.com/abdulahad283/Chrismas-Website

12 replies

KPCKevin Powell - Community

•Created by ULTRAMAN on 3/31/2024 in #front-end

need help

13 replies

Gaming

Programming