Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 21, 2020 at 1:38 am #1254506
    KMC DC

    I am using color sections on several pages of my site. Within the color section I situated some columns. I utilized this layout to allow the columns to sit on one common color background extending across all of the columns. Some of the pages don’t have the look I want though. There are some pages (like this one) where I would like the color section and the single (free resources) column beneath it to have the same width. I would prefer to scale the color section down to the width of the column beneath it.

    How can I make a color section so that it has a limited width as described?

    Thanks

    October 22, 2020 at 5:52 am #1254835
    Rikard

    Hey KMC,

    I’m not sure if I’m missing your point here, but wouldn’t it be better if you used the same element as you have used below that section, instead of the Color Section?

    Best regards,
    Rikard

    October 22, 2020 at 7:12 pm #1255070
    KMC DC

    Thanks Rikard, I used a css hack for the page I originally linked to. However, there are other pages where I don’t see a solution. For example, here. I have two 1/2 column elements with gaps (Guided meditation and Podcasts). I like their spacing and want all the sections on the page to be uniform.

    Below them, I would like the entire free book section to be the same size. I used a color section with a 1/1 and two 1/2’s. I could not use a grid row because the free books is a separate element from the two books and they appear with a gap.

    Below that is a single color section with 1/5 and 4/5 sections that I would like to display as the same size as the Guided Meditation and Podcast sections.

    Does that make sense?

    Cheers

    October 26, 2020 at 9:02 pm #1255833
    Victoria

    Hi KMC DC,

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

    Best regards,
    Victoria

    October 31, 2020 at 5:44 am #1257209
    KMC DC

    Hi Victoria

    Here is a mockup. The bottom picture is what I am aiming for.

    Mockup

    Thank you

    • This reply was modified 4 years ago by KMC DC.
    October 31, 2020 at 5:45 am #1257210
    KMC DC

    Mockup

    • This reply was modified 4 years ago by KMC DC.
    November 4, 2020 at 12:18 pm #1258219
    Yigit

    Hi,

    – Please go to Enfold theme options > Layout Builder and make sure “Hide template builder developer options” is unchecked.
    – Edit your Color Section element on your page and go to Advanced > Developer Settings and give it a “Custom ID Attribute” (I used “custom-id” for example below)
    – Add following code to Quick CSS in Enfold theme options > General Styling

    
#custom-id {
    max-width: 1210px;
    float: none;
    margin: auto;
}

    Best regards,
    Yigit

    November 5, 2020 at 8:33 pm #1258721
    KMC DC

    Thanks @Yigit

    That does work for full size desktop browsers. If I resize the browser or use a mobile device, then the color section still maintains a full-width appearance.

    Is there a way to include within the css a few lines that handle responsiveness?

    Cheers!

    November 6, 2020 at 12:16 pm #1258838
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 768px){
#color-section-margins {
    max-width: 87%;
}}
@media only screen and (max-width: 480px){
#color-section-margins {
    max-width: 85%;
}}

    Best regards,
    Yigit

    November 6, 2020 at 6:34 pm #1258937
    KMC DC

    Thank you @Yigit

    November 6, 2020 at 8:39 pm #1258959
    Victoria

    Hi KMC DC,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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