CODEWITHSUNDEEP
htmlcsswordpressresponsive-designmultiple-columns
user3688814
user3688814

Reputation: 69

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

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>

Upvotes: 1

Views: 3587

Answers (3)

Ian Mustafa
Ian Mustafa

Reputation: 608

You can use mobile first approach to achieve responsive layout. You should expand the CSS by yourself to fit your WordPress theme.

CSS

.linkcontainer {
    width: 100%;
    padding-bottom: 25px;
    overflow: auto;
}
.linkleft, .linkright {
    display: block;
    width: 100%;
}

@media only screen and (min-width: 481px) {
    .linkleft, .linkright {
        display: inline-block;
        width: 50%;
        float: left;
    }
}

Here is the fiddle.

Upvotes: 2

T.Schinler
T.Schinler

Reputation: 25

In your media queries, try using a percentage width value, such as 

width:95%;

also it may help if you remove the float and add 

clear:both;

Upvotes: 0

APAD1
APAD1

Reputation: 13666

Add a CSS mobile media query and set the width of .linkright and .linkleft to 100%(instead of 100px which is what you have now).

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width : 400px) {
   .linkleft {
     width:100%;
     float:none;
   }
   .linkright {
     width:100%;
     float:none;
   }
}

Upvotes: 0

Related Questions