CODEWITHSUNDEEP
csscss-grid
erin
erin

Reputation: 23

Using grid for layout, have unwanted padding left of first picture

There is unwanted padding on the left of my first img, with this layout. The only other question I found like this, suggested putting margin:0, but I already have that at the top of my css. This specific part of my code is part of a media query if that is relevant. (also for the #intro snippet, for me on here it shows some of them indented differently from each other, but they are indented right on dreamweaver, but editing doesnt seem to fix them on here sorry)

	#intro{
	    display:grid;
		grid-template-columns: 1fr 1fr 1fr;
	    grid-template-areas: 
		"a c b";
		grid-column-gap: 40px;
		grid-template-rows: auto;
	}

	#intro img{
		padding-bottom: 30px;
	}

	#intro img:first-of-type{
		grid-area: a;
	}

	#intro img:last-of-type {
		grid-area: b;
	}

	#intro p{
		grid-area: c;
		font-size: 25px;
		padding:30px 0px;
		line-height: 40px;
		text-align: center;
	}
<section id="intro">
		
		
		<img src="https://via.placeholder.com/150/" alt="c 1">

		<img src="https://via.placeholder.com/150/" alt="c 2">

		<p>By popular demand...</p>
	
		
	</section>

Upvotes: 0

Views: 152

Answers (2)

Akash Preet
Akash Preet

Reputation: 4885

html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
 max-width: 100%;
 height: auto;
}

Use Minimal CSS Reset before your style.

normalize.css

Check this stackoverflow question

Upvotes: 1

Mohamed Farouk
Mohamed Farouk

Reputation: 1107

Add 

body {
    margin: 0px;
}


body {
    margin: 0px;
}
#intro{
	    display:grid;
		grid-template-columns: 1fr 1fr 1fr;
	    grid-template-areas: 
		"a c b";
		grid-column-gap: 40px;
		grid-template-rows: auto;
	}

	#intro img{
		padding-bottom: 30px;
	}

	#intro img:first-of-type{
		grid-area: a;
	}

	#intro img:last-of-type {
		grid-area: b;
	}

	#intro p{
		grid-area: c;
		font-size: 25px;
		padding:30px 0px;
		line-height: 40px;
		text-align: center;
	}
<section id="intro">
		
		
		<img src="https://via.placeholder.com/150/" alt="c 1">

		<img src="https://via.placeholder.com/150/" alt="c 2">

		<p>By popular demand...</p>
	
		
	</section>

Upvotes: 0

Related Questions