I've been facing some serious CSS issues lately!
Currently, I have everything set up to center the #Box div, which works perfectly on all devices except for mobile browsers. The problem arises because the screen size of the mobile browser is too narrow, causing the left side to get cut off. Despite trying various adjustments after a similar issue in the past, nothing seems to work.
I've added container and layout divs since the last time, but unfortunately, the same issue persists. Is there a way to modify the code so that the left side doesn't keep getting cropped?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<a href="http://www.twitter.com/wekaptureit" target="new"><img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/></a>
</div>
<div id="Facebook">
<a href="http://www.facebook.com/wekaptureit" target="new"><img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/></a>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>