Resize Mobile Responsive

Hello all, i am facing a problem during the build of my web application, the thing is, i created a type of an ID card that i want to be centered at the screen but of course the size will depend on the device that we are using, for that reason i need to made my container responsive for all devices but the behavior is kinda bad and i can't find the solution for my problem, i already put all sizes with % and not with px but nothing changes for good, i will attach two prtsc of app in two different devices.


The objective is try to put the card in the middle of the screen whatever the device is.


Can someone take a look?

Best regards.




Hi, Gonçalo

My suggestion would be to attempt using display:flex; it will make you use another way of centering content, but in the end should satisfy what you want to accomplish. It also seems that even though you changed some widths to percentual values, that barcode image still has a fixed width.

Check the example I'm attaching and let me know if you can advance from there.

Regards,

Sam

Hi Gonçalo,


It's hard to help without having access to the page, but if I had this problem, what I would do would be:

1. If you don't have a lot of css experience, look for what styles you need to reach your goal.
https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/

https://codepen.io/pedrophilipecosta/pen/RwwVprL


2. Use chrome developer tools (F12)
3. Inspect the "Card" Element
4. Change styles based on what you found in point 1 or identify which styles may be impacting your card position.


5. Copy edited styles and change classes in ServiceCenter


Regards