Jump to content

Archived

This topic is now archived and is closed to further replies.

AEP

White Bars Showing Up on Pages, Not a design feature requested...

Recommended Posts

AEP

I have tried to fix this problem with full width white bars showing up on this website but have not been successful.  In DMS it does not show these bars however when you use a browser to view the page the bars show up. Please help me eliminate these white bars.  

 

website: http://featherstonstudio.com/

 

http://screencast.com/t/IzMKDhxFXWPe

 

When I used Chrome Inspect it shows this HTML:  

 

<div id="dynamic-content" class="outline template-region-wrap pl-area-container">
<!-- Canvas Area | Section Template -->
<section id="pl_areauv67p30" data-object="PLSectionArea" data-sid="pl_area" data-clone="uv67p30" class="pl-area pl-area-sortable area-tag pl-black   pl-bg-cover section-pl_area" style="  "><div class="pl-area-pad fix"> <div class="pl-area-wrap " style="padding-top: 20px; padding-bottom: 20px;">
 
<div class="pl-content nested-section-area">
<div class="pl-inner area-region pl-sortable-area editor-row" style="">
<div class="row grid-row">
 
<!-- MediaBox | Section Template -->
<section id="mediaboxut4fixf" data-object="PageLinesMediaBox" data-sid="mediabox" data-clone="ut4fixf" class="pl-section span12 offset0    pl-bg-cover section-mediabox" style="  "><div class="pl-section-pad fix"><div class="mediabox-wrap pl-centerer pla-fade pl-animation fix animation-loaded" style="min-height: 30px">
<div class="the-media fitvids pl-centered center hentry" style="margin-top: 0px;">
<div class="the-media-html"></div>
</div>
</div></div></section></div> </div>
</div>
</div>
</div></section> </div>

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

I am unable to view your website, as it appears down or is just timing out, are you having hosting issue ?

 

In regards to the white space or gaps, this is likely caused by either padding or margin. What you will want to do is inspect the areas where the white space/gaps are occurring with Google Chromes dev tools. In Chrome dev tools margin is displayed as an orange color and padding as a green color to help you quickly distinguish between the two. Once you know what property is causing the white space, you will simply want to reduce it using CSS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
AEP

Sounds good.  If you like please let me know your IP address and  I can give it to my hosting company to give you access.

Share this post


Link to post
Share on other sites
Danny

Try and use Google Chromes dev tools first, because you really should get a basic understanding of it and if you do, you won't regret it. I would recommend you signup to Code School and complete their free introduction to dev tools, it's well the time and effort and will have you a dev tools ninja in no time.

 

https://www.codeschool.com/courses/discover-devtools


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
AEP

I saved the code school link on my browser....so I will be sure to use it.  I did post a jing image on my first post...are you guys still using Jing (is is referenced on your support forum doc)?  http://screencast.com/t/IzMKDhxFXWPe

 

I had success changing the padding using CSS/LESS but still no change with the full width white bars at the bottom of the page ( I can see the padding/margin changes in using Inspect).  I'm curious if I reset DMS or delete and then reinstall (sort of drastic but at this point I'm ready to give it a try)...I tried deactivating and reactivating but no change.  The full width white bars only show up on 2 of the pages (landing page and another page) the rest of the pages are ok...all black backgrounds w/ white text as configured in the section background setup theme using DMS.  The margins are at 0 for all sections...so it doesn't appear to be a padding or margin issue.  Thoughts about reseting or deleting DMS and reinstalling?

 

div.pl-area-wrap
{
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
 
.pl-region-bar
{
  height: 0px;
}
 
element.style {
padding-top: 0px;
padding-bottom: 0px;
}

Share this post


Link to post
Share on other sites
AEP

The full width white bar between the footer and <div id="dynamic content" class="content template-region wrap pls-area-container">  as part of the media box in <div id="dynamic-content" class="outline template-region wrap pl-area-container"> with margins=0 padding=0...so it appears to be part of DMS dynamic content.

Share this post


Link to post
Share on other sites
AEP

Just got the upper white bar to disappear by changing the min height from 450 to 0 in the <div id="dynamic-content" class=outline template-region-wrap pl-area container"> Inspect shows the 450px in the media="all" body .pl-

region> .template-region-wrap.

Share this post


Link to post
Share on other sites
AEP

I got it removed by using this...

 

.template-region-wrap {

    min-height: 0px;

}

 

now for the next one...

Share this post


Link to post
Share on other sites
Danny

Awesome job, just keep inspecting the elements and you will see what is causing your white space, like I mentioned this is usually padding or margins. So if you reduce them it will remove the gap.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
AEP

so I changed the design with new header image and white background....and added customer css/less to reduce paddings....the owner likes the new design...so do I.  Thanks for your help. 

Share this post


Link to post
Share on other sites
Danny

No problem and nice job!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×