Hmm.. if I'm understanding correctly? -

Problem:
- Experimenting with resizing king image
- You can resize on your side account but not on your main account
- Noticed a size difference when inspecting elements
- Side account shows a 640x500 image
- Main account shows a 200x200 image

What you are trying to make work:
- Resize king images by flipping and adjusting(?)
- Expand(?) the image
- Understand why there is a difference between side and main account

What I'm seeing
- I don't see any resizing differences on my end. The king images on both the side account and main account appear to have the same dimensions and same orientation. Both kings on both accounts are looking to the right.
- Have you implemented the code already? Or are you still testing it out?
- Are you using the dynamic image layering or a static image?
- To break this down more, all lions in Lioden have their markings layered on top of each other. I'm sure you have seen it if you have inspected elements before. It'll be significantly easier if you can export out the lion into a single simple jpg, png file. That way it's easier to rotate, what not. (I realize it's not the most dynamic solution - if you change your lion's appearance, you will have to make sure the static image reflects those changes)
- It could be a caching issue as well. Unlikely but it's something to consider.
- It could be a code discrepancy issue: you did say they are identical, so I'm assuming there are no differences in base code. That said, it's never wrong to double check.

Hopefully you can figure out a solution? But I'll keep a look out (on both my main and side) and see if I can suggest anything that may help fix what you are facing. Cheers.

You have liked this post!

Hopefully there's not a duplicate response to this, I could've sworn I already hit reply.

But yes, nailed it. I'm mainly just trying to extend the king image to show more background / more of the king, and also try to figure out why it's possible on the side acc and not on the main. I haven't yet implemented anything because I'm not too sure what exactly it is that I'm messing with so I can put it into the .css file and actually get it in the code. It's the div style for div#lion_image, in there are height and width specifications and I'm messing with the width that way. It pushes the level, cubs, lionesses etc bars over to accommodate for the new size of the king image- which is exactly what I'm shooting for. I have height and width specifications in a div#lion_image section in my code, but it's just set to 100% for right now because it doesn't actually change the size, it so far has only worked by using whoever that is in inspect-element in the div style. I really hope that makes sense.
I'm not using a static image with my side account, but I did use one with my main. I removed it after I discovered tansform: scaleX(-1) to flip the image directly instead of implanting a flipped image. It's totally possible that removing that image afterward broke something and I now need to rebuild from the ground up to iron it out. I'll probably wind up doing that anyway, but just curious to see if there's anything else I can try.

Thanks a ton for reading all this! I really appreciate it :)

You have liked this post!

This is Trace on my side, but could you provide the specific code (which CSS elements) that you have put under each tag? I want to try replicating the error, but I'm not so sure where to start. For instance, I'm not sure which parent and sibling elements are there as well.

You have liked this post!

Sure thing. Here's what I've got in my own code under div#lion_image:
div#lion_image {
height: auto !important;
max-width: 100% !important;
margin-top: 30px;
margin-left: 8px;
border-radius: 5px !important;
overflow: hidden;
}
And I'll provide a screenshot to locate where I'm messing with settings in inspect-element for reference.

^^ Altering those width settings is what actually does the trick, regardless of div#lion_image settings


Hopefully this provides relevant info? Sorry if I misunderstood! I'll be off and on throughout the day so should hopefully be pretty quick with replies

You have liked this post!

This is going to be pretty long winded (I'll still try to make it simple), but this is what I can tell you.

Let's talk about the structure of the code first:

We have the 'container'...

The foundation of the container is a table. td tags are table cells.
The first table row contains your lion's name.
The second row is where the action is taking place > The lion image is in the first cell, in the context of CSS, that means it is in the left most cell.

Quickly made this to explain it better:

Lion Name
This is where things are happening	Level, Stats, Lionesses, etc	Branch, Territory, Beetle Slots, etc

There is a div inside this red bordered table cell, which has the ID 'lion_image'. As you can tell by the ID, the lion's image is going to be inside this div. But it's not so straightforward. There is another div inside this 'lion_image'. Disclaimer: I'm really simplifying it.
Another visual representation:

this is the table cell this is the div lion_image this is the another div

This is my assumption, but I think the reason why we might assume that there is another div (the green one) inside the div lion_image (the blue one) is because the blue one might serve as just "Hey my name is lion_image", but the green one has in-line CSS elements in them. Please do take note of this because if we are to make any changes to the container then we will have to consider these.

(What I mean by inline CSS elements, are CSS tags that are not 'controlled' by a CSS stylesheet, and are normally written together in the same line as HTML code.. I'm going off track.)

Now inside this green div, is the actual lion image.. we see all these img tags. All Lioden images are not static, we did establish this earlier! Everything (lineart, markings, base, decor) are on different layers. However not every layer is treated equally. Everything that has to do with the lion (lineart, markings) have set parameters 200x200 inside the img tags' inline CSS itself. (Did I mean that these images have their own set of in-line CSS.. and that means that each layer is controlled by their own lines of CSS on top of container CSS. Yes. 😖) On top of that, the decor and the background do not have set parameters 200x200.. they follow parameters 640x500.

So now, let's talk about what might have caused your problem(?)

The lion image source for the den is not the same as your lion page. I'll use my den and queen as examples. My queen has Ebony Heavy Rosette on Slot 3.. this is what it looks like on the den page.

https://static.lioden.com/images/battleLioness/kind//markings/ebonyheavyrosette.png

This is what it looks like on my lion page.

https://static.lioden.com/images/dynamic/lioness/kind//markings/ebonyheavyrosette.png

This means that regardless of however much you want to scale on Lioden's default layering dynamic image, it's not possible.. because the image source used is a 'cutout passport photo of the lion.'


So then Trace, why does it look like you might have managed to expand out onto the left of the face away from the body..?
That's where the parameter difference between the lion's and the decor's come into play, I believe it is possible to expand to only one direction. Even though lions have two sets of img sources, decors only come in one parameter for each lion pose/lion gender. If you have decor hanging out of the lion's mouth.. or flying/floating on the empty space next to the lion's side that is not the body, it is possible to show more in that regard.

What's the solution then?
I still think by far, if you want to show off more lion in the den, the best way to go is to use a static image. Export out your lion's image, and then use that instead. Always stay true to your actual lion's image because we don't want any false advertising. If you need help with regards to this as well.. hit me up? I think I have written a wall.. so sorry.

You have liked this post!

No this is great! I appreciate all the time you took to explain this. I'm certain it's obvious but CSS is very much a learning hobby for me so it was great to get some explanation from someone that knows a lot more about this than I do. I will likely take your solution and put an image there that shows more of my king and just update it as needed. And definitely have this thread bookmarked for future reference because I'm sure I'll need to look back at this from time to time lol. It's such a shame that extending the image only works in one direction! I was really hoping to have a dynamic fix to this weird thing I'm trying to do with my layout but images are just as good.

Thank you so much for all this! I seriously appreciate the effort you put into helping me with a very trivial portion of my layout haha. Be well :)

You have liked this post!

I'm glad I could help out! Enjoy the rest of November and I'll see you around. :D

You have liked this post!