Text Wrapping in HTML5-CodePudding

Having issues wrapping text around an image (i know) while keeping the HTML5 standard, since all "Tutorials" are outdated at best and dont actually take proper production code into consideration. Text wont wrap around an image in mobile mode, instead it becomes an extremely long column. Problem might be Markup however I tried different parenting and the desired result is missing

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (orientation: portrait) {

.first-text{
  overflow: break-word;
}

.text-wrapper{
  overflow: scroll;
}

 #intro-pic{
  max-height: 20rem;
  max-width: 20rem;
  text-overflow: clip;
}

main{
  margin-top: 1rem;
  font-size: 18px; 
}

<section class="intro">
        <h1>title</h1>
        <article class="intro-text">
            <p class="first-text"> 
                {long ~300 word paragraph redacted for readabilitys sake}
            </p>

            <img src="/img/intro_1.jpg" alt="some words" id="intro-pic">
        </article>
    </section>

Note: Float attribute on img doesnt do anything, thus I left it out

CodePudding user response：

A couple of things...

You need to place the img before the text paragraph you're trying to wrap around.
Once you float an element, you will need to apply a clearfix hack to the parent element to prevent flow issues. I have done this for you in the .clearfix class. More info on the clearfix can be found here.
Per your media query, device-width is deprecated as of Media Queries Level 4, so you use min-width and max-width. More info here
Also on your media queries, I have removed the (orientation: portrait) for the purpose of debugging and previewing on Stackoverflow. Please add it back it if you need it.

Please see the example below with a 300-word paragraph.

@media only screen and (min-width: 375px) and (max-width: 812px) {
  #intro-pic {
    max-height: 20rem;
    max-width: 20rem;
    float: right;
    /* floats the image right */
  }
  main {
    margin-top: 1rem;
    font-size: 18px;
  }
  /* clearfix is used to clear floats */
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
}

<section class="intro">
  <h1>title</h1>
  <article class="intro-text clearfix">
    <img src="http://lorempixel.com/400/200/" alt="some words" id="intro-pic">
    <p class="first-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam cursus orci, a vestibulum turpis ornare sit amet. Maecenas eros leo, mattis hendrerit commodo id, luctus et justo. Nulla a urna orci. Suspendisse tincidunt maximus lectus at venenatis.
      Aliquam erat volutpat. Aenean blandit lobortis vulputate. Fusce sed imperdiet augue. Suspendisse hendrerit, erat nec laoreet fringilla, turpis est fringilla nibh, vitae consectetur tortor velit at nisl. Nullam eleifend blandit magna et suscipit.
      Quisque quis ultricies nunc, a iaculis augue. Nunc auctor hendrerit faucibus. Vestibulum a suscipit odio. Sed tempus bibendum justo, sit amet ultrices lorem tempus nec. Duis placerat nisi in libero efficitur, sit amet viverra orci fermentum. Suspendisse
      varius turpis vel enim condimentum sollicitudin. Etiam id mi at sapien convallis fringilla. Vivamus at malesuada ipsum, nec laoreet eros. Aliquam eros mi, semper eu nisl non, iaculis euismod enim. Praesent vel porttitor elit, ac consectetur libero.
      Ut non ligula eleifend nisl elementum dapibus vel at nulla. Donec sit amet iaculis mi. Nullam sit amet neque feugiat, tempus lorem ac, interdum enim. Vestibulum molestie, ante a pharetra sagittis, ante ipsum convallis libero, viverra mattis risus
      odio eu turpis. Curabitur porttitor tempor purus quis tincidunt. Donec consectetur velit vitae mauris pretium, tempor vestibulum urna euismod. Praesent convallis ex vitae est tempor fringilla. Donec quis turpis lectus. Morbi gravida mauris ut mauris
      tincidunt vehicula. Phasellus auctor dignissim sem id malesuada. Proin hendrerit pulvinar felis, vitae mollis nibh ornare viverra. Ut tincidunt dolor sagittis urna vehicula viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
      per inceptos himenaeos. Duis ut hendrerit turpis. Donec a metus vitae felis venenatis rutrum. Duis ultrices dui et condimentum molestie. Vestibulum ullamcorper tortor felis, id rutrum tellus viverra nec. Mauris quis consectetur leo. Cras convallis
      euismod ornare. Cras vel commodo lectus. Quisque ut pharetra dolor. Aenean ac mattis.
    </p>

  </article>
</section>

CodePudding user response：

Place the image before the text and use the float property to make the text go around the image.