Help with adding images off to the sides of a pet profile
Replies
So, I have Catwitch who has her art off to the side.
I'm using this code (links leads to a discord attachment) and this happens. It seems that it stays within the description box and I want it off to the sides where its green, like Catwitch has. Using the exact same code, but it behaves differently and I'm not sure why (I am also horrendous at coding, so...)
Help much appreciated! My goal is to get one image on the left side and another on the right, if that helps (:
Okay but they are using different profile setups which is where the issue is occurring, the image itself may use the same code but there are other bits of code that affect the image.
First off it be a good idea to know why does the image behaves differently, an I think I figured out the issue, it's partly the variable position so let me explain below what I mean by that:
- Setting position to absolute makes it relative to the first ancestor to be positioned that is not static if none it's based on viewport/page which is not the case this time, while the profile that works is that case (I was looking at old posts noticed I helped with Catwitch)
Quick Ancestor term explanation for html context (just in case)
So from my poking around the image is positioned based on the element in this case and combined with the value of overflow set this causes the image to be cut from view when positioned outside the box hence with arm being cut on your example
One solution would be to set 's position to be a value that won't interfere, so put the below inside some style tags (<style>HERE</style>) it sets other variables as well cause I copied the selector Catwitch uses but only kept the position variable, though it's still positioned relative to another element which I think is body but overall should be fine just keep in mind it's basically relative to the white box and I think that is a good thing actually with how the profile acts
, , .container-fluid, -content { position: static; }So now you should be able to position the images how you like with the code you're using but I recommend modifying the code a bit for the left image in particular since the profile acts differently, it may seem weird to do this but position the left image with the variable of "right" instead of "left" and vice versa for the right image.
One reason for the above is if you need to adjust size of the image it will keep it's relative position away from the white box otherwise youd need to tweak positioning of it as well.
Also note the attribute of "id" must be unique if you set more then one element with the same ID only the first element in hierarchy will be seen as holding the id so with that in mind you could put the id of "char2" which is what I have it set as for my testing/poking around
Here is the code below
CSS to position images
Right image{ position: absolute; top: 5px; left: 800px; width: 600px; }Left Image{ position: absolute; top: 5px; right: 800px; width: 600px; }I hope this helps, if there is anything I forgot to explain or didn't explain properly just let me know and I'll fix that. If there are other issues that need fixing let me know.
Like if you view the profile of a different device the images may not fit on screen and get cut and cause a scroll bar to happen then it might be a good idea to look at making the size a percentage instead of a set number
@/spacemage
Oh, I remember you helping with Catwitch too; thanks for the help again haha!
I think I understand what you've said so far. How would those images behave if I made them a percentage instead of a set number and how would I go about doing that?
[edit]I finally had time to try and put in those codes-- it seems they work as expected! They are a little blurry, do you know if I could fix that with resizing them to be at the sizes they are on the profile or if using a percentage will help with that?[/edit]
I would assume blurriness is caused by the image being resized from it's original too much. so changing the size, the variable value of width should help,
for percentage I didn't verify this one but usually if you set the value with % instead of px it resizes based on relative parent though in this case the parent it inherits width from might be static like using "px" making the notion moot, there are other units of measure that are responsive and there are things that can be done. but going into each would be a overload of info.
In the css what you have is "width: 525px;" what you want to do to make it percentage is "width: 50%;" the 50 is not an equivalent just a random num cause 525% would be too big lol, but it relies on relative parent, if the parent is width 500px, 50% would make the image 250px, this is useful if the size its using changes with the page size....
if the images are doing what I assumed would happen like viewing it on mobile could get the left image cut off at the edge but to solve it properly it be more involved then just resizing the images though if it is a problem I can look into solving it so let me know if you want me to do that though it may take some time
sorry, I don't think my explanation is well formed I rushed a bit cause needed to go do something but wanted to reply
like I did more quick poking and "width: calc(calc(100vw - 900px) / 2);" would keep the images from overflowing but would probably get too small lol, like I said if the issue I have in mind is happening a good solution will be a bit complex to achieve so let me know if you want/need my help on it