Any shortcode for change column?

  • Resolved pigavetta

    (@pigavetta)


    4 years ago

    Hi, this plugin really helpful for my website. I just want to give some feedback, if the plugin comes with a some options to change the column. I just modify your plugin from 3 column to 1 column displayed post.

    I change css code

    .am__col-3 .am_grid_col {
    -ms-flex: 0 0 33.333333%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    margin-bottom: 30px;

    to:

    .am__col-3 .am_grid_col {
    -ms-flex: 0 0 33.333333%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.333333%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 30px;

    for displaying 1 column

    or displaying 2 column with this:

    .am__col-3 .am_grid_col {
    -ms-flex: 0 0 33.333333%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.333333%;
    flex: 0 0 100%;
    max-width: 50%;
    margin-bottom: 30px;

    I struggle with this plugin because just only displaying one kind type of column. I hope the contributor can add some shorcode to change many type of column.

    Is it possible to add new array 'col' => "3" as default? and the options are: 1,2,3,4

    col=”1″ is max-width:100%
    col=”2″ is max-width:50%
    col=”3″ is max-width:33.3333%
    col=”4″ is max-width:25%

    to replace am__col-3 at ‘<div class=’am_post_grid am__col-3 am_layout_{$layout}’>’
    I just know CSS a little, but know nothing with PHP. I hope the contributor can help me. Thank you in advance

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

Viewing 1 replies (of 1 total)

  • Your post set me off on the right path to find a solution for myself.

    I am using the below to make the plugin responsive.

    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
    .am__col-3 .am_grid_col {
    -ms-flex: 0 0 33.333333%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.333333%;
    flex: 0 0 100%;
    max-width: 100%;
    }
    }

    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
    .am__col-3 .am_grid_col {
    -ms-flex: 0 0 33.333333%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.333333%;
    flex: 0 0 50%;
    max-width: 100%;
    }
    }

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
    .am__col-3 .am_grid_col {
    -ms-flex: 0 0 33.333333%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.333333%;
    flex: 0 0 50%;
    max-width: 100%;
    }
    }

    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
    .am__col-3 .am_grid_col {
    -ms-flex: 0 0 33.333333%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.333333%;
    flex: 0 0 33.33%;
    max-width: 100%;
    }
    }

    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1400px) {
    .am__col-3 .am_grid_col {
    -ms-flex: 0 0 33.333333%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.333333%;
    flex: 0 0 25%;
    max-width: 100%;
    }
    }

    Hope this helps you too.

Viewing 1 replies (of 1 total)
  • The topic ‘Any shortcode for change column?’ is closed to new replies.