While working on my website, I encountered an issue with displaying content properly on various mobile devices. I have implemented media queries for this purpose.
Currently, on the main site, two divs (#wrap and #scrollbar) are positioned next to each other. However, I would like to center them in a row on smaller mobile devices such as iPads.
This is the CSS code snippet from the stylesheet:
<style type="text/css">
@font-face {
font-family: 'RobotoMono Regular';
src: url('RobotoMono-Regular.ttf') format('truetype');
}
html *
{
font-size: 10pt !important;
color: #000 !important;
font-family: "RobotoMono Regular" !important;
}
#scrollbar {
position:absolute;
right: 100;
width: 512px;
text-align: center;
}
#wrap {
float: left;
position: absolute;
left : 120px;
top: 40px;
}
</style>
etc.etc.
Here is the modified CSS within the media query specifically tailored for iPads:
<style type="text/css">
@font-face {
font-family: 'RobotoMono Regular';
src: url('RobotoMono-Regular.ttf') format('truetype');
}
html *
{
font-size: 10pt !important;
color: #000 !important;
font-family: "RobotoMonomono Regular" !important;
}
#scrollbar {
position:relative;
top:-150px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
#wrap {
width:100%;
position:relative;
top:-100px;
padding: 0px;
float:none;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
The current display can be viewed here:
I am having trouble identifying the issue and would appreciate any assistance you could provide. Thank you!