Need Help Adding 4 Columns to Home-Top Section – Executive Pro

Community Forums Forums Design Tips and Tricks Need Help Adding 4 Columns to Home-Top Section – Executive Pro

This topic is: resolved

This topic contains 12 replies, has 3 voices, and was last updated by  braddalton 10 months, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #80695

    4WardMotion
    Participant
    Post count: 34

    Can someone tell me what I need to do to get 4 columns added to the home-top section using Executive Pro? I have changed the css to be 25% and played around with the padding, but it will not put my forth column to the right of the other three. It keeps dropping it below. I have also looked in functions.php and I can’t see anything in there that would affect this.

    Here is the page in questions: http://fultonhotelsolutions.com

    Probably something simple, but I am not getting it figured out.

    Thanks!

    http://fultonhotelsolutions.com
    #80699

    braddalton
    Participant
    Post count: 10337

    Around line 1295 i changed the code to this:
    [css]
    .home-middle .widget {
    float: left;
    padding: 0 2.8%;
    width: 33.33333333%;
    }

    .home-top .widget {
    float: left;
    padding: 0 2.8%;
    width: 25%;
    }
    [/css]

    And it works for me.

    Change Home Top Widgets From 3 To 4 In Executive


    #80704

    braddalton
    Participant
    Post count: 10337
    #80713

    4WardMotion
    Participant
    Post count: 34

    Hi Brad,

    Thank you very much for your tutorial. I tried doing this and it still isn’t working for me. I also tried adding the centering of the title css that you added and that didn’t work either.

    Can you look at my site at http://fultonhotelsolutions.com and tell me if you can see what is going wrong?

    Thanks for your help!

    #80716

    braddalton
    Participant
    Post count: 10337

    1. This is the code in your style sheet which is not the code i provided in my tutorial:
    [css]
    /*
    Custom CSS Additions
    —————————————————————————————————- */

    .home .featured-content .entry-title h4 {
    font-size: 1.5rem;
    text-align: center;
    }
    [/css]

    Please remove the h4

    2. Also, nth-of-type(3n+1) doesn’t work for 4 columns which is why the 25% width doesn’t work.

    This works however the code is not needed.

    [css]
    .home-middle .widget:nth-of-type(3n+1),
    .home-top .widget:nth-of-type(4n+1) {
    clear: left;
    }
    [/css]

    fixed


    #80718

    4WardMotion
    Participant
    Post count: 34

    Yeah, I was trying that with the h4 as the other wouldn’t work. I have changed it out now. My problem is still with the 4 columns not working. It is still dropping the 4th one below the other three. Are you not seeing it that way in your browser? I have tried IE, Firefox and Chrome browsers and all three render the same for me. It looks like it should be there, but it keeps dropping the 4th column below.

    Any ideas?

    Thanks!

    #80719

    4WardMotion
    Participant
    Post count: 34

    Here is how it looks on my end:

    4 column Executive Pro example

    • This reply was modified 10 months, 1 week ago by  4WardMotion.
    • This reply was modified 10 months, 1 week ago by  4WardMotion.
    #80720

    braddalton
    Participant
    Post count: 10337

    Works as the screenshot shows with your style sheet.

    Here’s your style sheet http://pastebin.com/akSzv0yZ


    #80723

    4WardMotion
    Participant
    Post count: 34

    Sorry, I’m not following you. Are you saying that my style sheet works fine for your example? I tried posting a picture of what I am seeing above, but it doesn’t seem to be working.

    Here is another try and posting what I am seeing on my end:

    4 Column Issues

    Thanks again for your help with this. I feel like I’m losing my mind, but I just can’t seem to get this figured out.

    #80724

    braddalton
    Participant
    Post count: 10337

    I tested this style sheet so i know it works.

    Replace the code in your style sheet with this code http://pastebin.com/akSzv0yZ


    #80726

    genwrock
    Member
    Post count: 737

    Please modify your styls.css file.

    .home-middle .widget:nth-of-type(3n+1), .home-top .widget:nth-of-type(3n+1) {
        clear: left;
    }

    WILL BE

    .home-middle .widget:nth-of-type(3n+1) {
        clear: left;
    }

    See My PRO Genesis Child Themes | Need Genesis Developer? | Follow Me on Twitter

    #80727

    4WardMotion
    Participant
    Post count: 34

    Ok, I just followed what genwrock told me to modify and that worked. I just looked at the style sheet you posted Brad and it looks like you removed that from the style sheet all together. If so, you might want to add that to your tutorial as it definitely worked for me.

    Thank you both so much for your help. I can now go to bed knowing that I finally got this issue resolved with your help!

    #80732

    braddalton
    Participant
    Post count: 10337

    I tested the code without it and it works so its not needed.

    This code relates to the home middle widgets and not the home top widgets.

    [css]
    .home-middle .widget:nth-of-type(3n+1) {
    clear: left;
    }
    [/css]

    The screenshot was taken without using that code and proves it works.

    Its also not needed for the home middle widgets.


Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.