Skip to main content
Main Content

CSS Help: Image Sizing/Padding (?) Issue

CSS Help: Image Sizing/Padding (?) Issue
Posted 2021-02-25 12:11:12 (edited)

Hi all - looking to see if anyone could help me:)

I've been learning CSS and tinkering with my profile. I use d:n to hide a lot of stuff that I want to see, for that ~aesthetic~ look, and usually - as it should - the items adjust around it as it removes it from the page. I want my featured wolf's avatar to be the same size as my Lead's  -  I have that down (removed the text above and resized the avatar to match) but I can't seem to get them aligned to be on the same level. It tried adjusting from the right etc offsetting with -px, but it isn't dynamic. It just never seems to properly align with each other.

Is there another/best way to do this? Thanks so much for any and all help:) It looks fine on mobile, but not on desktop. Would love to actually bring down the lead's avatar to be aligned with the current Featured's position.

On my profile; snippet here in case that changes:



pample🌙
#10696

Posted 2021-02-25 12:59:31

To get rid of the empty space altogether:

.featured-wolf{font-size:0;}

There’s a line break hard-coded in right before that image, not padding or margins; this is the only workaround I’ve found. It’ll mess up the padding on mobile (but I’d guess you know how to fix that), and unfortunately I’m not 100% sure you can override the wolf name/link font size to make it visible.

Alternatively, to move the lead image down:

.col-sm-7 img{margin-top:1rem;}
.main .mb-3{background:0; box-shadow:none !important; border:0 !important;}

I like using em units over pixel units because, for the most part, they scale consistently on mobile & make for more accessible font sizes. Second line is for getting rid of the ugly green box, which lurks right behind the image for some reason; you might not need the !important overrides if you reorder the code, but I was just doing this with inspect element.

Hope this helps! :>


🐺
#9672

Posted 2021-02-25 13:07:32

Ahh, this makes so much sense. Thank you so much - you knew exactly what I was going for ahah:) Gonna play around with this in a bit, I appreciate it so much! And the em units bit is insanely helpful as well - that changes everything for me ahah. Yes, that ugly green box...when I originally was doing a transparent inner border, it was killer. Maybe it will work now with this :,) Thank you so much! If I can ever be helpful in return, please let me know!


pample🌙
#10696

Posted 2021-02-25 13:14:22

Awesome, glad to hear it helped! And especially cool to know you’ll be looking into em units; they’re super useful and not known enough! And y’know, I honestly did not realize the green box was still there until messing with it just now, but Wolvden code is just full of surprises :D

No need to do anything in return, and good luck with your layout!


🐺
#9672

Search Topic