Small Coding Help

[mysticrystal]

So on my forum winsera.boards.net/ I was wondering if there was a way I could take off the black strip on the left and bottom of the images 

[Chris]

Add the following CSS to the bottom of your theme's style sheet:

div.miniprofileframe {
   border: 0 none;
}



Before:



After:

[mysticrystal]

Thank you!

[mysticrystal]

sorry for the lack of coding knowledge but do you happen to know how I can make the black outline around the top and left side go around the right? That's the only side that its not cut off by a border.

Chris

[mysticrystal]

bump

[mysticrystal]

bump

[₪» ⅀ ƪ Ƒ «₪]

I played with this in inspect element for ages. Margins, paddings, borders, forced sizes... the only thing I found that worked also ruined the height/width of the image. >.< Brian, Todge, Chris, Peter, Kami? Any tips for this person, perhaps?

It can be hard to see in dark pictures and since the original issue was removing a border, it can be confusing what the OP means for the second issue. So just in case there is confusion on what they need, this image is a good example of the "border" they mean - which I imagine is the black container of the mini-profile simply showing through some space on the sides of the image, rather than an actual coded border.

[Peter]

The issue is that the child element with the class miniprofilestructure is wider than its parent with the class mini-profile. The parent has overflow: hidden, so of course it will cut off whatever overflows.

Either remove the overflow from the parent rule (mini-profile), or change the width of the child container (miniprofilestructure).

[₪» ⅀ ƪ Ƒ «₪]

Ahhhh, yes, I see now! Thank you, Peter!

mysticrystal, to do what Peter said when I just played with inspect element based on his advice, I found this:
<div class="mini-profile" style="width:150px;
And I changed that to this:
<div class="mini-profile" style="width:170px;
(there is other code in that div, but it doesn't need changing)

Then I found this:
<div class="miniprofilestructure" style="height:300px;
and I added width to it, like this:
<div class="miniprofilestructure" style="height:300px;width:170px;"


By changing the widths to match, it fixed it from what I can tell. I chose 170px because it seems to be the size that balances the mini-profile in the center of the container - you can change the numbers if you want, but I found it made the spacing between the left and right side disproportional.

Hope this works for ya!

EDIT: This did, however, change the avatars. It made them start to repeat on the right side because the container is now larger than the avatars that were inserted. We could probably fix this by adding a limit to the size of the avatar so it doesn't repeat, or change the width from 170px to the previous 150px but use some sort of margin or centering to make the right/left side balanced again.. or have people upload larger avatars... I'm not sure what would fix it best?

[mysticrystal]

Thank you guys so much! I was able to fix it with the information you gave me and keep it at 150 width.

[₪» ⅀ ƪ Ƒ «₪]

Glad to help :) You have a beautiful site!

[mysticrystal]

Thank you! If you ever feel like joining, you're always welcome to c: