Search code examples
jqueryhtmlcsswordpressmedia-queries

How can I make radio check box's move in any direction @media - css

I am working out of wordpress, I have the CSS code for check boxes on my job board. I want those check boxes to move towards the right of the screen on a mobile device.

Reason: On iPhones, my checkboxs overlap other content and I wish to make the distant.

Job board that the radio check boxes are : https://hughesjobs.net/jobs-3

**You will see the check boxes as categories on my job board.

CSS code:

 .wpjb input[type=checkbox],
 .wpjb input[type=radio] {
  display: inline;
  margin: 0;
  padding:0 ;
  box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;

}

Solution

  • I don't quite get what you need based on your description. But I would suggest to display them as equal width columns and rows.

    @media (max-width: 480px) { 

    #wpjb-top-search ul {
        padding-top: 10px;
    }

    #wpjb-top-search ul li {
        margin: 1% 0;
        float: left;
        width: 33.33%;
        word-spacing: normal;
    }

}