Tagged: background, container, div
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,
Victoria
I gave you the wrong link to the new page, sorry, here you go.
https://www.bigsurcannabotanicals.com/new-home/
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?
Hi,
You can upload your screenshots on imgur.com 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,
Yigit