GoT Card Memory(Improve)

Question

Hi, how are you?
I found this fantastic code from someone here in sololearn and I'm trying to improve it. How can I bring the table layout to the center and leave responsive?

<div class="flex-container">
<input type="button" id="a" class="front" onclick="flip('a',0)" />
<input type="button" id="b" class="front" onclick="flip('b',1)" />
<input type="button" id="c" class="front" onclick="flip('c',2)" />
<input type="button" id="d" class="front" onclick="flip('d',3)" />
<input type="button" id="e" class="front" onclick="flip('e',4)" />
<input type="button" id="f" class="front" onclick="flip('f',5)" />
<input type="button" id="g" class="front" onclick="flip('g',6)" />
<input type="button" id="h" class="front" onclick="flip('h',7)" />
<input type="button" id="i" class="front" onclick="flip('i',8)" />
<input type="button" id="j" class="front" onclick="flip('j',9)" />
<input type="button" id="k" class="front" onclick="flip('k',10)" />
<input type="button" id="l" class="front" onclick="flip('l',11)" />
</div>

//css

.flex-container {
table-layout: auto;
/* basic styling */
width: 550px;
height: 300px;
align: middle;
align-items: center;
justify-content: center;
}

input {
border: 5px solid white;
width: 80px;
height: 150px;
}

Answer 1

Implementation of your (minor) changes at starting layout, click to hide/start, double click anywhere to play again:
https://code.sololearn.com/WYng33T9Sv4T/?ref=app

;)

Answer 2

What's your purpose exactly?

This code extract isn't enough to right work without a lot of adaptation ^^ (and the class name, as well as the css property names -- 'align-items' and 'justify-content', suggests that a 'display:flex' was previously used, while 'table-layout' will normaly only be applied on <table> or 'display:table' elements?)

For answering to your question about how make it responsive, you can use css relative units and @media query rules... but helping you more accuratly require your whole code to be good suited :P

Answer 3

Responsive, JS corrected, CSS improved:
https://code.sololearn.com/WCG99zRMRtOg/?ref=app

Answer 4

Leonardo Junio wrote: << You can add me on Facebook or Twitter! >>

Technically, I could but I cannot... as I don't have/use any account in such kind of "social" networks ;P

Answer 5

Hi, im sorry. My complete code : https://codepen.io/leojunioyuri/pen/xLxGRr

Answer 6

Thank you very much, I thought a little and also made some modifications. Thank you very much for your help. Stay with God, cheers of Brazil.
Check out: https://codepen.io/leojunioyuri/pen/xLxGRr

Answer 7

I think we should be friends! Haha
You are awesome! Really, Nice Job!!! You can add me on Facebook or Twitter!

Answer 8

But i will aways be grateful for you!