Aligning Text to the side of an image – with inline CSS and HTML

On November 9, 2023November 10, 2023 By AndyIn html

Had to do this using inline styles to override stuff in the stylesheet etc

<div class="responsive-container" style="display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 0px; margin-bottom: 0rem;">
  <div class="text-container" style="flex: 1; min-width: 0; margin-right: 20px;">
    <h3 style="margin-bottom: 0.4rem;">FIFA Basic</h3>
    <p>
      Gyda nod ansawdd FIFA Basic, mae Pêl-droed Clwb FORZA yn opsiwn cost-effeithiol ar gyfer timau pêl-droed o bob lefel ar gyllideb. Ar gael mewn meintiau 3, 4, a 5, mae'r peli hyn yn addas ar gyfer pob oed. Mae'r bledren butyl wedi'i amgylchynu gan chwe phanel wedi'i wasgu â gwres gyda deunydd polywrethan 1.2mm o drwch, i helpu'r bêl i gadw ei siâp ar ôl effeithiau dirifedi, yn ogystal â gwneud y bêl-droed o ansawdd gêm yn gwrthsefyll rhwyg ac yn gwrthsefyll y tywydd ym mhob cyflwr. Mae Pêl-droed Clwb FORZA ar gael mewn pecynnau o naill ai 1, 3, neu 30 pêl, ac mewn dau gyfuniad lliw (Gwyn a Glas neu Gwyn a Phinc).
    </p>
  </div>
  <img class="responsive-image" src="https://nwscdn.com/media/wysiwyg/buyersguide/FIFA-Basic-Logo.png" style="max-width: 100%; flex-shrink: 0; width: 250px; align-self: flex-start;">
</div>

<style>
  @media (max-width: 768px) {
    .responsive-container {
      flex-direction: column;
    }
    .text-container {
      margin-right: 0;
    }
    .responsive-image {
      width: 100%;
      max-width: 100%;
      margin-top: 20px;
      align-self: center;
    }
  }
</style>

Obviously, you probably want to change the parapraph text in the <p> and </p> tags and the header in <h3> tags and the image URL

I couldn’t do it all with inline styles in the end – media query had to be put in <style> tags in the HTML doc.

If you’re using a normal webpage – you want the style tags in the <head>

Leave a comment Cancel reply