Divs Shift Out of Allignment with Each Other - css

Question

The divs of the bellow web page shift out of alignment when the window is made too narrow, or the image thumbnails are clicked. Is there a way to prevent this from happening?
http://nosgoth.net/NR-Test/ff_scroll-test3.html
Note that the "frametop" div and "framebtm" div contain images inserted into the html, while the "text", "content", and "container" divs use background images. Thanks.

Answer 1

So, your issue was that your background-images were in a fixed and centered position relating to the viewport. By themselves neither of these are an issue, but together they try to remain in a fixed position while being centered to the screen. It causes issues when the screen is smaller than the image itself. Unfortunately if you remove one or the other, it breaks your expected output.
One way to fix it would be to use media queries (like Trix and afelixj) suggest. Another way is to redo your code and not use background-image. I took this approach.
Instead of having each piece of your frame be built upon elements being used for content, I moved them down into their own div called #frame. With a bit of fixed positioning your original concept remains unscathed. However, it is not responsive (though you could make it fluid with percentages and viewport units easily enough).
Here's a striped down concept of the way I rewrote it:
CSS:
#frame .scroll_bg,
#frame .frametop,
#frame .frame_sides,
#frame .framebtm,
#frame .side_decor {
display: block;
position: fixed;
left: 50%;
transform: translate(-50%);
}
#frame .side_decor {
top: 50%;
transform: translate(-50%, -50%);
}
#frame .scroll_bg,
#frame .frame_sides,
#frame .side_decor {
z-index: -5;
}
#frame .scroll_bg,
#frame .frametop,
#frame .frame_sides {
top: 0;
}
#frame .framebtm {
bottom: 0;
}
HTML:
<div class="content">...</div>
<div id="frame">
<img class="scroll_bg" src="http://nosgoth.net/NR-Test/images/scroll_bg.png" alt="" />
<img class="frame_sides" src="http://nosgoth.net/NR-Test/images/frame_sides.png" alt="" />
<img class="side_decor" src="http://nosgoth.net/NR-Test/images/side_decor.png" alt="" />
<img class="frametop" src="http://nosgoth.net/NR-Test/images/frametop.png" alt="" />
<img class="framebtm" src="http://nosgoth.net/NR-Test/images/framebtm.png" alt="" />
</div>
I placed the frame at the bottom (so it would be on top of everything else) and moved each portion into place with fixed positioning. The scroll background, sidebars, and side decorations were given a negative z-index so that all content would be on top of it and remain clickable.
After that it was just making everything fit. I played around a bit with your values, but for the most part the rest of the code is yours (body and html are the only other places I made modifications).
The whole thing still moves when the images are clicked at the bottom, but I have a suspicion that that is fancybox's issue.
Here's a codepen of the final result.

Answer 2

Thats because this div
<div class="text"></div>
has a fixed-width background-image:
.text {
background-image: url(images/side_decor.png);
}
If you want to make it properly in different browser window sizes, you may consider having multiple copies of side_decor.png and assign theme for different broswer widthslike this:
#media screen and (max-width: 400px){
.text {
background-image: url(images/side_decor_400.png);
}
}
#media screen and (min-width: 400px) and (max-width: 800px){
.text {
background-image: url(images/side_decor_800.png);
}
}

Answer 3

For a quick fix, please try appending the below styles
body{
max-width: 814px;
width: auto;
}
.frametop, .framebtm {
left: 50%;
transform: translateX(-50%);
}
#media (max-width: 680px){
body{
overflow-x: hidden;
}
img{
height: auto;
max-width: 100%;
}
.text{
padding: 0 20px;
}
}