• Resolved Uval

    (@uval)


    Ciao,
    I’m using two columns and for some reason they don’t show one next to the other. Instead they appear to be one on top of the other.

    I tried to change the image size but that didn’t do it. You will see on the link its the last 2 images+text which I would like to have one next to the other. http://www.nutreenaskincare.com/

    How can i fix it?

    Thanks.

    https://ww.wp.xz.cn/plugins/pixgridder/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author manuelmasia

    (@manuelmasia)

    Sorry for the late reply, however your site seems often down, at least the times I try to visit it…

    Thread Starter Uval

    (@uval)

    That’s strange..
    It was on last night (wed) and I checked just now (Thursday morning) and its on.
    I did noticed that for some reason it took too long to load this morning so maybe my host service was doing something I don’t know.

    It’s on now.

    Thanks

    Plugin Author manuelmasia

    (@manuelmasia)

    Ok, now I see, there are some lines on the CSS of the theme you use (I assume):

    .container .column, .container .columns {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
    }

    In particular they set different margins for the element with class “.column” and override the plugin. You should edit the CSS file, if you are the developer of the theme, and remove the margins, or add somehow/somewhere, as you prefer:

    .pixgridder .column {
      margin-left: 3%!important;
      margin-bottom: 3%!important;
    }

    Let me know. Manuel 🙂

    Thread Starter Uval

    (@uval)

    I tried but it effected the 3 column layout I have on the page and that’s it.

    I did this:

    .container .column, .container .columns {
    float:left;
    display:inline;
    margin-left:10px;
    margin-right:10px;
    }
    .row {
    margin-bottom:20px;
    }
    .pixgridder .column {
    margin-left: 3%!important;
    margin-bottom: 3%!important;
    }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha {
    margin-left:0;
    }

    Plugin Author manuelmasia

    (@manuelmasia)

    Ok, it is a problem with theme, try this instead:

    .pixgridder .column[data-col] {
        margin-left: 3%!important;
        margin-right: 0!important;
    }
    .pixgridder .column[data-col]:first-child {
        margin-left: 0!important;
    }
    

    Let me know. Manuel 🙂

    Thread Starter Uval

    (@uval)

    Beautiful!!!
    Works great!

    Thank you very much 🙂

    Thread Starter Uval

    (@uval)

    Resolved

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘2 columns wont align’ is closed to new replies.