Support » Plugin: WP Instagram Widget » The link is broken.

The link is broken.

  • Resolved madfcat

    (@madfcat)


    3 years ago

    I can only add link anchor. Where do I add the link to instagram itslef?

    Thank you.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Scott

    (@scottsweb)

    3 years ago

    Can you explain what you are trying to do in more detail.

    Thread Starter madfcat

    (@madfcat)

    2 years, 11 months ago

    It seems that after update it just messed the HTML layout.

    There’s <p> tag. In this tag the link to the instagram page is located.
    There’s also

      tag. In this one you have got all your instagram previews.

      The problem is that after update I’ve got

      followed by <p>. The easiest way to do it to chenge the order of the tags. So, if I put <p> before
      it just solves. How do I do it without changing plugin code. I want to update in the future. Don’t want to edit it manually after each update.

      Thank you.

      Here’s the screenshots:
      how it should be: click here
      how it is now: click here

      Inspect footer on pillswheels.com

    Plugin Author Scott

    (@scottsweb)

    2 years, 11 months ago

    Hi
    You will notice that the <p> tag has a class of clear. This is because the Instagram images are often floated (as in your footer) and the <p> needs to clear that. There is a CSS trick known as clearfix:

    https://css-tricks.com/snippets/css/clear-fix/

    Add the following CSS to your site:

    .clear:before,
.clear:after {
  content: "";
  display: table;
} 
.clear:after {
  clear: both;
}
.clear {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
    Thread Starter madfcat

    (@madfcat)

    2 years, 10 months ago

    Good day to you, Scott!

    Although your solution made the box one under another, it did nothing with the order of the title and photos.

    So here’s more suitable solution using Flexbox, that worked for me:

    .null-instagram-feed {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}

ul.instagram-pics {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}

p.clear {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}

    More info about using flexbox: https://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css
    HTML+CSS demo: http://jsfiddle.net/thirtydot/hLUHL/

    Thank you for your care.

    • This reply was modified 2 years, 10 months ago by madfcat.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘The link is broken.’ is closed to new replies.

Topic Tags

Views