Maximize image size to extend left/right

  • nat2017

    (@nat2017)


    8 years ago

    Hi there,

    I’ve used the following custom CSS to display images in two columns:

    .instagram-pics li {
    float: left;
    width: 42%;
    padding: 0;
    margin: 0;

    A width of 42% is the max I can go with and still have 2 columns show up in mobile format.

    2nd Instagram plugin on the right > https://www.natatatouille.com

    I have no padding/margin applied, however, the images are indented in from both the left and right side (i.e. the image edges don’t align with the black Instagram heading above them). Is there any way to fix this?

    Thanks!
    -Natalia

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Scott (@scottsweb)

    (@scottsweb)

    Hi Natalia

    It looks to be the right hand margin you have on the Instagram pics that is stopping them from sitting correctly:

    sidebar .instagram-pics li:nth-child(2n+1) {
    margin-right: 18px
}

    You might want to change the nth-child selector. I haven’t tested this but I think you want something like:

    sidebar .instagram-pics li:nth-child(odd) {
    margin-right: /*INSERT REQUIRED MARGIN*/
}

    This will give the first images margin to the right, not the second ones.

    Thread Starter nat2017

    (@nat2017)

    Thanks Scott.

    I just gave it a quick try but it didn’t immediately work. I haven’t had a chance to properly play around with it yet though so hopefully it will work after I’ve given it some more time.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Maximize image size to extend left/right’ is closed to new replies.