The element #wrapper has the following CSS that contribute to the width:
border: 1px solid #EDEDED;
padding: 10px;
width: 980px;
980 + 10 + 10 + 1 + 1 = 1002px
From a screen width of 1024px you lose about 28px (varies depending on browser) in vertical scroll bar and browser chrome leaving you about 996px – unfortunately the wrapper is simply too wide for the browser viewport.
You could just remove padding: 10px; but it looks pretty bad. The simplest solution might be to add a media query targeting screens at or below 1024px and removing the padding only from them (though if your dealing with old laptops they may have old browsers that dont support media queries….)
try adding this
<style type="text/css">
@media screen and (max-width:1024px) {
#wrapper {
padding: 0px;
}
}
</style>
Thanks for your quick reply !
The suggested code did not work, but it did point me in the right direction.
This seems to deliver a solution, I just need to see how it looks on bigger screens
<style type="text/css">
@media screen and (max-width:1024px) {
#wrapper {
position: relative;
left: -148px;
}
}
</style>
As it’s a free theme in WordPress depository, updates are not quick.
zeniph pointed correctly, though the wrapper is center aligned, the padding and shadow things made it a bit wider. This was just the starting point, in the next revision, we will go for a responsive one, inshALLAH.
Thanks for your feedback. We will consider it in the next revision.
<style type="text/css">
@media screen and (max-width:1024px) {
#wrapper {
position: relative;
left: -148px;
}
}
</style>
I tested the code in 1366 x 768.
It’s working fine. Hope it’d be fine in wider screens too.
Beside that, a good solution can be:
Remove the margin from body
body {
//margin: 1.5em 15%;
font-family: 'Cambria', Arial, Helvetica, sans-serif;
font-size: 100%;
}
and edit margin like this, on #wrapper
#wrapper{
margin: 1.5em auto;
}
In the new version (2.1) of the theme, the problem is fixed, alHamduLILLAH.
Happy blogging with nano blogger. 🙂
