Ne Kr Ne Kr - 1 month ago 4
CSS Question

make exact padding on text

I am curious about how I can make a 100% correct padding. The text on the picture has to follow the blue line. That means "kvalifikationsbeskrivelse", "Indhold", and the text, has to be in line with "Slides fra forelæsninger".

At the moment I am guessing the padding-left: 20px; , but it is not gonna be correct. Is there a smart way I can do it in CSS?

Portfolio

Picture

Answer

You messed up your markup quite a bit.

  1. In portfolio section (<section class="portfolio">) find:

<div class="col-md-12 col-sm-12 col-xs-12">
<h4 class="h4 courses">Slides Fra Forelæsninger</h4>
<hr>
</div>

and wrap it with <div class="row"> like so:

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h4 class="h4 courses">Slides Fra Forelæsninger</h4>
        <hr>
    </div>
</div>
  1. Further it goes another portfolio section (<section class="portfolio">) inside same node:

<section class="portfolio">
<div class="container">
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
</div>
</section>

Change it to:

<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>

So basically just remove wrapping <section> and <div> tags.


The rule of thumb working with bootstrap is to follow the structure of your document:

<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">...</div>
  </div>
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">...</div>
  </div>
  ...
</div>

The reason for your broken markup is that you repeatedly calling <section class="portfolio"> and <div class="container"> which are in fact should be called just once. To strengthen the theory just checkout Bootstrap Grid section


You can grab the code and replace your markup:

<!-- begin portfolio section -->
<section class="portfolio">
  PASTE THE CODE
</section>

<div class="container">
	<div class="row">
		<div class="col-md-12 col-sm-12 col-xs-12">

			<!-- Kursus beskrivelse -->

			<h4>Kvalifikationsbeskrivelse</h4>
			<p>
				Deltagerne vil efter kurset have et grundlag for at forstå den historiske udvikling i forhold til design som en skabende
				praksis og dets samvirken med den samfundsmæssige udvikling. Perspektivere forskellige design tilgange, og deraf følgende
				designteorier typisk båret af idealer og politiske perspektiver. Kursets arbejdsform vil også træne deltagernes evne
				til at formidle og kommunikere faglige problemstillinger. Deltagerne skal ved afslutningen af kurset kunne:
			</p>
			<ul>
				<li class="courses">Identificere forskellige designretninger og teorier i hverdags produkter og services.</li>
				<li class="courses">Reflektere over forskellige design teoriers styrker og svagheder.</li>
				<li class="courses">Anvende data, illustrationer og interaktive kvaliteter på tværs af programpakker til digital præsentation og illustration
					af et pervasive computing artefakt eller miljø.</li>
			</ul>
			<h4>Indhold</h4>
			<p>
				På trods af at de forskellige designperspektiver havde deres storhed på bestemte tidspunkter er de alle at finde i mere eller
				mindre rendyrket grad i de produkter vi omgiver os med til hverdag. Kurset vil introducere de fremherskende 'designskoler'
				(e.g. Bauhaus, Ulm, Cranbrook) og deres tænkning op gennem det 20 århundrede.
			</p>

		</div>
	</div>

	<!-- Forelæsninger slides -->

	<div class="row">
		<div class="col-md-12 col-sm-12 col-xs-12">
			<h4 class="h4 courses">Slides Fra Forelæsninger</h4>
			<hr>
		</div>
	</div>

	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="/courses/AU-pensum/designteori-og-historie/forelaesninger-slides/2art_nov2.pdf" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/courses/au/designteori-og-historie/forelaesninger-slides/frihedskamp-og-fremtidsforelskelse.jpg" alt="Designteori">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Frihedskamp Og Fremtidsforelskelse
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image6.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Appointment with Client
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image2.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Football in Grass
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>
	</div>

	<!-- Afleveringer -->

	<div class="row">
		<div class="col-md-12 col-sm-12 col-xs-12">
			<h4 class="h4 courses">Afleveringer Uddrag</h4>
			<hr>
		</div>
	</div>

	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/courses/au/designteori-og-historie/forelaesninger-slides/frihedskamp-og-fremtidsforelskelse.jpg" alt="Designteori">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Frihedskamp Og Fremtidsforelskelse
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image6.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Appointment with Client
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image2.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Football in Grass
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>
	</div>


	<!-- Tekniske Øvelser -->

	<div class="row">
		<div class="col-md-12 col-sm-12 col-xs-12">
			<h4 class="h4 courses">Tekniske Øvelser</h4>
			<hr>
		</div>
	</div>

	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/courses/au/designteori-og-historie/forelaesninger-slides/frihedskamp-og-fremtidsforelskelse.jpg" alt="Designteori">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Frihedskamp Og Fremtidsforelskelse
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image6.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Appointment with Client
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image1.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red Pepper on Wood
					</h3>
				</div>
			</article>

		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image3.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						People on Overlook
					</h3>
				</div>
			</article>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image4.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Camera Vintage Style
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image2.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Football in Grass
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>

		<div class="col-md-3 col-sm-6 col-xs-12">
			<article class="block-thumbnail">
				<a href="#" class="block-thumb">
					<div class="block-image">
						<div class="overlay"></div>
						<img src="/images/thumbs/image5.jpg" alt="portfolio item">
					</div>
				</a>
				<div class="block-data">
					<h3>
						Red &amp; White Tire Stack
					</h3>
				</div>
			</article>
		</div>
	</div>
</div>

Screenshot of working solution

Comments