Support » Plugin: Easy Widget Columns » Columns not in one row

  • Resolved kaigraves23

    (@kaigraves23)


    Hi there,

    For some reason the images I’m placing in the columns aren’t showing on one row. Can you please help?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hi @kaigraves23,

    The issue is with the .container-fluid class being added to each widget in your row. It assigns the following CSS which overwrites the columns classes assigned by the plugin:

    .container-fluid {
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-right: auto;
        margin-left: auto;
    }

    The specific rules affecting the column classes are width: 100% and margin-left: auto. If you can remove the .container-fluid class from each widget, this would solve the problem.

    Let me know if this helps.

    Good luck with the website!

    Thread Starter kaigraves23

    (@kaigraves23)

    Thanks Alexis! Would you be able to give me some direction as to how to make that edit? I’m not a web developer by profession. Assuming I’ll need to make edits to the theme CSS…

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hi @kaigraves23,

    The easiest way to override the CSS above is to add the CSS classes with some modification in the Customizer. Here are the steps you can take:

    1. Navigate to Settings > Widget Columns and select the second option “Do NOT load the CSS in the <head>…”. This will remove the CSS classes stylesheet from the website so you can add them manually.

    2. Navigate to Appearance > Customize > Additional CSS and add the following CSS styles:

    .one-half,
    .one-third,
    .two-thirds,
    .one-fourth,
    .three-fourths,
    .one-sixth,
    .five-sixths {
        float: left !important;
        margin-left: 2.5641025641026% !important;
    }
    
    .one-half {
        width: 48.717948717949% !important;
    }
    
    .one-third {
        width: 31.623931623932% !important;
    }
    
    .two-thirds {
        width: 65.811965811966% !important;
    }
    
    .one-fourth {
        width: 23.076923076923% !important;
    }
    
    .three-fourths {
        width: 74.358974358974% !important;
    }
    
    .one-sixth {
        width: 14.529914529915% !important;
    }
    
    .five-sixths {
        width: 82.905982905983% !important;
    }
    
    .first {
        clear: both !important;
        margin-left: 0 !important;
    }

    Now the columns classes will be added manually to the <head> tag of your website with the !important property to make sure they are not overwritten by your theme or other plugins.

    Thread Starter kaigraves23

    (@kaigraves23)

    It worked! Thank you so so so much!

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Excellent, I’m glad I could help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Columns not in one row’ is closed to new replies.