Archived

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

  • 0

Content auto spacing


Question

Posted · Report post

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

1 person likes this

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

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

Posted · Report post

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 :-)

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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 { }

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites