Large Gap

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Suggested Hosts
Jade23
Registered User
Posts: 81
Joined: Mon Sep 22, 2014 2:40 pm

Large Gap

Post by Jade23 »

http://imgur.com/RqXmxYN

Every time I add information to my sidebars, this huge gap between my forum and the top of the page body appears. I've tried to go into the commons.css > #forumlist ... to fix this but it's not working. Either I must not be looking in the right place or I've got to take some code out of somewhere to fix it but I'm not exactly sure where. I have no clue where I need to look to get this gap to go away. Could someone help me with this?

Website: http://standingtrials.com/index.php
User avatar
Elias
Registered User
Posts: 5152
Joined: Sat Feb 25, 2006 4:31 pm
Name: Elias

Re: Large Gap

Post by Elias »

In common.css what is your page-body margin set to?

Code: Select all

#page-body {
	margin: 4px 0;
	clear: both;
}
"Mystery creates wonder, and wonder is the basis of man's desire to understand." - Neil Armstrong
|Installing Extensions|Writing Extensions|Extension Validation Policy|
Jade23
Registered User
Posts: 81
Joined: Mon Sep 22, 2014 2:40 pm

Re: Large Gap

Post by Jade23 »

It's set to what you posted.

Code: Select all

#page-body {
    margin: 4px 0;
    clear: both;
User avatar
pit-PL
Registered User
Posts: 3212
Joined: Sat Nov 21, 2009 12:24 pm

Re: Large Gap

Post by pit-PL »

Try adding overflow: hidden; to #forumlist instead of using negative margin for #sidebar and #sidebarleft.
Jade23
Registered User
Posts: 81
Joined: Mon Sep 22, 2014 2:40 pm

Re: Large Gap

Post by Jade23 »

Alrighty, so I added that edit and took out the negative margins. The sidebars stay at the top but now the forum list is below the sidebars. Please take a look at the site.

http://standingtrials.com/index.php

I've tried to adjust the forumlist with negative margins again but no luck. The width of the sidebars and the forum list isn't the problem either. Not sure where all that space is coming from.


----Edit-----

Solved. Thank you for all your help. :)
User avatar
Elias
Registered User
Posts: 5152
Joined: Sat Feb 25, 2006 4:31 pm
Name: Elias

Re: Large Gap

Post by Elias »

What was the solution? :P
"Mystery creates wonder, and wonder is the basis of man's desire to understand." - Neil Armstrong
|Installing Extensions|Writing Extensions|Extension Validation Policy|
User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Large Gap

Post by Arty »

Best solution is to change structure. Wrap content in additional div and move it before sidebars then wrap it all in one additional div, so code would look like this:

Code: Select all

<div id="main-content">
    <div id="content-wrapper"> 
        <div id="content">content here </div>
    </div>
    <div id="sidebar-left"> left code </div>
    <div id="sidebar-right"> right code </div>
</div>
then add style like this:

Code: Select all

#main-content:before, #main-content:after { content: ''; display: table; clear: both; }
#sidebar-left { width: 236px; float: left; }
#sidebar-right { width: 236px; float: right; }
#content-wrapper { width: 100%; float: left; margin: 0 -236px; }
#content { padding: 0 246px; }
@media (max-width: 800px) {
    #content-wrapper { margin-right: 0; }
    #content { padding-right: 0; }
    #sidebar-right { float: none; margin: 0 auto; }
}
@media (max-width: 600px) {
   #content-wrapper { margin-left: 0; }
   #content { padding-left: 0; }
   #sidebar-left { float: none; margin: 0 auto; }
}
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
Jade23
Registered User
Posts: 81
Joined: Mon Sep 22, 2014 2:40 pm

Re: Large Gap

Post by Jade23 »

Hey Arty,

Where exactly would I add this code into? For the style, I'm guessing it's common.css but what about the code above it?
Jade23
Registered User
Posts: 81
Joined: Mon Sep 22, 2014 2:40 pm

Re: Large Gap

Post by Jade23 »

I'd like to bump this for answers. I'm still having issues with this gap. It shows up in different heights from the header on different devices (iphone, ipad, computer, laptop).

---Edit----

I'm not sure how to code this suggestion into my forum and am nervous about fiddling with the code to make it work. Where do I copy/paste this to and what files do I need to edit?
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: Large Gap

Post by PlanetStyles.net »

Hi Jade,

Interesting layout for sure. So that I can help you with this, I don't suppose you could let me know whether you coded the sidebars yourself or are you using a MOD?

I'd be happy to take a closer look if you're comfortable sending me a copy of your style files through private message :)
Jade23
Registered User
Posts: 81
Joined: Mon Sep 22, 2014 2:40 pm

Re: Large Gap

Post by Jade23 »

Hi there!

This is what I used ---> https://www.phpbb.com/support/docs/en/3 ... silver-se/

I'd be glad to provide you with my styles info if you can help me get rid of this funky gap! :D Just let me know what you need.
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: Large Gap

Post by PlanetStyles.net »

Thanks Jade!

It may be a little tricky, but definitely not impossible to fix :)

Here's what I need you to do:

1) Browse to your forum installation
2) Browse to the madevo theme
3) .zip it up and download it
4) Attach it in a PM to me (or feel free to post here if you're comfortable with that)

I'll be a while digging around and seeing where the problem is, maybe an hour or two :)

C
Jade23
Registered User
Posts: 81
Joined: Mon Sep 22, 2014 2:40 pm

Re: Large Gap

Post by Jade23 »

Thanks much! I just downloaded it and will attach in PM now!
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: Large Gap

Post by PlanetStyles.net »

Thanks Jade, are you able to ping over the template and image files too?

My fault, I should have made this clearer. Thanks!
Jade23
Registered User
Posts: 81
Joined: Mon Sep 22, 2014 2:40 pm

Re: Large Gap

Post by Jade23 »

Sure, sorry! Downloading and attaching to PM now.
Locked

Return to “[3.0.x] Styles Support & Discussion”