Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1269571

    Scroll down, below Exclusive Offers, are four tall rectangles. I want the entire div to be smaller than the standard width of the other sections. To achieve the orange background I’m using padding but I should use a background color instead.

    Whats the best way to achieve these four containers?

    Here’s my CSS:

    #av_section_4 .av_one_fourth {
    	margin-left: 0;
    	left: 9%;
    	background: #d88d2a;
    	padding: 5px;
    #av_section_4 .av-image-caption-overlay {
    	text-align: left;
    #av_section_4 .av-image-caption-overlay-center {
    	padding: 0;
    #av_section_4 .av-image-caption-overlay-position {
    	transform: rotate(-90deg);
    	position: absolute;
    	bottom: -18%;
    	right: 43%;

    Hey jknetdesign,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,


    I gave you the wrong link to the new page, sorry, here you go.

    How do you attach?

    Scroll down, below Exclusive Offers and I built four containers with an orange background.

    The entire orange square needs to be smaller, in width, than the full width color section.

    What is a better way to do this?



    You can upload your screenshots on and post links here.

    I checked your website and it seems like you have already figured it out :)
    You could also edit your Color Section element and give it unique ID (“your-unique-id” in example below) and then add following code to Quick CSS in Enfold theme options > General Styling tab

    #your-unique-id .container {
        max-width: 80%;

    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.