DUDEYRUDEY Comments - Answer Overflow

DUDEYRUDEY

Posts Comments

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 1/23/2025 in #front-end

grid-row-columns: image overflowing out of grid item in grid layout.

17 replies

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 1/23/2025 in #front-end

grid-row-columns: image overflowing out of grid item in grid layout.

I would have liked in this situation, to have the image size proportionally and nicely by itself. If I hide the overflow it goes over the padding I have in my card and it still does not resize properly. How would I prevent my image from overflowing over the padding and allow my image to resize properly.

17 replies

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 1/23/2025 in #front-end

grid-row-columns: image overflowing out of grid item in grid layout.

Yeah. I have done this and everything is working. I’m still interested why in this case the image flowed out the bottom. Do you have any idea why?

17 replies

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 1/23/2025 in #front-end

grid-row-columns: image overflowing out of grid item in grid layout.

I don't know. I want to have 3 cards stacked vertically on smaller screens and than 3 cards stacked horizontally on larger screens , on my website design. I wanted to use grid to achieve the horizontal design on larger screens. Do you think I should not use grid for small screen, and than use grid for large screen?

17 replies

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 1/23/2025 in #front-end

grid-row-columns: image overflowing out of grid item in grid layout.

Yes here it is. I have put the issue into a code sandbox: https://codesandbox.io/p/sandbox/xy3l2p

17 replies

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 1/23/2025 in #front-end

grid-row-columns: image overflowing out of grid item in grid layout.

Here is my css:

.project{
    padding: 2rem 1.5rem; 
    background: blue;
    /* background-image:url("../../assets/legoBlocks.jpeg"); */
    color: black; 
  }

  .card__img{
    max-width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; 
    
  }

  /* layout */

  .projects-list{
    display: grid; 
    grid-template-rows: repeat(3, minmax(0, 300px));
    
    grid-gap: 2rem 0; 
  }


  .card{
    padding: 1.5rem; 
    background: red; 
    color: black; 
    
    height: 100%; 
  }

.project{
    padding: 2rem 1.5rem; 
    background: blue;
    /* background-image:url("../../assets/legoBlocks.jpeg"); */
    color: black; 
  }

  .card__img{
    max-width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; 
    
  }

  /* layout */

  .projects-list{
    display: grid; 
    grid-template-rows: repeat(3, minmax(0, 300px));
    
    grid-gap: 2rem 0; 
  }


  .card{
    padding: 1.5rem; 
    background: red; 
    color: black; 
    
    height: 100%; 
  }

17 replies

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 1/23/2025 in #front-end

grid-row-columns: image overflowing out of grid item in grid layout.

<div className="projects-list">
                    <div className="card">
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                        
                    </div>
                    <div className="card"> 
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                    </div>
                    <div className="card navigation--assistant">
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                    </div>
                    
                </div>
            </div>

<div className="projects-list">
                    <div className="card">
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                        
                    </div>
                    <div className="card"> 
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                    </div>
                    <div className="card navigation--assistant">
                        <div className="card__text">
                            <h2 className="card__heading">lorem 20 here</h2>
                            <p className="card__subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat debitis deserunt nisi porro vero a adipisci vel ducimus sequi odio.</p>
                        </div>
                        <img href="#" src={AtcEntrance} className="card__img"/>
                    </div>
                    
                </div>
            </div>

17 replies

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 12/6/2024 in #front-end

Creating a scalable button with text and a SVG icon

Ok. So I have made some changes. Removed the font--size attribute and specified svg just with the width. It's creating a resizable button. Does this look good?

.btn{
    display: inline-flex; 
    align-self: flex-start; 
    align-items:center;
    font-size: 2rem; 
    padding: 0.5em 1em; 
    gap: 0.3em; 
    font-family: "DM Serif Text", "Roboto", "Open Sans", sans-serif;
    letter-spacing: 1.5px; 
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}


.btn__text {
    font-size: 1em; 
  }

.svg{
    width: 1em; 
    fill: red; 
}

.btn{
    display: inline-flex; 
    align-self: flex-start; 
    align-items:center;
    font-size: 2rem; 
    padding: 0.5em 1em; 
    gap: 0.3em; 
    font-family: "DM Serif Text", "Roboto", "Open Sans", sans-serif;
    letter-spacing: 1.5px; 
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}


.btn__text {
    font-size: 1em; 
  }

.svg{
    width: 1em; 
    fill: red; 
}

18 replies

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 12/6/2024 in #front-end

Creating a scalable button with text and a SVG icon

18 replies

KPCKevin Powell - Community

•Created by DUDEYRUDEY on 12/6/2024 in #front-end

Creating a scalable button with text and a SVG icon

18 replies

Gaming

Programming