Avada Forums Community Forum Has anyone created tables in Avada that are responsive?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • millerjc
    Participant
    Post count: 3

    Hello:

    My goal is the for the search box on the homepage to be responsive, so that when in responsive/mobile mode the screen renders

    Dropdown option <line break>
    Search box <line break>
    Search button <line break>

    Right now it renders all of these elements inline – dropdown option search box Search button

    This is a problem on mobile because it’s all smooshed together and there’s not space in the search box.

    Has anyone created a simple CSS to make responsive tables?

    Many thanks!

    James

    mululu
    Participant
    Post count: 5

    Need the same!

    millerjc
    Participant
    Post count: 3

    Is there still nothing that “comes out of the box” that could support this?

    Thanks,
    James

    millerjc
    Participant
    Post count: 3

    I ended up using the plugin Magic Liquidizer Lite and it works for me.

    If you want certain tables to be responsive you have to tag them in your html and list them in the plug in (e.g. #mobilesearch).

    myalkut
    Participant
    Post count: 10

    In case anyone is still looking for the answer, I just found the following CSS snippet that works great with the Avada table. It stacks the rows on mobile and looks nice. Of course have to add styling (sure wish some options for colors, rounded corners, etc was just built in to the table module, but can be added via CSS just fine).

    Just add the following to the global options CSS and any tables created with the table module will be responsive:

    @media screen and (max-width: 600px) {	
    
    	  table {width:100%;}
    
    	  thead {display: none;}
    
    	  tr:nth-of-type(2n) {background-color: inherit;}
    
    	  tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
    
    	  tbody td {display: block;  text-align:center;}
    
    	  tbody td:before {
    
    	      content: attr(data-th);
    
    	      display: block;
    
    	      text-align:center; 
    
    	  }
    
    	}
    microed
    Participant
    Post count: 5

    this worked for me, thanks for posting it

    microed
    Participant
    Post count: 5

    this css code worked for me, thanks for posting it

    baldguystudio
    Participant
    Post count: 1

    If you use the Avada table element, the table will work responsively when swiping right or, in my case, the table contents can be seen entirely by turning the phone sideways.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.