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:
I want to do something like this, but text background should be within left, right and botom border:
Like here (but in this example i lost space arround image):
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
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.
font-family: Andale Mono,AndaleMono,monospace;
border: 3px solid #E74C3C;
border: 3px solid white;
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.
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!
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.
@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 )
Beauty! Great way to learn