Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #785130

    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.

    #785136

    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

    #785218

    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.

    #785259

    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

    #785360

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

    #785415

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

    Best regards,
    Mike

    #785431

    anyone else?

    #785460

    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

    #785688

    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.

    #785869

    Hi,

    Try adding this css code:

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

    Hope this would help :)

    Best regards,
    Nikko

    #785875

    great, thanks a lot!

    #785883

    Hi,

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

    Best regards,
    Nikko

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.