Ad

What Is The Preferred Way Of Writing Scaleable Multi Column Layouts?

- 1 answer

i have a webpage with 3 columns and only looks good on full size screens. I'm about to write some major updates to make my website mobile friendly. The rest of my website i have no qualms about updating, the upgrades will be straight forward, but i have no idea how i am going to tackle my 3 column table layout. in order to make it mobile i am going to have to take the three columns and move the contents into a singular column.

to accomplish this can it be achieved purely through html & css? or is it something that will involve javascript? doing it in javascript will be fine but if there is a way to do it in CSS i would prefer to start there.

  <table id="resource_manager">
        <tr> <!--Row #1-->
          <td colspan="3">
            <h1 class="center_text">Notable Ministries</h1>
            <br>
          </td>
        </tr>
        <tr> <!--Row #2-->
          <td colspan="2" class="center_text">
            <p style="text-align: left">
              My purpose for putting this together is mainly because friends ask me where they can get more information on something, it's always nice to be able
              to point someone in the right direction to get answers.
              <br><br>
              All resources here should be publicly accessible, mostly via youtube or directly from the persons web page. Please notify me if any links are broken.
              <br><br>
              <h2 style="text-align: left">Ephesians 4:11-16</h2>
                <p style="text-align: left">
                And He Himself gave some to be apostles, some prophets, some evangelists, and some pastors and teachers, for the equipping of the saints for
                the work of ministry, for the edifying of the body of Christ, till we all come to the unity of the faith and of the knowledge of the Son of God, to
                a perfect man, to the measure of the stature of the fullness of Christ; that we should no longer be children, tossed to and fro and carried about
                with every wind of doctrine, by the trickery of men, in the cunning craftiness of deceitful plotting, but, speaking the truth in love, may grow up
                in all things into Him who is the head—Christ— from whom the whole body, joined and knit together by what every joint supplies, according to the
                effective working by which every part does its share, causes growth of the body for the edifying of itself in love.
                </p>
            </p>
            <br>
          </td>
        </tr>
        <tr class="resource_row_image"> <!--Row #3-->
          <td class="cell_size"> <!--Cell 1 Keith Moore-->
            <a target="_blank" rel="nofollow noreferrer" href="http://www.moorelife.org/freedownloads-serieslist.php?" target="_blank">
              <img src="img/resources/keith_moore.jpg" alt="keith moore" class="resource_image">
            </a>
          </td>
          <td class="cell_size"> <!--Cell 2 Kenneth Hagin-->
            <a target="_blank" rel="nofollow noreferrer" href="https://www.youtube.com/playlist?list=PLIXcY2izjpDgROo3MRlAU2MJSyjthXLLc" target="_blank">
              <img src="img/resources/kenneth_hagin.jpg" alt="kenneth hagin" class="resource_image">
            </a>
          </td>
          <td class="cell_size"> <!--Cell 3 Bill Johnson-->
            <a target="_blank" rel="nofollow noreferrer" href="https://www.youtube.com/playlist?list=PLEtP4XPKdli585uNfIU8WNRYawCusmEYK" target="_blank">
              <img src="img/resources/bill_johnson.jpg" alt="bill johnson" class="resource_image">
            </a>
          </td>
        </tr>
          <tr class="resource_row_text"> <!--Row #4-->
            <td class="cell_size"> <!--Cell 1 Keith Moore-->
              <h2>Keith Moore</h2>
              Teacher/Pastor, I reffer to Keith as my "bible college experience," he has 30+ years
              of free audio and video available on any and every subject.
            </td>
            <td class="cell_size"> <!--Cell 2 Kenneth Hagin-->
              <h2>Kenneth Hagin</h2>
              Prophet, with nearly 70 years of ministry under his belt, Hagin most commonly preached on the subject of faith in Gods word.
            </td>
            <td class="cell_size"> <!--Cell 3 Bill Johnson-->
              <h2>Bill Johnson</h2>
                Apostle/Pastor, Bill pastors a church in Redding California named Bethel Church, the church is most known for miracles, signs and wonders.
            </td>
          </tr>
Ad

Answer

I would recommend using Flexbox. Here is a simple 3 column layout.

HTML:

<div class="flex-container">
  <div class="flex-item">COL 1</div>
  <div class="flex-item">COL 2</div>
  <div class="flex-item">COL 3</div>
</div>

CSS:

*{
  margin: 0;
  padding: 0;
}

.flex-container{
  display: flex;
  flex: row nowrap;
  height: 100vh;
}

.flex-item{
  border: 1px solid black;
  background-color: blue;
  width: 100%;
}

As you can see little HTML and CSS is needed in order to create this layout. If you would like to change the 3 column layout when viewed on a phone you can use Media Queries.

Ad
source: stackoverflow.com
Ad