Different Background Colours on Home Page

  • Author
    Posts
  • #114450

    linahage4
    Member
    Original poster

    Is there a way to change the background colour of a section on the home page? For example, if I want my “Featured” section on my home page to have a different background colour than my “Portfolio” section, with the background colour being full-width, edge-to-edge?

    The blog I need help with is: linahage.com

    #114623

    anhtnt
    Theme Author

    Yes, you can do that. I answered a similar question for Call To Action section. Here is the CSS code:

    .section.intro {
        margin-left: calc((50% - 100vw) / 2);
        margin-right: calc((50% - 100vw) / 2);
        background: YOUR_COLOR;
        padding: 40px 0; /* Change this padding until looks good */
    }
    #114637

    linahage4
    Member
    Original poster

    Thank you. However, can I do this to only a section of the intro? please see my home page, I want only to change the background of the two columns “what can Lina do for you” and “Why should you choose Lina”.

    Thanks!

    #114639

    linahage4
    Member
    Original poster

    Hello. I have changed the button above to a call-to-action instead. But when I use that code, the two columns don’t stack and are not responsive as they were before. Please have a look. How can I make the two columns with the different background responsive and stack properly?

    Thank you for all of your help!!

    #114669

    anhtnt
    Theme Author

    Hi, I understand. It requires to change the markup and CSS, so please follow the following guide:

    Firstly, change the HTML content of the features page to follow:

    <div class="column-1">
        <h3 style="text-align:center;">What Can Lina Do For You?</h3>
        <p style="margin-bottom:10px;">
            <img style="display:block;margin-left:auto;margin-right:auto;" src="https://linahage.files.wordpress.com/2017/07/lh-icon-2.png?w=30" alt="lh-icon" width="30">
        </p>
        <p style="text-align:center;margin-bottom:10px;">
            <strong>Graphic Design Services, including:</strong><br>
            Brand Identity, Logos & Business Cards<br>
            Event Materials<br>
            Publication Layout & Design<br>
            Digital Signage<br>
            Personal Projects<br>
            <strong>Web Design Services</strong><br>
            <strong>Professional Photography</strong>
        </p>
        <p style="text-align: center"><a class="button" href="/services">View Services</a></p>
    </div>
    <div class="column-2">
        <h3 style="text-align:center;padding-bottom:0;">Why Should You Choose Lina?</h3>
        <p style="margin-bottom:10px;">
            <img style="display:block;margin-left:auto;margin-right:auto;" src="https://linahage.files.wordpress.com/2017/07/lh-icon-2.png?w=30" alt="lh-icon" width="30">
        </p>
        <p style="text-align:center;margin-bottom:10px;">
            <strong>Specializes in New Media</strong><br>
            <strong> 8+ Years Professional Experience</strong><br>
            <strong> Extensive Local and International Design Experience</strong><br>
            <strong> Friendly and Reliable Customer Service</strong><br>
            <strong> Competitive Costs</strong><br>
            <strong> Adobe Certified</strong>
        </p>
        <p style="text-align: center"><a class="button" href="/about">About Lina</a></p>
    </div>

    Note that I wrapped whole content in the 1st column in a div with class “column-1” and the 2nd column – “column-2”.

    Then add the following CSS:

    /* Make the section 100% width */
    .section.intro {
        margin-left: calc((50% - 100vw) / 2);
        margin-right: calc((50% - 100vw) / 2);
    }
    /* Hide section title */
    .intro h2 {
        display: none;
    }
    
    /* Make 2 columns */
    .intro .features {
      display: flex;
    }
    .column-1,
    .column-2 {
      width: 50%;
      padding: 40px;
    }
    
    /* Background for each column */
    .column-1 {
      background: #cacae0;
    }
    .column-2 {
      background: #acac0e;
    }
    
    /* Responsiveness */
    @media (max-width: 767px) {
      .column-1,
      .column-2 {
        width: 100%;
      }
    }
    #114672

    linahage4
    Member
    Original poster

    Thank you, I added this code and it’s better, but my text is being cut off on the left and right as I reduce the size of the window. Also, there is a huge gap between the two columns. Is there a way around this?

    I wanted to align the “View Services” and “About Lina” buttons which is why I had them in separate divs… can I still do this?

    #114674

    linahage4
    Member
    Original poster

    Also, it doesn’t seem to be stacking anymore…

    #114702

    anhtnt
    Theme Author

    Oops, I missed something, please change the CSS to:

    /* Make the section 100% width */
    .section.intro {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    /* Hide section title */
    .intro h2 {
        display: none;
    }
    
    /* Make 2 columns */
    .intro .features {
      display: flex;
    }
    .column-1,
    .column-2 {
      width: 50%;
      padding: 40px;
    }
    
    /* Background for each column */
    .column-1 {
      background: #cacae0;
    }
    .column-2 {
      background: #acac0e;
    }
    
    /* Responsiveness */
    @media (max-width: 767px) {
      .intro .features {
        flex-direction: column;
      }
      .column-1,
      .column-2 {
        width: 100%;
      }
    }
    #114707

    linahage4
    Member
    Original poster

    Thank you, you are amazing!!

    Is it possible to have buttons align without using the margin-top? since this will change based on responsiveness.

    #114738

    anhtnt
    Theme Author

    I’m afraid there’s no way to do that. You can always reset the margin-top for small screens to make them look good.

    #114778

    linahage4
    Member
    Original poster

    Thank you! Is there a way that I can limit the width of the content itself to the same width of the other sections? For example, when I stretch the width of my window the left column goes to the far left of the window and the right column goes to the far right leaving a huge gap in-between. It kind of breaks the container of the full site… is there a way around this?

    #114780

    anhtnt
    Theme Author

    I’m afraid it’s impossible. Since you need 2 columns stretched to 100% width to have background and now making the content narrow as in other sections, that will make you content look weird (as it’s not in the center of the columns). Besides, it’s kind of technical problem and I don’t think there’s an easy way to do that.

The topic ‘Different Background Colours on Home Page’ is closed to new replies.