Image & text inside flexbox - Personal portofolio web page

[s.zilevicius]

Hello, im looking for a proper way how to fulfill my idea. But not sure whats the right way.
I have an image and text inside a flexbox, and its seems than now im limited to my actions: when i adjust text, image gets affected as well. Here a few examples:

1. I want to do something like this, but text background should be within left, right and botom border:
   

   

2. Like here (but in this example i lost space arround image):
   

   

3. And here i have noticed that my picture is tied to the text. Because if my text gets wider, my picture stretches as well:
   

   

So i guess my problem is in the order of the code? Maybe im using this flex command to much? Should i label the image insted of adding text in p?

Link to code: https://codepen.io/SimonasZ/pen/XWmXwEM

[jjberg83]

Hi @s.zilevicius,

I love your humorous intro Don´t we all feel like that when we´re stuck?

Try adding this CSS to your code, and see if it solves your problem.

.project-tile {
  font-family: Andale Mono,AndaleMono,monospace; 
  color: #34495E;
  font-size: 20px;
  background: #D6EAF8;
  margin-top: 30px;
  padding: 5px;
  text-align: center;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.image {
  background: #D6EAF8;
  padding: 10px;
  border: 3px solid #E74C3C;
  border-radius: 50%;
  border-width: 5px;
  margin: 20px;
  max-width: 120px;
  align-self: center;
}
.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-self: center;
  margin: 20px;
  border: 3px solid white;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}

Turns out you can style every corner of the div (I wasn´t aware of that). In addition I set the max-width of the image class to be 120px. I hope this helps.

[s.zilevicius]

Hi @jjberg83 ,

thanx for your help. But it might be i was not very clear on my idea.

I want that background of the text would “touch” the border line on the bottom, left and right.
Hope this makes sense!

[jjberg83]

Did you make sure to copy all the code I inserted (3 classes: .project-tile, .image and .box)? This is the result I achieved. Am I missing something?

If you want the light blue boxes at the bottom to be bigger, just increase the padding on the .project-tile class.

[s.zilevicius]

@jjberg83 im sorry, your right, everything works perfectly!! Somehow i did not got the result at first when i copied your code.

Now just to analyze and to understand how your code works (printed both as somehow its easier to understand )

[jjberg83]

Beauty! Great way to learn