Centred page containing 2 text sections and an image.

shearerviljoen

Hey guys.

I'm really not good at this coding thing, this has just proven it to me.

For what I want to achieve, I know I need to create an HTML with CSS.

On my About page: https://www.shearerviljoen.com/About I want the image, along with the text to remain centred when viewing on a desktop. With the width at 960px and equal empty space above and below.

When resizing the screen, I want the text's width to always fill out to that of the image (960px) and not to expand beyond the boarder.
Also within the text, I want the bottom lines of both paragraphs (left and right) to line up.

And lastly, when viewing on mobile, I am hoping to have both paragraphs aligned to the left.

Below are a few screen shots, where the green is an indication of what I want, and the red is not what I want.

I hope I'm making sense. Please let me know if there is more explanation needed.

Thanks,
Shearer

Hikin' Mike

I can do everything except aligning those paragraphs. It's either impossible or it's beyond my pay grade.

Keep the picture, delete all Text Blocks and spacers and use one HTML/CSS Block:

HTML

<div class="about-container">

  <div class="section english">
    <h2>ABOUT</h2>
    <p>Fashion and beauty photographer and retoucher from Pretoria, South Africa.</p>
    <p>In 2014, after completing my BA in Visual Communications and Design at Open Window, I relocated to Cape Town and started my career in the fashion industry as a photographer.</p>
    <p>Over the years and with the clientele constantly expanding, I now find myself based in Cape Town, South Africa and Munich, Germany.</p>
    <p>Working freelance for clients all around the world, offering services in both photography and/or retouching, I've developed a style noted as "clean and natural," keeping a raw and authentic look to the end results</p>
    <p>I enjoy connecting with other creatives, I drink more coffee than I should, and above all, I thrive on building lasting relationships with my clients all around the world.</p>
  </div>

  <div class="section german">
    <h2>ÜBER</h2>
    <p>Mode- und Schönheitsfotograf und Retoucher aus Pretoria, Südafrika.</p>
    <p>Nach meinem BA in visueller Kommunikation und Design bei Open Window zog ich 2014 nach Kapstadt und begann meine Karriere in der Modebranche als Fotograf.</p>
    <p>Im Laufe der Jahre und mit der ständig wachsenden Kundschaft bin ich nun in Kapstadt, Südafrika und München, Deutschland, ansässig.</p>
    <p>Ich arbeite freiberuflich für Kunden auf der ganzen Welt und biete Dienstleistungen sowohl in der Fotografie als auch in der Retusche an. Ich habe einen Stil entwickelt, der als "sauber und natürlich" bekannt ist und ein "raw" und authentisches Aussehen bis zum Endergebnis bewahrt.</p>
    <p>Ich mag es, mit anderen Kreativen in Kontakt zu treten, ich trinke mehr Kaffee als ich sollte und bin vor allem &nbsp;bestrebt dauerhafte Beziehungen zu meinen Kunden auf der ganzen Welt aufzubauen.</p>
  </div>

</div>

CSS

.about-container {
  display: flex;
  max-width: 960px;
  margin: auto;
  justify-content: space-between;
}

.about-container h2 {font-size: 16px;}
.about-container p {font-size: 12px;}

.section {width: 48%;}

.english {text-align: right;}

@media (max-width: 736px) {

  .about-container {display: block;}
  .section {width: 100%;}
  .english {text-align: left;}

}

Hikin' Mike

I figured out a way to do this, but you have to have two versions of your text. The .section text will be hidden on desktop and the article text will be displayed. When the screen is 736px or smaller, the .section will display and the article will display.

HTML

