The link is broken.

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

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

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) */
}

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: https://jsfiddle.net/thirtydot/hLUHL/

Thank you for your care.

• This reply was modified 6 years, 7 months ago by madfcat.