Html Question posted in
Some basic documentation can be found here.

Html – How to force two blocks, of 2 x pairs in a div, to stay side-by-side ie. each pair cannot be split?

I’m relatively new to HTML/CSS and Liquid. And I am trying to create and style a couple of custom blocks in a Product Page that will show in the page as 2 x pairs of blocks in one div

I have created this with the code below, and it works well, except for mobile screen where the wrapper forces the 4th block to break onto a new line.
I’m wondering if there is a way to force the pairs of two blocks to stay together, so a pair will be forced down to a new line rather than breaking a pair??
Any help would be greatly appreciated. Thanks

<div><p style="
  display: inline-block;
  background: #9b845a;
  padding: 6px 6px 6px 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 20px 0px 0px 20px;
  margin: 0px 0px 5px 0px;
  color: #ffffff;
  font-weight: bolder;"
<p>Condition
<p style="
  display: inline-block;
  background: #ffffff;
  padding: 6px 10px 6px 6px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 0px 20px 20px 0px;
  margin: 0px 0px 5px 0px;
  color: #232323;
  text-align: left;
  font-weight: bolder;"
<p>Condition Text pulled from custom Product field</p>
<p style="
  display: inline-block;
  background: #9b845a;
  padding: 6px 6px 6px 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 20px 0px 0px 20px;
  margin: 0px 0px 5px 10px;
  color: #ffffff;
  font-weight: bolder;"
<p>Size
<p style="
  display: inline-block;
  background: #ffffff;
  padding: 6px 10px 6px 6px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 0px 20px 20px 0px;
  margin: 0px 0px 5px 0px;
  color: #232323;
  text-align: left;
  font-weight: bolder;"
<p>Size Text pulled from custom Product field</p></div>

Issue: the 4th block is forced down to a new line on Mobile Screens. I’d like to force blocks 1 & 2, and 3 & 4, to stay together so the label and the text do not split?

enter image description here

Tags:

2

Answers


  1. 0

    You can wrap in another inline-blocked tag and use white-space:nowrap. I use span since your initial markup was invalid. Note I removed the whitespace between the pair of inline elements to make sure the whitespace did not mess up the display

    NOTE: I recommend you extract the CSS from the elements and use classes with a CSS stylesheet

    <div>
  <p style="display:inline-block; white-space: nowrap;"><span style="
  display: inline-block;
  background: #9b845a;
  padding: 6px 6px 6px 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 20px 0px 0px 20px;
  margin: 0;
  color: #ffffff;
  font-weight: bolder;">Condition</span><span style="
  display: inline-block;
  background: #ffffff;
  padding: 6px 10px 6px 6px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 0px 20px 20px 0px;
   margin:0;
  color: #232323;
  text-align: left;
  font-weight: bolder;">Condition Text pulled from custom Product field</span></p>
  <p style="display:inline-block; white-space: nowrap;"><span style="
  display: inline-block;
  background: #9b845a;
  padding: 6px 6px 6px 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 20px 0px 0px 20px;
  margin: 0px 0px 5px 10px;
  color: #ffffff;
  font-weight: bolder;">Size</span><span style="
  display: inline-block;
  background: #ffffff;
  padding: 6px 10px 6px 6px;
  border-style: solid;
  border-width: 2px;
  border-color: #9b845a;
  border-radius: 0px 20px 20px 0px;
  margin: 0px 0px 5px 0px;
  color: #232323;
  text-align: left;
  font-weight: bolder;">Size Text pulled from custom Product field</span></p>
</div>
    Login or Signup to reply.
  2. 0

    You can also use the CSS Flexbox with the flex-wrap and align-content properties. This will allow you to group the pairs and control how they behave when the screen size changes.

    <div style="display: flex; flex-wrap: wrap;">
  <div style="display: flex; flex-direction: row; align-content: flex-start;">
    <p style="
      display: inline-block;
      background: #9b845a;
      padding: 6px 6px 6px 10px;
      border-style: solid;
      border-width: 2px;
      border-color: #9b845a;
      border-radius: 20px 0px 0px 20px;
      margin: 0px 0px 5px 0px;
      color: #ffffff;
      font-weight: bolder;">Condition</p>
    <span style="
      display: inline-block;
      background: #ffffff;
      padding: 6px 10px 6px 6px;
      border-style: solid;
      border-width: 2px;
      border-color: #9b845a;
      border-radius: 0px 20px 20px 0px;
      margin: 0px 0px 5px -5px;
      color: #232323;
      text-align: left;
      font-weight: bolder;">Condition Text pulled from custom Product field</span>
  </div>
  <div style="display: flex; flex-direction: row; align-content: flex-start;">
    <p style="
      display: inline-block;
      background: #9b845a;
      padding: 6px 6px 6px 10px;
      border-style: solid;
      border-width: 2px;
      border-color: #9b845a;
      border-radius: 20px 0px 0px 20px;
      margin: 0px 0px 5px 10px;
      color: #ffffff;
      font-weight: bolder;">Size</p>
    <span style="
      display: inline-block;
      background: #ffffff;
      padding: 6px 10px 6px 6px;
      border-style: solid;
      border-width: 2px;
      border-color: #9b845a;
      border-radius: 0px 20px 20px 0px;
      margin: 0px 0px 5px -5px;
      color: #232323;
      text-align: left;
      font-weight: bolder;">Size Text pulled from custom Product field</span>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search