Jump to content
Sign in to follow this  
patnelligan

Content auto spacing

Recommended Posts

patnelligan

Hello,

 

 

I am a terrible programmer and had a perfectly functional site! However, a week later, all of the css I added decided either not to work or to partially work.

 

I managed to fix a few but not all of these problems. I have gaps between the features and the images that shouldnt exist and dont seem to go away whatever I do.

 

Here is my css:

.section-navbar .content-pad {
    padding-top: 0px;
    padding-bottom: 0px;
}

.content .content-pad {
    padding: 0px;
}


#content  {
    margin: -10px;
}



.widget .widget-pad {
    padding: 0px;
}

.one-sidebar-right #column-main .mcolumn-pad, .two-sidebar-right #column-main .mcolumn-pad {
    padding: 0px 0px 0px 0px;
    
}

.widget .textwidget {
    padding: 0px 0px;
 
}
 

 

for the site http://www.pelicanpestcontrol.com.au

 

Any help would be appreciated!!!

 

Thanks

  • Like 1

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Can you provide an image what your site should look like please.

 

Also, you're using negative margins, which can cause issues with your layout. Instead you should reduce the padding for all your sections. All sections contain a .content-pad container which usually has roughly about 15px padding top, right, bottom and left.

 

Near the bottom of your site you have a number of <p></p> tags which is increasing the gap at the footer of your site, these <p> tags are from what I can tell are doing nothing and can be removed.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
patnelligan

Sorry...dont have an image. The site is basically supposed to have the images of the insects tight and lined up under the feature slider (it all fits perfectly).

 

The images seem to be putting spaces between themselves and the feature.... I just cant figure out how to get rid of that.

 

Thanks for all your help.

Share this post


Link to post
Share on other sites
James B

Is it supposed to display like this - http://screencast.com/t/vKiLCl88Zh4

 

The spacing is being caused by a margin applied to the 'alignleft' class. If you set to {margin:0;} on that class it will remove the gaps like the above screenshot :-)

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
patnelligan

Precisely...but without the gap above the images and between the feature.

Share this post


Link to post
Share on other sites
Danny

James has gave you the answer above to resolve your issue, your images have a margin which is separating them from one another. Removing this margin will remove the gap which will resolve your issue.

 

What I would recommend is for you to wrap your images code inside a div with a custom class, then you can target these image without it effecting all other images on your site.

 

For example:

 

https://gist.github.com/anonymous/838d9bb9eb920bc83a72

 

Then you can apply custom CSS using the new class from the div to give these images no margin.

.myImages img { }

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • Dan Haddock
      By Dan Haddock
      Plugins Active and installed: 
      Akismet Anti-Spam
      Coming Soon Page & Maintenance Mode by SeedProd
      Contact Form 7
      Cookie Law Info
      DMS Professional Tools  
      Enhanced Media Library  
      Flamingo
      Google Analytics for WordPress by MonsterInsights
      Google XML Sitemap
      Jetpack by WordPress.com
      Legull 
      Loginizer   
      MailChimp for WordPress
      PageLines Updater    
      Schema App Structured Data 
      Sucuri Security - Auditing, Malware Scanner and Hardening
      Uber reCaptcha    
      Yoast SEO
      Wordpress Version: 4.8.1
      Pagelines Version: 2.2.4
       
      Good Evening/Afternoon or Morning, 
      I am running into a problem with CSS styling not applying inside of most browsers (Safari, Firefox) when I am logged in to wordpress, and all browsers that I have tested when I am logged off and the site has been made public (Chrome, Firefox and Safari).
      As a result, I have managed to identify the probable cause. It looks as though these browsers are refusing to render my sites compiled CSS file due to it being a HTTP URL rather than HTTPS.
      I have attempted to change this URL to HTTPS in my browser, however it brings back an ERROR: File not found page - https://www.shortfilmblog.com/wp-content/uploads/pagelines/compiled-css-core-1505847507.css
      What would you suggest in this regard? Would this be resolvable from your end?
      Happy to provide any further details required.
    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • Dan Haddock
      By Dan Haddock
      Hi Pagelines team and wider community,
      I am looking to develop a single post page for my blog. I have read over an old article on the subject, however the link provided on achieving this goal was giving me security warnings. Is there any way I can get round this?
      Secondly, I have had a root around the .zip file provided on my sites backup, however was unable to locate any file in there with the name of Single.php. Does this file exist in the Pagelines theme?
      By the way, this is the unsafe article: http://support.pagelines.me/docs/customization/create-a-custom-page-template/ (Click at your peril).
       
×