Character Card DX [FTU]'s Comments

Hello Coturnix! Thank you so much for making and sharing this code, it's perfectly simple for what I want! I appreciate your notes in the code because I know almost nothing about this stuff and so far I have found it to be very easy to edit!

I have one question that's got me stumped though. It's about the "main image," the long vertical one to the left of the text - I can't get the image to align in a way that looks good through the window, but it also seems to make my image blurry. I tried to crop the image I wanted to the size of the window so adjusting its placement wasn't a factor, and that worked kind of but it made my image even more blurry. I've tried different sizes of the images but even a higher resolution image being downscaled doesn't seem to help like I expected it would. I'm guessing this is a TH issue and not a code issue, but do you know of any solution for this? If there isn't one, is it possible to remove the main image from the code entirely and just have the box and background image? I tried to do that myself but the whole code kept breaking. I just don't know enough about what the code actually is to know what parts of that section I can't touch lol.

Here is what I'm working with so far: https://toyhou.se/4795638.hannah (Maybe worth noting - the main image is not blurry on mobile, only on desktop)

Hopefully that makes sense - thank you again for the wonderful code and for your time if you happen to see this.

Coturnix

Hi Coel! There's a few ways of going about this, actually!

First of all, the image being displayed strangely is most likely a monitor issue- if you have a really large monitor, bootstrap automatically tries to adjust itself for larger screens, but sometimes it'll look funky, especially with an image being cover by default (this means it tries to fill up the entire space that's given). Anyways, there's a few methods to try and solve this as mentioned:

The easiest and most simple way of going about this would be changing the cover in 'background-size: cover' to another property: I tried this out myself and I suggest turning it into 375px, and then adding background-repeat: no-repeat; directly after where "background size is" (this is so it doesn't start tiling)! Together, that should look like background-size: 370px; background-repeat: no-repeat; when put together. If you don't like that size, I recommend fiddling around with it more on a live code editor!
Another would be doing the same thing as above, but also changing the image to a larger resolution. I'm not entirely sure this is the issue, but in case if the image itself is the issue/its resolution is the issue, then this would solve it- although I'm pretty sure that it is the cover attribute + monitor size that's causing the issue!
The more complex method would be removing the image section entirely. I don't recommend trying this since you don't have as much experience with code, but regardless if you want to attempt to do this, first remove the main image and artist credit sections- then take the name section as well as almost all the </divs> under it except one (this makes sure the row is still in effect), and move it to right under the div that currently says <div class="col-md-9">. You'll be changing that 9 to 12, and if it continues to look strange, add more </divs> to make sure that the nametag element is closed out properly. If that's too much and you still want the image gone, feel free to DM me and I can just do it for you!

For repositioning the image, I suggest changing the background position element (it'll look like background-position: center;) to [number]% number% (the first is the horizontal position, the second is the vertical)! I also tried this out and can recommend turning it into background-position: 20% 50%; (which looks good on my monitor, but it might vary)! Again, fiddle around with it in a live code editor if you don't like how that looks!

If this ends up being too difficult, feel free to DM me your version of the code itself on here! Apologies if I reply slowly, I work a full time job (although I should be free this weekend)!

Coelacanis

Yes this worked!!! It must have been my monitor yeah, but this fixed the blurriness. Being able to have finer control over the positioning of the image is great too, I was wondering if it was possible. It's a little funky and sometimes the image doesn't want to move, but I found that adding space to the canvas on whatever dimension won't move seems to help in a lot of cases. Thank you SO much, your instructions were very clear and helpful. I appreciate it a ton!!!

Coturnix

Of course!! I'm really glad I could help, I really enjoy what you did with my code!! Thanks for using it!