html - Website is not centering on mobile -


im creating simple website. on desktop, whole content centered ok. works changing size of browser. when visited on mobile, not centered on desktop

take look: http://piaskownica.lokalnamanufaktura.pl/metod2/

i think css wrap class centering buggy. videobackground not centered on desktop.

.wrap {   position: absolute;   left: 50%;   top: 50%;     -moz-transform: translate(-50%, -50%);     -ms-transform: translate(-50%, -50%);     -o-transform: translate(-50%, -50%);     -webkit-transform: translate(-50%, -50%);   transform: translate(-50%, -50%);    width: 90%;   height: 90%; } 

.x2-horizontal has width of 380px wide small screens. watch out fixed widths in responsive designs.

your layout method not ideal. start, think of devices don't support transform.

the video control won't center using margin: auto because of position: absolute. you'd have use same kind of centering methos other content (i.e. left: 50% , pulling 50% of width.)


Comments

Popular posts from this blog

how to proxy from https to http with lighttpd -

android - Automated my builds -

python - Flask migration error -