AAC Don't strech website when resizing window

[ralke]

Hi! I need some help with this. When I resize my website window, it makes the navigation bars align down, and screws the layout.
This is what I mean (is specially annoying when entering to website with phone):


I would like to know how to fix it, this is how it normally looks


I want that the website doesn't strech, just hide the part that is not shown, hope this image explain this well:


Here's my style.css

style.css - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

pastebin.com

Regards!

 

[Rombadr]

body
{
  background: url(img/bg.png) no-repeat center top #191611;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: Tahoma,Verdana,Segoe,sans-serif;
  color: #000000;
  position: relative; /* usually the parent, in this case the body element, has position relative so that the absolute positioned child is positioned relative to it */
  height: 100vh; /* 100% of the viewport height */
  margin: 0; /* recommended */
++min-width:800px;
}

you can play with min-width if you'd like, but you might also have some media queries changing stuff as well, try looking for another css file

 

[ralke]

@Rombadr thanks a lot for responding Applied the change but doesn't seems to change, reloaded the website with CTRL + F5 to reload cache. If there's other options please let me know and i'll try them. Regards!

 

[Rombadr]

If there's an online version I could look at, it'd be pretty helpful

 

[ralke]

If there's an online version I could look at, it'd be pretty helpful

Sure Greed Online (http://greedot.net/) Just tried something and switched position: relative; to absolute; to do the trick. It still restrech the background image, but is much better than before ;p

This is what I mean

How can I make it work with static background?
It seems that center value should be replaced on the line below, but with what?

background: url(img/bg.png) no-repeat center top #191611;

 

[Boy67]

Just wrap everything inside your body in a div with fixed width of 1170px. Easy.

 

[ralke]

Just wrap everything inside your body in a div with fixed width of 1170px. Easy.

That sounds good ;p can you give me an example of how it should exactly be done? I can figure out eventually but I think is much better to ask Thanks for responding!

 

[Boy67]

Your current main body is this:

<div class="top-bar"></div>
<div class="container_main"></div>
<div class="container_mid"></div>
<div class="container_right"></div>
<div class="footer_cnt"></div>

So do something like this:

<div class="main">
    <div class="top-bar"></div>
    <div class="container_main"></div>
    <div class="container_mid"></div>
    <div class="container_right"></div>
    <div class="footer_cnt"></div>
</div>

and your css for main would be:

.main{
    width:1170px;
    margin:0 auto;
}