Help with leaning out my HTML/CSS

Hi guys,

[if the below isn’t explained too well, essentially what I would love to know is how would you style your HTML/CSS in order to get the profile pic/name/verified buyer as seen in the photo. :slight_smile:]

Bare with me on this one. I’ve done this challenge twice now, each time using less CSS/HTML but learning more however the one sticking point is “Colton Smith, verified buyer” my issue is that I’m not sure how to get the desired result without using a load of containers just around “Colton Smith, verified buyer” please see my bad example.

I get the desired result but unsure if I should be using span, the span is there so I can style the sub-header. I’ve tried ‘P’ but this puts it too far under ‘Colton Smith’.

Both ‘Span’ & ‘P’ don’t give the desired spacing (vertically) and line-height doesn’t seem to be much help. How would you do it?

Thanks a bunch!

Please can someone show me the leanest way of doing it? Here’s what mine looks like:

<div class="review review-box-container"> (main flex-box container)
     <div class="profile-container"> (sizing for all 3 boxes)
          <img src=" profile-logo.jpg">
               <div class="name-subtitle-container>
                   <div class="name-subtitle">Colton Smith <span>Verified buyer</span></div>
              </div>
     <div class="profile-inner-text-review">"we needed etc etc etc....</div>
</div>


<style>

.name-subtitle-container {
display: flex;
flex-direction: column;


The code you posted isn’t complete so it’s hard to tell what’s going on. I’m not sure how you’re getting the span to drop down on a new line since span is an inline element, unless you styled as such. I’m not an authority on html yet but I’d probably opt for having the name and verified-buyer elements be block level. I think a p would be better than a span but there might even an even better option than p, I’m not sure.
I’d have to play around with the code to see what works best for creating the best vertical gap, so I can’t help you there much. Setting the right margin on those p elements might be the right way to approach it if line height doesn’t do the trick.

1 Like

Thank you,

I styled it as flex/column so they say on-top one another. I used the span just to separate it from the H2.

I tried with ‘P’ but I wasn’t happy with the gap height and for some reason I was trying to avoid setting the margin (mainly so I wouldn’t have to deal with any overlaps when resizing) but I think you may be right.

*In terms of the div HTML, I just wanted to know if setting the name/verifiedbuyer in a container was the only way as after I’ve added flex to the image I just seem to have a load of containers within containers, which works but I’m trying to work on using the least amount of HTML as possible.

*My main issue which someone helped with yesterday was naming my classes, otherwise it just turns into a huge mess. Which is fine for me working alone but I want to get bad habits out the way.

Thanks once again.

Using a span to style parts of some longer running text is pretty common. But here they are separate elements so I don’t see why it would have to be a span. It can be a span, but there are more semantic elements you can use instead.

I wouldn’t use a span just because it doesn’t have any default margin. You can’t avoid having to adjust the margin on elements anyway. A lot of times it might be easier to just remove all margin on all elements and then set the margins as needed.

If you think of containers as components that group elements together they might not seem as “bad”. Sure you shouldn’t just add divs everywhere but they do serve a purpose as generic containers and there is nothing wrong with using a div, or some other more semantic element when appropriate, to group elements.

Using an extra div for grouping isn’t as “bad” as using a div for text (which you are) when other semantic elements would be more appropriate.

2 Likes

Thank you! Very insightful.

So in my case it’d probably make more sense using a header-tag with a P. Semantically this would make more sense than just a div or span as you say.