• Resolved hassan.Zia

    (@hassanzia)


    huy ALL
    is it possible to modify the position and number of circles to appear in a row.
    e.g two circles in first row (in the middle)
    three in the row below (divided into equal distances)

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What do you mean by divided into equal distances?

    Thread Starter hassan.Zia

    (@hassanzia)

    i want it to appear like this
    https://postimg.org/image/ivaoqd0n1/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If the pattern is going to be consistent you can do this in CSS, e.g:

    /* Choose which circles will start on new line */
    .hentry:nth-of-type(2),
    .hentry:nth-of-type(4),
    .hentry:nth-of-type(7){
        clear: left;
    }
    
    /* Add the margin to space them out */
    /* E.g the measurements for 1st row of 1 circle */
    .hentry:nth-of-type(1) {
        margin: 0 33.5% 5%;
    }
    
    /* E.g the measurements for 2nd row of 2 circles */
    .hentry:nth-of-type(2),
    .hentry:nth-of-type(3) {
        margin: 0 5% 0 15%;
    }
    
    /* E.g the measurements for 3rd row of 3 circles */
    .hentry:nth-of-type(4),
    .hentry:nth-of-type(5),
    .hentry:nth-of-type(6) {
        margin: 5% 6% 0 5%;
    }

    You probably want to put that in a media query too so that the mobile version doesn’t get messed up.

    Thread Starter hassan.Zia

    (@hassanzia)

    ok let me try.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘modify number of circles (home page) per row’ is closed to new replies.