Jump to content

Container taking up unnecessary space?


Coplestone

Recommended Posts

I have a small issue here which I can't quite figure out. I have three containers on one page all below each other. One for buttons, a JS image slideshow and a description box. The image slider seems to take up unnecessary space when the browser is resized activating media queries:

http://gyazo.com/33376dcadc99cba69d5668e240fae788

CSS desktop view (without media queries):

body {
background: #141414 url('../images/background1.png');
background-repeat: repeat-y;
background-attachment:fixed;
background-position:center;
}
#container{
height:450px;
width:840px;
margin:120px auto 2% auto;
position:relative;
}
#container2{
height:60px;
width:840px;
margin:0 auto 50px auto;
position:relative;
-moz-box-shadow:0 0 5px 5px black;
-webkit-box-shadow:0 0 5px 5px black;
box-shadow:0 0 5px 5px black;
}
#container2 p{
color:white;
font-size:15px;
padding-left:5px;
}
#container2 h2{
color:white;
font-size: 18px;
text-decoration:none;
padding-left:5px;
padding-top:2px;
}
#img{
height:450px;
width:840px;
position:absolute; 
-moz-box-shadow: 0 0 5px 5px black;
-webkit-box-shadow: 0 0 5px 5px black;
box-shadow: 0 0 5px 5px black;
}
#l_holder{
height:450px;
width:100px;
position:absolute;
left:0px;
top:0px;
cursor:pointer;
}
#r_holder{
height:450px;
width:100px;
position:absolute;
right:0px;
top:0px;
cursor:pointer;
}
.left{
height:50px;
width:50px;
position:absolute;
top:45%;
left:0px;
}
.right{
height:50px;
width:50px;
position:absolute;
top:45%;
right:0px;
}
.clear{
clear:bottom;
}

CSS with media queries, this is where the container is causing a problem:

@media all and (min-width: 3.5in) and (max-width: 10in) {

body {
background: #141414;
}
#container{
height:30%;
width:100%;
margin:5% auto;
padding:0 0 0px 0;
}

#container2{
width:100%;
margin: 0; padding: 0;
}
#container2 p{
padding-left:3px;
}
#container2 h2{
padding:5px 0 0 3px;
}
#container2 .body_black_box{ 
}
#img{
height:80%;
width:100%;
}
#l_holder{
height:80%;
}
#r_holder{
height:80%;
}
.left{
}
.right{
}
.clear{
}
}

Any help is greatly appreciated.

Link to comment
Share on other sites

  • 2 weeks later...

I'm glad you provided the link, all the code posted above is not relevant.

on line 29730 of your stylesheet you declare the following:

.download-tooltip {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 6px;
color: inherit;
cursor: inherit;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
padding: 12px 16px;
text-align: center;
text-decoration: inherit;
width: 500px; /* this is not dynamic 90% width can be nice */
}

Note the comment made.

 

I noticed when inspecting your site that most styles are overwriten; not once but around 20 times. This is an indication your stylesheet is redundant. Your stylesheet has more than 30K lines. Im not sure if this project is aiming to be a high traffic website but if so, try to lower the css to around 3k lines.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.