GoT Card Memory(Improve) | Sololearn: Learn to code for FREE!

0

GoT Card Memory(Improve)

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; }

7/25/2017 8:55:48 PM

Leonardo Junio

8 Answers

New Answer

+5

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 ;)

+4

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

+4

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

+3

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

0

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

0

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

0

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

0

But i will aways be grateful for you!