Joomstagram - Pictures are oversized

Hello,

first of all I would like to congrat you for the UT Joomstagram plugin.
But there is an issue since a while, because sometimes the pictures are "exploding". They are oversized. This is happing not always, but quite often.
They are also not horizontally aligned anymore, but vertically and are filling up the complete website screen.
Do you have any idea how to fix this?
Thanks in advance for your support.

Best

Chris

Hello,

this what I am thinking as well. But it is not happening all the time. Sometimes it is normal sized and sometimes extended when I open the website. I was curious to know if this issue is known or also happening to other users as well. I have some coding experience. If you can give me a hint for the CSS I can probably fix it.
This is the reason why I was putting the topic into the forum.
Thanks in advance.

Chris

This is the CSS:
.instagram_profile{text-align: center;}.instagram_profile_image{max-width: 125px;min-width: 50px;border-radius: 50%;margin: 0px auto 1rem}.instagram_username{font-size: 1.25rem;margin-bottom: 0.5rem}.instagram_biography{margin-bottom: 1.25rem}.instagram_items{display:flex;flex-wrap:wrap}.instagram_item{position:relative;width:100%;box-sizing:border-box}.instagram-image{position:relative;overflow:hidden;padding-bottom:100%;display:block}.instagram_item img{width: 100%;height:100%;position:absolute;top:0;left:0;object-fit:cover}

Not sure if this really helps.

Chris

I think some of the installed modules including the respective CSS interfer to each other and causing this issue.
Do you have an idea what I could change in your joomstagram.css or any other file in order that the sizing of the pictures will not "explode" anymore and stick to their size.
Possibly there is the chance to put an !important somewhere in the css?!?
I believe it will be too difficult to check all the interfernces between the different modules an plugins installed in Joomla.

Thank you in advance.

Chris

The Inspector gives the follwing css:

.instagram_item img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;

Do you have a modification script for me, which I should put in the user.css?
Should I also activate the Container in the module functions?

Thanks for your support.

Chris

Unfortunately, it did not work at all.

I added your lines to the original joomstagram.css:

.instagram_profile{text-align: center;}
.instagram_profile_image{max-width: 125px;min-width: 50px;border-radius: 50%;margin: 0px auto 1rem}
.instagram_username{font-size: 1.25rem;margin-bottom: 0.5rem}
.instagram_biography{margin-bottom: 1.25rem}
.instagram_items{display:flex;flex-wrap:wrap}
.instagram_item{position:relative;width:100%;box-sizing:border-box}
.instagram-image{position:relative;overflow:hidden;padding-bottom:100%;display:block}
.instagram_item img{width: 100%;height:100%;position:absolute;top:0;left:0;object-fit:cover}
.instagram-image{max-width:100%;}
.instagram_item img{max-width:100%;}

The images are still exploding. I believe that the 100% is still using somehow the complete Protostar template module space.

Is there not something to code else, in order to prevent this? It is really bad to have such huge Instagram Pictures filling up the website vertically.

Thanks.

Chris

Thanks for the answer again. I have already tried with the inspector, but without success.
I am using the Joomla Standard Template Protostar and therefore I believe more user are concernced. And yes you are right, this is a interference between your plugin and some other plugins respect. modules.
Therefore I had the question if you have a solution which gives prio to your plugin --> e.g. !important and how I have to code your CSS or something else in your plugin.
Can you support on this to have a kind of an update for Joomstagram to solve this?

Best

Chris

Do you have any chance to support on this.
What would you change or add in your joomstagram.css?

.instagram_profile{text-align: center;}
.instagram_profile_image{max-width: 125px;min-width: 50px;border-radius: 50%;margin: 0px auto 1rem}
.instagram_username{font-size: 1.25rem;margin-bottom: 0.5rem}
.instagram_biography{margin-bottom: 1.25rem}
.instagram_items{display:flex;flex-wrap:wrap}
.instagram_item{position:relative;width:100%;box-sizing:border-box}
.instagram-image{position:relative;overflow:hidden;padding-bottom:100%;display:block}
.instagram_item img{width: 100%;height:100%;position:absolute;top:0;left:0;object-fit:cover}

Thanks so much.

Chris

Dear leoalv,

do you have any proposal how to do that?
I believe 100% does not help too much, because this would fill-up all available space.
What do I have to change in those 4 lines of code in order that the pictures remain in the given setup?
.instagram_items{display:flex;flex-wrap:wrap}
.instagram_item{position:relative;width:100%;box-sizing:border-box}
.instagram-image{position:relative;overflow:hidden;padding-bottom:100%;display:block}
.instagram_item img{width: 100%;height:100%;position:absolute;top:0;left:0;object-fit:cover}

Thanks so much.

Best

Chris