How to move text inside a widget box ?

[peter66]

i have a wordpress site with at widget box / plugin and in that box there is this code that i copied from the internet:
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
[mycred_leaderboard wrap=""]
<tr>
<td>%position%</td>
<td>%display_name%</td>
<td>%cred_f%</td>
</tr>
[/mycred_leaderboard]
</tbody>
</table>
and all is ok BUT i need a change in the code so the text inside the widget box will fit nicely inside the box and not with the text on the right side + remove some of the spacing from the top of the widget box to the text

I dont know if its possible at all, but any tips would help because i dont know any coding myself

Edited July 4, 2019 by peter66

[JMRKER]

What does the CSS you are using look like?

BTW, welcome to the forums.

 

[peter66]

I have this Css code for the title in the widget

"

.widget-title {

    margin-bottom: 5px;
    
    
    font-size: px;
    line-height: 1.5;
    font-weight: 400;
    text-transform: none;
}

But perhaps the code in my first post is HTML and not css then im sry to have posted in the wrong forum.

But thank you for your welcome to this forum : )

[dsonesuk]

It probably has nothing to with the title selector, but elements around it. You can identify what is producing the spacing by right clicking mouse on page and clicking 'inspect' or press f12 selectiing elements tab and clicking 'inspect' icon usually  at top left corner.

Note:

font-size: should have value and unit.

Edited July 6, 2019 by dsonesuk

[peter66]

Thanks for all your help and sry that i dont understand what to do , where to do it, im still learning

I tried to right click on my test site soccerplay.bet4fun dk in the white area and treid to look with inspect but not really sure what to look for to remove the white empty fields + move the text to the left in the widget box to make it look finer.

the only thing i saw was this in the white area, but im sure it just me not knowing what to look for yet

p {

1. margin-bottom: 1.5em;

}

 

[dsonesuk]

Using inspect when you hover over elements it shows the styling applied to these elements by colour coding of padding and margins applied and also in CSS panel what selector  and line number, of the CSS file this selector is within. You can then determine  which element gives you the wide spacing. You can even click the margin/padding values press up and down arrows on keyboard and watch the page adjust instantly until you get the spacing you require.  Then its just the matter of changing the stying in CSS file to the same values. Maybe better to keep original values till you are happy by commenting them out using /*   */ as in

/* margin-bottom: 1.5em;  old*/

margin-bottom: 1em;

 

Another thing to look for is empty paragraphs 'p' tags or multiple 'br' tags which also cause spacing, it would just be a matter of removing 'p', 'br' tags or reducing the number of 'br' tags especially, but you shouldn't use these for spacing as that is what margins and padding are used for.

Edited July 7, 2019 by dsonesuk

[peter66]

12 hours ago, dsonesuk said:

Using inspect when you hover over elements it shows the styling applied to these elements by colour coding of padding and margins applied and also in CSS panel what selector  and line number, of the CSS file this selector is within. You can then determine  which element gives you the wide spacing. You can even click the margin/padding values press up and down arrows on keyboard and watch the page adjust instantly until you get the spacing you require.  Then its just the matter of changing the stying in CSS file to the same values. Maybe better to keep original values till you are happy by commenting them out using /*   */ as in

/* margin-bottom: 1.5em;  old*/

margin-bottom: 1em;

 

Another thing to look for is empty paragraphs 'p' tags or multiple 'br' tags which also cause spacing, it would just be a matter of removing 'p', 'br' tags or reducing the number of 'br' tags especially, but you shouldn't use these for spacing as that is what margins and padding are used for.

Thanks for all the help, i will try to follow your tips, guides... thank you 🙂