my grids all screwed up and idk what went wrong

eyntivemd
Newbie ⚓︎

BLEHHHH

⛺︎ My Room

my grids all screwed up and idk what went wrong

« on: August 29, 2025 @82.77 »

hey im tryna like set up an interests page and i have this grid with some boxes in it with info but the main info box is for some reason stuck on the far right part of the page and no matter what i do it refuses to like move over so idk lol any ideas?

Code

<!DOCTYPE html>
<html>

  <style>
  
  img{
  border: grey outset;  
  background: rgba(161, 88, 77, 1);
  width: 20%
  }
  
  p1{
  color: black;  
  border: grey outset;
  background: rgba(161, 88, 77, 1);;
  justify-self: left;
  width: 20%
  }
  
  body{
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(funni.png);;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    }
  
    
  .interest1{
    background: rgba(245, 73, 39, 0.3);
    border: grey outset;
    display: grid;
    width: 70%;
    grid-template-rows: repeat(3);
    padding: 5px;
    }
    
  .text{
    grid-row-start: 1;
    grid-row-end: 4;
    border: grey outset;
    text-align: left;
    }
    
  .favch{
    grid-row: 2 / 3;
    }
  
  </style>

  <body>
  
  <center>

      
      <div class="interest1">
    
        <img src="viynl.png" class="favch">
        
        <div class="text">
        
          <p2> pony:3 </p2>
        
        </div>
      <p1>
        <div class="name">MLP</div>
      </p1>
      <p1>
        <div>fav ch: vinyl scratch</div>
      </p1>
      
      </div>
      
    
  </center>
  
  </body>
  
</html>


	Logged

EYNTIVEMD

MediocreMetastasis
Full Member ⚓︎

Personal Text

⛺︎ My Room
Itch.io: My Games

Re: my grids all screwed up and idk what went wrong

« Reply #1 on: August 29, 2025 @254.41 »

I fiddled with the css to make it work. I added grid-template-columns: 20% 1fr; which gives the profile 20% of the box and the main text box the rest of the area. I made the img and p1 elements have 100% width and gave the text class 50% (I think you can increase it to 100%)

Spoiler

Code

	  <style>
	  
	  img{
	  border: grey outset;  
	  background: rgba(161, 88, 77, 1);
	  width: 100%;
	  }
	  
	  p1{
	  color: black;  
	  border: grey outset;
	  background: rgba(161, 88, 77, 1);;
          width: 100%;
	  }
	  
	  body{
	    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(funni.png);;
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-attachment: fixed;
	    }
	  
	    
	  .interest1{
	    background: rgba(245, 73, 39, 0.3);
	    border: grey outset;
	    display: grid;
	    width: 70%;
	    grid-template-rows: repeat(3);
            grid-template-columns: 20% 1fr;
	    padding: 5px;
            justify-content: center;
	    }
	    
	  .text{
	    grid-row: 1 / span 3;
            grid-column: 2;
	    border: grey outset;
	    text-align: left;
            width: 50%;
            justify-self: center;
	    }
	    
	  .favch{
	    grid-row: 2 / span 1;
	    }
	  
	  </style>

[close]


	Logged

eyntivemd
Newbie ⚓︎

BLEHHHH

⛺︎ My Room

Re: my grids all screwed up and idk what went wrong

« Reply #2 on: August 29, 2025 @266.56 »

Quote from: MediocreMetastasis on August 29, 2025 @254.41

Spoiler

Code

	  <style>
	  
	  img{
	  border: grey outset;  
	  background: rgba(161, 88, 77, 1);
	  width: 100%;
	  }
	  
	  p1{
	  color: black;  
	  border: grey outset;
	  background: rgba(161, 88, 77, 1);;
          width: 100%;
	  }
	  
	  body{
	    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(funni.png);;
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-attachment: fixed;
	    }
	  
	    
	  .interest1{
	    background: rgba(245, 73, 39, 0.3);
	    border: grey outset;
	    display: grid;
	    width: 70%;
	    grid-template-rows: repeat(3);
            grid-template-columns: 20% 1fr;
	    padding: 5px;
            justify-content: center;
	    }
	    
	  .text{
	    grid-row: 1 / span 3;
            grid-column: 2;
	    border: grey outset;
	    text-align: left;
            width: 50%;
            justify-self: center;
	    }
	    
	  .favch{
	    grid-row: 2 / span 1;
	    }
	  
	  </style>

[close]

yes dude this is amazing thanks alot
and awsome signature too


	Logged

EYNTIVEMD

Pages: [1]

« previous next »