Jump to content


Photo
- - - - -

Content auto spacing

spacing content features css custom

  • Please log in to reply
5 replies to this topic

#1 patnelligan

patnelligan

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 22 April 2013 - 08:02 AM

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:

Please Login or Register to see this Hidden Content

 

for the site

Please Login or Register to see this Hidden Content

 

Any help would be appreciated!!!

 

Thanks


  • bekanGop likes this

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15120 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 22 April 2013 - 08:11 AM

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.



#3 patnelligan

patnelligan

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 23 April 2013 - 02:46 AM

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.



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 23 April 2013 - 04:00 AM

Is it supposed to display like this -

Please Login or Register to see this Hidden Content

 

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


  • patnelligan likes this

#5 patnelligan

patnelligan

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 23 April 2013 - 06:42 AM

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



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15120 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 April 2013 - 07:16 AM

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:

 

 

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

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: spacing, content, features, css, custom