CODEWITHSUNDEEP
htmlcsssvgmultiple-columns
Paul
Paul

Reputation: 94

How can I make two columns with SVGs and text with the text always staying to the right of the SVG?

I have two columns with an SVG and some text. When I scale the window down on Google Chrome, the text falls below the SVG before the window becomes less than 600px. How could I keep that from happening while making sure both columns have constant margin between the sides of the browser?

HTML:

<div class="containerx">
    <div class="rowx">
    <div class="colx">
<svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z" fill-rule="evenodd"></path><path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z" fill-rule="evenodd"></path><path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z" fill-rule="evenodd"></path><path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
      </div>
      <div class="colx">
<svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z" fill-rule="evenodd"></path><path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z" fill-rule="evenodd"></path><path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z" fill-rule="evenodd"></path><path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
      </div>
    </div>
    </div>

CSS:

  .boxicon {
    height: 150px;
    float: left;
    margin: 5px;
  }

  .textthing {
    float: left;
    text-align: center;
    padding-top: 48px;
    margin-left: 20px;
  }

  .containerx {

  }

  .rowx {
    width: 95%;

  }

  .colx {
    width: 45%;
    float: left;
    background-color: #000;
    margin-left: 5%
  }

  @media screen and (max-width: 600px) {
    .colx {
      width: 100%;
      margin-bottom: 5px;
    }
  }

Full Code: pastebin

Desired Layout: Desired Layout

Current Output: enter image description here

Upvotes: 0

Views: 369

Answers (1)

tao
tao

Reputation: 90188

I recommend switching from box-model to flex-model for better control over alignment and positioning:

.boxicon {
  height: 150px;
  margin: 5px;
}

.textthing {
  text-align: center;
  display: block;
  margin: 10px;
  color: white;
  flex-grow: 1;
}


.rowx {
  display: flex;
}

.colx {
  flex-grow: 1;
  display: flex;
  align-items: center;
  background-color: #000;
  margin: 0 15px;
  padding: 10px;
}

@media screen and (max-width: 600px) {
  .colx {
    margin: 10px 15px;
  }
  .rowx {
  flex-direction: column;
}
<div class="containerx">
  <div class="rowx">
    <div class="colx">
      <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <clipPath id="p.0">
          <path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path>
        </clipPath>
        <g clip-path="url(#p.0)">
          <path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path>
          <path fill="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z"
          fill-rule="evenodd"></path>
          <path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z"
          fill-rule="evenodd"></path>
          <path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z"
          fill-rule="evenodd"></path>
          <path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path>
          <path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path>
          <path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path>
        </g>
      </svg>
      <h2 class="textthing">Fast Shipping</h2>
    </div>
    <div class="colx">
      <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <clipPath id="p.0">
          <path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path>
        </clipPath>
        <g clip-path="url(#p.0)">
          <path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path>
          <path fill="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z"
          fill-rule="evenodd"></path>
          <path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z"
          fill-rule="evenodd"></path>
          <path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z"
          fill-rule="evenodd"></path>
          <path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path>
          <path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path>
          <path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path>
        </g>
      </svg>
      <h2 class="textthing">Fast Shipping</h2>
    </div>
  </div>
</div>

Among advantages:

  • you don't need to add top paddings to vertical align
  • <svg> correctly scales down when it doesn't have enough space

There are more but, to put it simple: it gives you control over alignment and positioning.

Upvotes: 1

Related Questions