So i’m not very web savvy, Im creating a FAQ page on my WordPress site, and I want to make a responsive two column layout with a list of questions that when the user clicks on one of these anchors, it takes them down to that answer on the page, like most FAQs. I want the list of these links to be in a two column layout, while everything else on the site is just 1 column layout, and I want it to be pretty smooth and good looking. I want the two column layout to eventually merge into one column when the screen shrinks/is used by a tablet or iPhone. Here is my code, I feel like I’m close but it’s looking bad when I implement it in WordPress. Any suggestions?

CSS

.linkcontainer {
  width:100%;
  padding-bottom: 25px;
}
.linkleft {
  width:50%;
  float:left;
}
.linkright {
  width:50%;
  float:left;
}
@media(max-width:400px) {
  .linkleft {
    width:100px;
    float:none;
    display:block;
    position:relative;
  }
  .linkright {
    width:100px;
    float:none;
    display:block;
    position:relative;
  }
}

HTML

<div class="linkcontainer">
  <div class="linkleft">
    <ul>
      <li><a href="#unique-identifier1">Can I ?</a></li>
      <li><a href="#unique-identifier2">How much does ?</a></li>
      <li><a href="#unique-identifier3">Is the process ?</a></li>
      <li><a href="#unique-identifier4">What do I need to ?</a></li>
      <li><a href="#unique-identifier5">What is the date?</a></li>
      <li><a href="#unique-identifier6">What information does the ?</a></li>
      <li><a href="#unique-identifier7">After being ?</a></li>
      <li><a href="#unique-identifier8">Where do I?</a></li>
      <li><a href="#unique-identifier9">How do I ?</a></li>
      <li><a href="#unique-identifier10">How do I ?</a></li>
    </ul>
  </div>
  <div class="linkright">
    <ul>
      <li><a href="#unique-identifier11">Registering as a </a></li>
      <li><a href="#unique-identifier12">Registering </a></li>
      <li><a href="#unique-identifier13">Am I able to charge ?    </a></li>
      <li><a href="#unique-identifier14">Can others be ?</a></li>
      <li><a href="#unique-identifier15">Can I perform ?</a></li>
      <li><a href="#unique-identifier16">What are the age limits ?</a></li>
      <li><a href="#unique-identifier17">What is the definition of ?</a></li>
      <li><a href="#unique-identifier18">What is the definition ?</a></li>
      <li><a href="#unique-identifier19">All other questions CLICK HERE</a></li>
      <li><a href="#unique-identifier20">All other OTHER questions CLICK HERE</a></li>
    </ul>
  </div>
</div>

Read more here: create two column responsive css html design that merges into 1 column when shrunk or viewed on mobile device


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , , , , , , ,

Wordpress related questions and answers: