Tagged: , , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 30, 2017 at 12:05 am #785130
    BeeCee

    Hi,

    no matter whatever I try to figure it out with Firebug … I don’t get it to work to make a box and a margin around each Instagram pic in the footer widget.

    Currently:

    My CSS:

    .av-instagram-item {
    border: 1px solid #8c919b !important;
    margin: 8px !important;
    padding: 4px !important;
}

    The Instagram images should look like this images:
    – box around
    – padding between box and image
    – margin around the box

    Thank you.

    April 30, 2017 at 12:48 am #785136
    Mike

    Hey Chris,
    The issue is the element is at 100% of the space available, so to make more room around each picture you will need to make them smaller. Instead, how about removing the solid border, it gives the illusion that the pictures are bigger and more padding :)

    .av-instagram-item {
    border: none !important;
    margin: 8px !important;
    padding: 4px !important;
}

    Your other option is to reduce the number of images.

    Best regards,
    Mike

    April 30, 2017 at 10:54 am #785218
    BeeCee

    Thanks, Mike, but with your CSS I have no border at all:

    but I would like to look it like this:

    just with space between these boxed images.

    April 30, 2017 at 3:04 pm #785259
    Mike

    Hi,
    I understand that is what you would like, but I tried the explain that the issue is the element is at 100% of the space available, so to make more room around each picture you will need to make them smaller or reduce the number of images.

    Would you like me to make the images smaller?

    Best regards,
    Mike

    April 30, 2017 at 6:58 pm #785360
    BeeCee

    I tried that, but if you make the images smaller, the border-box remains the same with no space between the boxes.

    April 30, 2017 at 9:12 pm #785415
    Mike

    Hi,
    I wish I could help more, but I don’t see how :)

    Best regards,
    Mike

    May 1, 2017 at 12:00 am #785431
    BeeCee

    anyone else?

    May 1, 2017 at 4:32 am #785460
    Nikko

    Hi,

    Try using this css code:

    .av-instagram-item {
    border: 1px solid #8c919b !important;
    margin: 0 0 8px !important;
    padding: 4px !important;
    max-width: 19%;
    margin-right: 1% !important;
    display: block;
    float: left;
}

    Let us know if this helps :)

    Best regards,
    Nikko

    May 1, 2017 at 1:05 pm #785688
    BeeCee

    Thank you very muchj, Nikko.
    Is there a way to adapt the overlay to this, too?
    It seems to be wider than the image.

    Thanks in advance.

    May 1, 2017 at 5:30 pm #785869
    Nikko

    Hi,

    Try adding this css code:

    .av-instagram-item .image-overlay {
    width: 104px !important;
    left: 0 !important;
}

    Hope this would help :)

    Best regards,
    Nikko

    May 1, 2017 at 5:42 pm #785875
    BeeCee

    great, thanks a lot!

    May 1, 2017 at 5:47 pm #785883
    Nikko

    Hi,

    Glad we could help. Let us know if you need more assistance or if we can close the thread :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.