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
Post a Comment