[Chris StovallParticipant]

Hello and thank you x-theme for being super helpful!

I’m trying to develop a standard set of CSS items I end up adding to every site. I’m really trying to cut down on the amount of time I enter things into a Cornerstone page.

For example, it would be awesome if I could have a section that adjusted it’s padding based on the screen size.

This is what I came up with but it’s not working for some reason.

.section-std {
	margin: 0px;
	padding: 7% 5%;
}
@media (max-width: 768px) {
	.section-std {
	margin: 0px;
	padding: 12% 8%;
	}
}

I would love two codes.

1) Fix code above to work
2) Create similar code based on percentages for a Gap

Thanks!
CDS

[Rue NelModerator]

Hello There,

Thanks for writing in! Your code will work if you add a custom class section-std in your section settings. And you also nned to keep in mind that each section will have a default margin and padding added as inline css. Inorder for your cde to work out, you can have something like this:

.section-std {
  margin: 0 auto !important;
  padding: 7% 5% !important;
}

@media (max-width: 768px) {
  .section-std {
    margin: 0 auto !important;
    padding: 12% 8% !important;
  }
}

Hope this helps. Please let us know how it goes.

[Chris StovallParticipant]

What about for a gap that works the same way?

[LelyModerator]

Hello Chris,

Are you referring to GAP element? Try this:

.custom-gap {
	margin: 50% 0 0 0;
}
@media (max-width: 768px) {
.custom-gap {
	margin: 20% 0 0 0;
}
}

Then add custom-gap on the element class field. Feel free to change the value.

Hope this helps.

[Author]

Posts