Skip to content
OverviewSolutions
20
Comments
11

benssssss

@benssssss380 points

I like write code | Retired Beatmaker | Steam High Level

Latest solutions

View more solutions

Latest comments

  • Bareera Nawaz•280
    @bareeranawaz123
    What are you most proud of, and what would you do differently next time?

    I am proud of successfully structuring the Single Price Grid Component using HTML & CSS. Next time, I would optimize the responsiveness further with CSS Grid & Flexbox.

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

    Aligning the grid was challenging, but I fixed it using CSS Grid and Flexbox.

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

    I need help with CSS responsiveness and alignment issues.

    single-grid-component

    #accessibility
    1
    benssssss•380
    @benssssss

    Remove the Width of the Main Container

    To fix the layout issue, remove the fixed width from your main container (.container) and define sizes directly on the specific sections (.top-section and .bottom-section). It seems you set the width this way to optimize for mobile, but it ends up causing issues on desktop.

    /* Remove the fixed width */
.container {
    /* width: 400px; */
}

/* Add specific dimensions to sections */
.top-section {
    width: 600px;
    height: 200px;
}

    Aligning the Sections

    You applied display: flex; to the .bottom-section, but this doesn't affect the layout as intended. Instead, apply display: flex directly to the specific elements (.left-box and .right-box) to align them properly.

    To center elements vertically, use align-items, and to center horizontally, use justify-content. Since the default flex direction is row, and you need it in column, add flex-direction: column as well:

    .left-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .right-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    Centering Content in the Top Section You can also add display: flex to the .top-section. Use flex-direction: column to stack elements vertically and justify-content: center to center them. Since you want the content aligned to the left horizontally, use align-items: start:

    .top-section {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: start; /* Horizontal alignment to the left */
}

    will look very good, but if you want change screen size it will break,

    i cant access your GitHub, so cant write the responsive, a hint is use a media-queries, long story short, allow you make changes on CSS styles based in the screen size

    i noticed that you center all texts, this isn't very good, try align on the corners too

    Hope this give some help,

    continue coding!

  • Lucas Volpato•10
    @Luccas71
    What are you most proud of, and what would you do differently next time?

    Por mais simples que seja, foi a primeira coisa que eu fiz com meus proprios recursos, sem um tutorial passo a passo

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

    centralizar o componente sem usar flexbox

    Componente de QR Code feito usando HTML e CSS

    1
    benssssss•380
    @benssssss

    Olá, vi seu código e vou sugerir algumas alterações.

    Você poderia colocar seus textos (h1 e p) dentro de uma div, assim como fez com a imagem, e então aplicar um padding diretamente nessa div, em vez de colocá-lo nos textos individualmente. Isso tornaria seu CSS mais limpo.

    Notei que você usou translate para centralizar o cartão, o que funciona, mas não é a melhor abordagem, na minha opinião. Como você está aprendendo, pode não ter tido contato com display: flex;, que facilita muito o posicionamento dos elementos com menos código.

    O que eu faria é:

    1 - Remover a centralização do .card

    .card { 
    /* position: absolute; */ /* remover */
    /* top: 50%; */ /* remover */
    /* left: 50%; */ /* remover */
    /* transform: translate(-50%, -50%); */ /* remover */
    /* margin: auto; */ /* remover */

    width: 300px;
    border-radius: 20px;
    background-color: var(--white);
}

    2 - Definir e centralizar o .card usando flex

    body {
    /* max-width: 1444px; */ /* remover */

    font-family: Outfit, Arial, Helvetica, sans-serif;
    background-color: var(--slate-300);

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

    display: flex; define o body como um contêiner flexível.

    justify-content: center; centraliza o .card horizontalmente.

    align-items: center; centraliza o .card verticalmente.

    Porém, por padrão, o body tem a altura do conteúdo (neste caso, o .card, que tem 466px). Se aplicarmos align-items: center;, nada mudará, pois o conteúdo já está no centro do body. Para resolver isso, adicionamos height: 100vh;, que define a altura do body como 100% da tela do dispositivo, garantindo que o .card fique exatamente no meio da página.

    Seu HTML é semântico e seu CSS está bem organizado.

    Parabéns pelo primeiro projeto!

  • benssssss•380
    @benssssss

    Hi, nice work

    I see you're responsive,

    It is breaking when changing screen sizes, because you use too many relative lengths. You could use absolute lengths, and define two width measures, one on mobile (350px/320px) and another on desktop (700px/800px), approximate measures,

    could change your image style, you use display: none to change between it, the best approach would be to use

    <picture>
	<source media="(max-width:)" srcset=""/>	
	<img src="">
<picture>

    It makes possible a change between two images when changing screen widths; instead, use display styles

    Could use <h1> on main title, cause it appear once in the page

    Your code is good, is well-indented and structured, congratulations!

  • Robert Horosewski•310
    @horoserp
    What are you most proud of, and what would you do differently next time?

    The thing I am most proud of was how I was able to use the Figma files to closely match the design.

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

    It had been a while since I used Figma files, so getting reacquainted with them took a few minutes.

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

    If anybody can help me make the box-shadow more like the design, I would really appreciate it.

    QR Code Page using React and CSS

    #react
    2
    benssssss•380
    @benssssss

    Hello, your code is clean, but you could make some changes

    To make the shadow more like you need use the property spread radius (-20px) and add more blur (50px)

    .container {
box-shadow: 0 1px 50px -20px #00000040;
}

    You could put the text (<p> and <h1>) in a <div>, and separate the <img> and this <div> using gap: ; and display: flex; in the .container,

    .container has the same background-color setted in it 2 times,

    use margin: top; on <p> instead padding to separate it from <h1>

    Marked as helpful
  • benssssss•380
    @benssssss

    Your code is amazing!

    in ".text-content" you could setting fixed height div and position elements in it with "justify-content: space-between;" instead gap

    space-between will position all elements inside the container the same way your gap did, but to control the gap size between elements, you set a bigger height, instead define a bigger value to gap property

    .text-content {
    justify-content: space-between;
    height: 180px;
}

    This is a diferent way to position, but your way is very good too, only to show for you another way to do this

    Very good work!

  • P
    ImposterCodeVault•90
    @ImposterCodeVault
    What are you most proud of, and what would you do differently next time?

    This was a basic attempt, that I will compare accounts other solutions to improve upon

    QR Code with HTML and CSS

    2
    benssssss•380
    @benssssss

    Hello, For the first tempt you do very good

    You can do little changes like

    1 - Center the card vertically

    body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

    display: flex; will make a flex container, so you will be able to move div childs,

    When using display: flex; it has a property auto defined that will make the elements inside stay side-by-side, like display: inline; to change you use, flex-direction: column; to make elements positioned in column,

    Your body have a setted height, same as the card, so to your center the content you need define a full height to the body, using height: 100vh; vh is viewport who will give the same height of your screen,

    then justify-content: center; will center the content horizontally

    2 - You can use a css file You have styled the page using , this is not very good because on a bigger code you will lose yourself, instead use a .css file and create a link on your html, will make you code cleaner

    3 - browser auto margin Browsers have a default config of margin, padding, font-size, so you need make a reset on it, so you can apply only style you want, you can use another .css file, like (reset.css) or even in you main .css file

    its like

    * {
    margin: 0;
    padding: 0;
}
    • is a selector that select everything in you html margin and padding: 0 will define a 0 value, so you can style as you wish after on you .css styles

    4 - You use google fonts to import the used font, this is very good, and used variables what is very good too,

    Keep the good work!

    Marked as helpful
View more comments