my grids all screwed up and idk what went wrong - ☔︎ ∙ I need Help!

eyntivemd
Newbie ⚓︎

BLEHHHH
⛺︎ My Room

Guild Memberships:

Artifacts:

my grids all screwed up and idk what went wrong

« on: a Summer night »

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

Artifact Swap:

MediocreMetastasis
Sr. Member ⚓︎

Wishlist Skelecool: Remnants Please!!!
⛺︎ My Room
Itch.io: My Games

Guild Memberships:

Artifacts:

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

« Reply #1 on: a Summer night »

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

https://mediocremetastasis.neocities.org/Assets/Skelecool2/cadavspeen.gif

wishlist my game

https://mediocremetastasis.neocities.org/Assets/Skelecool2/skelecoolspeen.gif

Artifact Swap:

eyntivemd
Newbie ⚓︎

BLEHHHH
⛺︎ My Room

Guild Memberships:

Artifacts:

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

« Reply #2 on: a Summer night »

Quote from: MediocreMetastasis on a Summer night

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

Artifact Swap:

Pages: [1]

« previous next »