This may not be a Wappler specific question, but I’m having a bear of a time getting my Title and Paragraphs closer to the top of this card body, due to the image causing everything to break to the next line.
Can anyone provide some CSS tips on how I can move this information up so it fits alongside the logo instead of breaking beneath it?
In both cases I would remove that yellow div.
A) You could try working with just valign=right and add this to your logo.
or you could try it with float:
B) http://allwebco-templates.com/support/S_textwrap.htm
I would not use or go with negative paddings/margins, as your logo just could hit/mix with text.
Probably top image card is not the best solution here 
It’s just meant to be used as a card with image on top:
Try
<div class="card"> <div class="card-body"> <img class="d-inline-block float-right" alt="Card image cap"> <h4 class="card-title pt-5">Card title</h4> </div> </div>
great! I just put it here for all here:
Sorry, I should have been more clear on that. There is no yellow div, that is a highlight box that I added to indicate the region where I want to move the text content. I’ll have a look at using float.
yes float might help, but could occur unexpected behaviours depending on image size
By default the Bootstrap ‘card’ component has a flex direction of column applied so you would need to change that direction to flex-row and also add flex-start:
<div class="card style9 flex-row flex-start" >
You would also need to insert your image into its own container and move the ‘company_logo’ class from the img tag to the picture tag, plus add order-2 so the image appears AFTER the text:
<picture class="company_logo order-2">
<img src="">
</picture>
Give your company logo a custom width:
.company_logo {
width: 200px;
}
BUT as has been pointed out ‘card’ may not be the most appropriate container.
Your best option would be to use the standard Bootstrap columns structure:
<div class="container">
<div class="row">
<div class="col-md-8 d-flex">
<div class="col-md-7">
<h4>Your Text</h4>
<p>Your text. Your text. Your text</p>
<p>Your text. Your text. Your text</p>
</div>
<div class="col-md-5">
<img class="card-img-top img-thumbnail" id="company_logo" src="">
</div>
</div>
</div>
</div>
If you just apply a float to the image itself I think the text will just flow under the image once/if it exceeds its height ,unless you apply a right- margin to the text or max-length, but Im not sure without testing.
