Flex-box twitter layout help

Hey all,

Trying to create a basic twitter-esque box as part of a web challenge online.

I’d like to know if my flex-box layout is heading in the right direction. I’ve placed individual containers for likes/likes numbers etc as seen below:

*Not started arranging yet just trying to get everything in the right container.

<div id="likebox">
      <div id="likesnum">803k</div>
      <div id="likes">Likes</div>
  </div>
  
    <div id="picsbox">
      <div id="picsnum"> 1.4K</div> 
      <div id="pics">Photos</div>
  </div>

My attempt so far (click me)

The goal.

Hi @oocopperpot.

That is a nice practice project there. You seem to be on the right track. In codepen, you don’t need the head tag inside your HTML. You can transfer everything inside the head tag to settings and codepen will add the head tag for you. Simply click “Setting”, “HTML” and your head tag goes inside Stuff for <head> text area. Enjoy.

1 Like

Super, thank you. I’m hoping to do a couple a week to keep my mind fresh, the first was already has me stumped. =}

One thing I’m very stuck on right now is the SVG images, for the challenge we download a folder with several SVG images. As I can’t upload/link to them as I would an img I’m unsure how I get my SVG on my desktop into Codepen.

I also have sublime text as I can usually link to desktop images but I’m still struggling.
Found this technique, seems long winded but it works.

HTML

<div class="sub">   
   <div class="followers m">
      <div id="Followersnum">80k</div>
     <div id="followers"> Followers</div>
   </div>
  
   <div id="likebox" class="m">
      <div id="likesnum">803k</div>
      <div id="likes">Likes</div>
   </div>
  
    <div id="picsbox" class="m">
      <div id="picsnum"> 1.4K</div> 
      <div id="pics">Photos</div>
    </div>
  </div>

CSS

.sub{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.m{
  margin:auto;
margin-left:27px;
}

image

1 Like

Well I have never worked with SVGs before but I have seen people copy and paste the actual SVG vectors inside codepen.

1 Like

This is working right now. They’re a right pain! :slight_smile:

Just thought I’d post the finish product : Here, very pleased. :smiley: I ended up making the images into png, much easier.

Great way to keep the mind fresh! Using Sublime text made me realise how much I love Codepen!