<div class="about-container">

  <div class="section english">
    <h2>ABOUT</h2>
    <p>Fashion and beauty photographer and retoucher from Pretoria, South Africa.</p>
    <p>In 2014, after completing my BA in Visual Communications and Design at Open Window, I relocated to Cape Town and started my career in the fashion industry as a photographer.</p>
    <p>Over the years and with the clientele constantly expanding, I now find myself based in Cape Town, South Africa and Munich, Germany.</p>
    <p>Working freelance for clients all around the world, offering services in both photography and/or retouching, I've developed a style noted as "clean and natural," keeping a raw and authentic look to the end results</p>
    <p>I enjoy connecting with other creatives, I drink more coffee than I should, and above all, I thrive on building lasting relationships with my clients all around the world.</p>
  </div>

  <div class="section german">
    <h2>ÜBER</h2>
    <p>Mode- und Schönheitsfotograf und Retoucher aus Pretoria, Südafrika.</p>
    <p>Nach meinem BA in visueller Kommunikation und Design bei Open Window zog ich 2014 nach Kapstadt und begann meine Karriere in der Modebranche als Fotograf.</p>
    <p>Im Laufe der Jahre und mit der ständig wachsenden Kundschaft bin ich nun in Kapstadt, Südafrika und München, Deutschland, ansässig.</p>
    <p>Ich arbeite freiberuflich für Kunden auf der ganzen Welt und biete Dienstleistungen sowohl in der Fotografie als auch in der Retusche an. Ich habe einen Stil entwickelt, der als "sauber und natürlich" bekannt ist und ein "raw" und authentisches Aussehen bis zum Endergebnis bewahrt.</p>
    <p>Ich mag es, mit anderen Kreativen in Kontakt zu treten, ich trinke mehr Kaffee als ich sollte und bin vor allem &nbsp;bestrebt dauerhafte Beziehungen zu meinen Kunden auf der ganzen Welt aufzubauen.</p>
  </div>

  <article><h2 class="english">ABOUT</h2></article>
  <article><h2 class="german">ÜBER</h2></article>
  <article><p class="english">Fashion and beauty photographer and retoucher from Pretoria, South Africa.</p></article>
  <article><p class="german">Mode- und Schönheitsfotograf und Retoucher aus Pretoria, Südafrika.</p></article>
  <article><p class="english">In 2014, after completing my BA in Visual Communications and Design at Open Window, I relocated to Cape Town and started my career in the fashion industry as a photographer.</p></article>
  <article><p class="german">Nach meinem BA in visueller Kommunikation und Design bei Open Window zog ich 2014 nach Kapstadt und begann meine Karriere in der Modebranche als Fotograf.</p></article>
  <article><p class="english">Over the years and with the clientele constantly expanding, I now find myself based in Cape Town, South Africa and Munich, Germany.</p></article>
  <article><p class="german">Im Laufe der Jahre und mit der ständig wachsenden Kundschaft bin ich nun in Kapstadt, Südafrika und München, Deutschland, ansässig.</p></article>
  <article><p class="english">Working freelance for clients all around the world, offering services in both photography and/or retouching, I've developed a style noted as "clean and natural," keeping a raw and authentic look to the end results</p></article>
  <article><p class="german">Ich arbeite freiberuflich für Kunden auf der ganzen Welt und biete Dienstleistungen sowohl in der Fotografie als auch in der Retusche an. Ich habe einen Stil entwickelt, der als "sauber und natürlich" bekannt ist und ein "raw" und authentisches Aussehen bis zum Endergebnis bewahrt.</p></article>
  <article><p class="english">I enjoy connecting with other creatives, I drink more coffee than I should, and above all, I thrive on building lasting relationships with my clients all around the world.</p></article>
  <article><p class="german">Ich mag es, mit anderen Kreativen in Kontakt zu treten, ich trinke mehr Kaffee als ich sollte und bin vor allem &nbsp;bestrebt dauerhafte Beziehungen zu meinen Kunden auf der ganzen Welt aufzubauen.</p></article>

</div>

CSS

.about-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
  max-width: 960px;
}

.about-container h2 {font-size: 16px;}
.about-container p {font-size: 12px;}

.english {text-align: right;}

article {width: 48%;}

.section {display: none;}

@media (max-width: 736px) {

  article {display: none;}
  .section {display: block;}
  .english {text-align: left;}

}