No Margin On Responsive Sizes

[Porter]

My primary page has a bunch of widgetized areas, each with 40px of margin on the bottom. This works fine on the desktop version, and on most other layouts, but as soon as the responsive code kicks in to where it's a single column, all of my margin disappears (the images are just stacked on top of each other, with no space).

Any ideas why the margin is gone in this view, and how I can add it?

Page - anightinburlington.com

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Porter]

echo('bump');

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Porter]

forum.bump();

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Christina]

Towards the bottom of your stylesheet, you'll find this:
@media only screen and (max-width: 800px) {
Under that, you'll see this code:

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}

Change the margin to:
margin: 0 0 3%;
Or whatever number you'd like. Percentages look better on mobile than fixed pixels.

[Porter]

Thanks, that was the spot causing the issue. I can either change that, or simply add a specific media query for my front-page-widget class. I didn't think the above css would override my specific front-page-widget class (non-media query), but I guess I was wrong. Any specific reason why it did?

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Author]

Posts