Help Can I get some help?

[gxxberkit]

I'm trying to get these three elements to be horizontal on pc and vertical on mobile, but centered in the middle of the screen for both. However, everything I've tried doesn't make it center on mobile-- they're always justified to the left. What can I do? (The code probably also has a lot of unnecessary things, sorry)

aaaaaa​

aaaaaa​

aaaaaa​

Spoiler: code

[font=Gugi][border=0; margin: 0 auto; align-content: center; justify-content: center; padding: 0; display: flex; flex-flow: nowrap; width: 100%; position: relative;][border=0; padding: 0; display: inline-block; align-content: center; justify-content: center; margin-left: 18px; margin-top: 10px;][border=0; padding: 0; display: inline-block; margin-left: 18px; margin-top: 10px;][border=0; padding: 0; background: #61aba5; position: relative; width: 100%; max-width: 185px; min-width: 185px; background-size:cover; color: #000000; padding:20px; clip-path: polygon(0% 0%,94% 0%,101% 21%,100% 80%,101% 100%,7% 101%,0% 80%,0% 20%); display: flex; flex-flow: nowrap;][comment]
[/comment][border=0; margin: 0 auto; background: rgba(170, 212, 205); background-size:cover; color: #000000; width: 100%; clip-path: polygon(0% 0%,94% 0%,101% 21%,100% 80%,101% 100%,7% 101%,0% 80%,0% 20%);][border=0; padding: 0; margin: 10px 10px 10px 10px; position: relative; font: 25px Gugi; color: #105953][center]aaaaaa[/center][/border][/border][/border][/border][comment]

[/comment][border=0; padding: 0; display: inline-block; align-content: center; justify-content: center; margin-left: 18px; margin-top: 10px;][border=0; padding: 0; background: #61aba5; position: relative; width: 100%; max-width: 185px; min-width: 185px; background-size:cover; color: #000000; padding:20px; clip-path: polygon(0% 0%,94% 0%,101% 21%,100% 80%,101% 100%,7% 101%,0% 80%,0% 20%); display: flex; flex-flow: nowrap;][comment]
[/comment][border=0; margin: 0 auto; background: rgba(170, 212, 205); background-size:cover; color: #000000; width: 100%; clip-path: polygon(0% 0%,94% 0%,101% 21%,100% 80%,101% 100%,7% 101%,0% 80%,0% 20%);][border=0; padding: 0; margin: 10px 10px 10px 10px; position: relative; font: 25px Gugi; color: #105953][center]aaaaaa[/center][/border][/border][/border][/border][comment]

[/comment][border=0; padding: 0; display: inline-block; align-content: center; justify-content: center; margin-left: 18px; margin-top: 10px;][border=0; padding: 0; background: #61aba5; position: relative; width: 100%; max-width: 185px; min-width: 185px; background-size:cover; color: #000000; padding:20px; clip-path: polygon(0% 0%,94% 0%,101% 21%,100% 80%,101% 100%,7% 101%,0% 80%,0% 20%); display: flex; flex-flow: nowrap;][comment]
[/comment][border=0; margin: 0 auto; background: rgba(170, 212, 205); background-size:cover; color: #000000; width: 100%; clip-path: polygon(0% 0%,94% 0%,101% 21%,100% 80%,101% 100%,7% 101%,0% 80%,0% 20%);][border=0; padding: 0; margin: 10px 10px 10px 10px; position: relative; font: 25px Gugi; color: #105953][center]aaaaaa[/center][/border][/border][/border][/border][/border][/border][/font]

 

[Ayama]

So I don't usually code for mobile, but have you tried giving your outer container a max-width: 100%; and the property flex-wrap: wrap;?

I would assume that, as long as the phone screen is small enough and your individual items are long enough, this would force them to align vertically on mobile.

I can think of no other way to do it but, like I said, coding for mobile is not my area of expertise.

 

[gxxberkit]

Thank you for the reply! The problem is actually that they aren't centered on mobile, not that they aren't vertical. Sorry if I was unclear. I appreciate it, though, and I did test it!

 

[Ayama]

Ah, well depending on the way your code works, you would need either a margin: auto; or justify-content: center;.

Or you could always just put [center][/center] tags around the whole thing.

 

[gxxberkit]

Thank you so much!!! I can't believe I didn't think about putting center tags around it. Completely skipped my mind. But it worked! Thank you again!

 

[Ayama]

Haha no problem- glad I could help ^^