one inner div seperates into 2 un-designated columns in mobile-CodePudding

I have a flexible-width div with a top margin of -99px, though I don't see where that's an issue. It's that div which, when viewed on mobile rather than desk-top, splits the text contents into 2 columns - and there are no columns whatsoever in my page! I want it display as the 3 centered lines vertically in one "column" within the box as it does in the screen version.

You can see it at http://myimagefiles.com/sally/prodbox.html. Code follows...

body {
  font-family: Arial, Helvetica, san-serif;
}

img {
  max-width: 100%;
}

.cont {
  width: 100%;
  max-width: 1000px;
  position: relative;
  margin: auto;
  border: solid #000 3px;
}

.hdrrow {
  display: block;
  width: 1000px;
  height: 575px;
  position: relative;
  margin: auto;
}

.sec2 {
  width: 100%;
  max-width: 700px;
  position: relative;
  margin: auto;
  height: auto;
}

#img1 {
  display: block;
}

#img2 {
  display: none;
}

.prodttl {
  width: max-content;
  display: block;
  position: relative;
  margin: auto;
  border: 11px solid #000;
  padding: 8px;
  border-radius: 10px;
  margin-top: -33px;
  z-index: 5;
  background: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 1.15em;
}


/*.prodttlsub { font-weight:bold; font-size:.95em; }*/

@media only screen and (max-width:700px) {
  .cont {
    width: 100%;
    max-width: 350px;
    position: relative;
    margin: auto;
    border: none;
  }
  .hdrrow {
    display: block;
    width: 100%;
    height: 396px;
    position: relative;
    margin: auto;
  }
  .sec2 {
    width: 100%;
    max-width: 350px;
    position: relative;
    margin: auto;
    height: auto;
  }
  #img1 {
    display: none;
  }
  #img2 {
    display: block;
    margin: 0 auto;
  }
  .prodttl {
    max-width: 90%;
    position: relative;
    margin: auto;
    border: 8px solid #000;
    padding: 5px;
    border-radius: 10px;
    margin-top: -99px;
    z-index: 5;
    background: #fff;
    font-weight: bold;
    font-size: 1.15em;
    display: flex;
    align-items: center;
    height: auto;
  }
  .smimg {
    width: 30%;
    height: auto;
  }
}

<div class="cont">
  <div class="hdrrow"><img id="img1" src="https://myimagefiles.com/bisbee/1000x575.png">
    <img id="img2" src="https://myimagefiles.com/bisbee/450x396.png"></div>
  <div class="prodttl"> PRODUCT<br>
    <span style="font-weight:bold; font-size:.95em;">part jkls l fklj fo uwo uiwo 
        abcde <br>
        1234 5678910 111213</span> <br>
  </div>
  <div class="sec2">
    <p>[[Description]]</p>
    <div class="sat">
      <p style="color:#f00; font-weight: bold;">&nbsp;</p>
    </div>
  </div>
  <p align="center"><img src="https://myimagefiles.com/bisbee/thanks.png"></p>
  <p align="center">&nbsp;</p>
</div>

CodePudding user response：

The code need too be simplified, maybe do the mobile first and then add media queries for the bigger screen. To make it work just comment or remove display: flex from there:

  .prodttl {
    max-width: 90%;
    position: relative;
    margin: auto;
    border: 8px solid #000;
    padding: 5px;
    border-radius: 10px;
    margin-top: -99px;
    z-index: 5;
    background: #fff;
    font-weight: bold;
    font-size: 1.15em;
    /* display: flex; */
    align-items: center;
    height: auto;
  }

CodePudding user response：

display: flex; should be display: block; in .prodttl for the small screen's CSS

body {
  font-family: Arial, Helvetica, san-serif;
}

img {
  max-width: 100%;
}

.cont {
  width: 100%;
  max-width: 1000px;
  position: relative;
  margin: auto;
  border: solid #000 3px;
}

.hdrrow {
  display: block;
  width: 1000px;
  height: 575px;
  position: relative;
  margin: auto;
}

.sec2 {
  width: 100%;
  max-width: 700px;
  position: relative;
  margin: auto;
  height: auto;
}

#img1 {
  display: block;
}

#img2 {
  display: none;
}

.prodttl {
  width: max-content;
  display: block;
  position: relative;
  margin: auto;
  border: 11px solid #000;
  padding: 8px;
  border-radius: 10px;
  margin-top: -33px;
  z-index: 5;
  background: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 1.15em;
}


/*.prodttlsub { font-weight:bold; font-size:.95em; }*/

@media only screen and (max-width:700px) {
  .cont {
    width: 100%;
    max-width: 350px;
    position: relative;
    margin: auto;
    border: none;
  }
  .hdrrow {
    display: block;
    width: 100%;
    height: 396px;
    position: relative;
    margin: auto;
  }
  .sec2 {
    width: 100%;
    max-width: 350px;
    position: relative;
    margin: auto;
    height: auto;
  }
  #img1 {
    display: none;
  }
  #img2 {
    display: block;
    margin: 0 auto;
  }
  .prodttl {
    max-width: 90%;
    position: relative;
    margin: auto;
    border: 8px solid #000;
    padding: 5px;
    border-radius: 10px;
    margin-top: -99px;
    z-index: 5;
    background: #fff;
    font-weight: bold;
    font-size: 1.15em;
    display: block;
    align-items: center;
    height: auto;
  }
  .smimg {
    width: 30%;
    height: auto;
  }
}

<div class="cont">
  <div class="hdrrow"><img id="img1" src="https://myimagefiles.com/bisbee/1000x575.png">
    <img id="img2" src="https://myimagefiles.com/bisbee/450x396.png"></div>
  <div class="prodttl"> PRODUCT<br>
    <span style="font-weight:bold; font-size:.95em;">part jkls l fklj fo uwo uiwo 
        abcde <br>
        1234 5678910 111213</span> <br>
  </div>
  <div class="sec2">
    <p>[[Description]]</p>
    <div class="sat">
      <p style="color:#f00; font-weight: bold;">&nbsp;</p>
    </div>
  </div>
  <p align="center"><img src="https://myimagefiles.com/bisbee/thanks.png"></p>
  <p align="center">&nbsp;</p>
</div>