Columns not in one row

  • Resolved kaigraves23

    (@kaigraves23)


    5 years, 11 months ago

    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)

    5 years, 11 months ago

    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)

    5 years, 11 months ago

    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)

    5 years, 11 months ago

    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)

    5 years, 11 months ago

    It worked! Thank you so so so much!

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    5 years, 11 months ago

    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.