Reduce Space on Card Layout

Help
#1

Hi all,

I’ve been using Kitsun for a while now but after reviewing other tools out there I’ve finally decided to give this a good go. It’s the best in terms of flexibility and is the only thing I’ve found that supports my IRL lesson vocab in addition to WK.

I have a rather basic question in regards to HTML, please forgive me I’m rather new to all of this.

I’m creating a custom card layout which includes images. I’ve got the code in okay, but I want the text to be slightly closer to the picture, other wise the page often ends up too big.

Basically from this:

From%20this
From%20this537×730 117 KB

to this:

to%20this
to%20this537×611 116 KB

Here is the code from my card:

  <div class="full_wrap">
     <div class="main_wrap">
   <div class="nomarg"><img src="{{Image}}" style="width:50;max-width:400px;" /></div> 
    <p class="nomarg">{{first:Meanings}}</p>
    <p class="subtitle">{{rest:Meanings}}</p>
  </div>
  <div class="input_wrapper"> 
    <div class="prompt_color english">
    </div>
  {{type-ja:Readings[Reading]}}
  </div>
<div class="tags">
    {{#Part of Speech}}{{tags:Part of Speech}}{{/Part of Speech}}
</div>
</div>

Thanks for any help you might be able to provide!

1 Like
#2

Hi! Glad to see you join us!

You will probably have to remove either the top-padding or the top-margin from the <p class="nomarg"> element.

The easiest way for you to do this without sifting through the css is by adding an inline style, so something like:

<p> class='nomarg' style='padding-top:0px; margin-top:0px'>

Otherwise you could add those styles in the styling section on the “.nomarg” class (I’m guessing you added those yourself?).

It’s a little bit difficult to say what exactly is giving the whitespace without also seeing the associated styling, so I’m hoping this might help a bit ^^

1 Like
#3

Thanks for the prompt response, that seems to have worked! Looking forward to being a more active member of the community. :slight_smile:

Here is the final code for anyone that is wondering:

  <div class="full_wrap">
     <div class="main_wrap">
   <div><img src="{{Image}}" style="width:50;max-width:400px;padding-top:30px;margin-top:30px;" /></div> 
    <p class="nomarg" style="padding-top:0px;margin-top:0px;">{{first:Meanings}}</p>
    <p class="subtitle">{{rest:Meanings}}</p>
  </div>
  <div class="input_wrapper"> 
    <div class="prompt_color english">
    </div>
  {{type-ja:Readings[Reading]}}
  </div>
<div class="tags">
    {{#Part of Speech}}{{tags:Part of Speech}}{{/Part of Speech}}
</div>
</div>
1 Like