styling question on this home page

[barryhill]

Hi

I am working on this site using atmosphere pro: http://vidyamala-burch.com/wp

I want to replicate the demo design where there is no gap vertically between the widgets, so the photo's are touching.

I have adjust some settings in style.css and stylefront.css and closed the gap quite a bit but when I inspect the widget panel in firebug I notice there is a bottom margin, which is still pushing the photo below down.

Any suggestion how I can remove that bottom margin in the widget so the photo closes up to the one above it?

thanks

Barry

http://vidyamala-burch.com/wp

[Victor Font]

The margins are on the images themselves. This CSS is creating the margins:

a.alignleft, img.alignleft, .wp-caption.alignleft {
    margin: 0 24px 24px 0;
}

Adding this to style-front.css should do the trick:

.front-page-3 .featuredpage img {
    margin-bottom: 0;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[barryhill]

Hi

Many thanks for this. It seems to have done the trick!

I notice from the atmosphere pro demo page https://my.studiopress.com/themes/atmosphere/#demo-full that the very corners of the images somehow touch, which is very nice, but I am wondering if that is CSS or just the size of the image? If I make the images on the home page the same size, will they do the same thing?

Barry

[barryhill]

I think I solved this myself by making the piks 640px wide, then the corners touch as in the demo.

thanks again for the help earlier Victor.

Barry

[JA Armira]

Came too late to answer, but yes your pictures above are 640px by 640px meanwhile the one below it's 540px
Glad you found the solution!

[Author]

Posts