What is the url?
Edit: Sorry. I saw it. I will examine the theme.
I don’t see a hidden padding. Your div with an id of doc3, in which the header is wrapped, sets the maximum width to 1280px. And your header image is smaller than its container at a width of 1200px.
Hi Res2
.bannerbillede{
max-height: 100%;
max-width: 100%;
width:100%;// please add
}
Thank you.
Thread Starter
Res2
(@res2)
ok, thanks!
I’ve discovered something weird:
Under inspect element, it is possible to correct the margin-bottom of the header, but any kind of stylesheet correction of the same, is neglected.
The freaky effect is that before you correct the stylesheet with -4px, you can correct it in the inspect element presentation of the page. After you’ve corrected it in the stylesheet, the correction will appear under inspect element, but now you need to add -4 to the margin-bottom (making it -8) in order to align the bottom of the header, and so forth… 🙂
I can only assume that the stylesheet correction is being overruled by some sort of php code?
Thread Starter
Res2
(@res2)
Thanks nibita… The addition corrected the width.
I’m still having trouble with correcting the height, though.
raindrops-child/style.css
Please remove @import rule
@import url("../raindrops/style.css");
Raindrops automatically import parent style.
your child style.
#top{
padding-bottom: 0px !important;
margin-bottom: -4px !important;
}
What is the means of above style.
Thank you.
I don’t think that correcting the width of the header image solves your problems, and they become more apparent when your reduce the width of the page below 640px when the media queries kick in.
Thread Starter
Res2
(@res2)
@nobita
Ok, thanks. I’ve deleted the @import rule.
I’ve also deleted the padding-bottom: 0px !important of the #top.
It turns out it made no difference, anyhow.
The margin-bottom: -4px !important aims to minimize the margin between top and #yui-main.
I’m presently struggling to nullify this margin between top and yui-main, completely.
@ygspasov
It didn’t solve them all, true enough, but I’ve made some %-corrections to div.yui-u:nth-child(1) (the white field) and div.yui-u:nth-child(2) (the container of the right sidebar) which helped.
Take a look. Better, right?
I don’t think so. Try reducing the width of the page below 640px and scroll down to see the countless problems.
Thread Starter
Res2
(@res2)
@ygspasov:
ok, yeah, I see what you mean 🙂
(notably, below 640px would be mobilephone size screens.)
If you take another look, you can see that I’ve corrected at least part of the problem. Using the more appropriate sub- div:
.yui-t2 #yui-main .yui-b for the
margin-left: 180px rule
circumvents my clumsy use of an !important which left the white field hanging, once the mobile sized screen kicked in.
I must admit that (scrolling down on a mobile screen) the default menu coming last still seems rather messy, from an orientation point of view… It might help if the two menus were placed side by side, rather than on top of each other…
I hope I’ll figure out a solution for that later, maybe with nobitas help.
For now, in this thread, my main concern is just to make the header and the #yui-main parts align, without the space between them. 🙂
Please try below
.bannerbillede {
max-height: 100%;
max-width: 100%;
width: 100%;
margin-bottom: -5px;//please add
}
Thread Starter
Res2
(@res2)
Ah! That works! 😀
Many thanks, nobita!
I’ll probably be back with questions on the small-screen issues mentioned by ygspasov, tomorrow… 🙂
All the best!
