Docs

[logoglo]

Hi there, wondering if you can help.

So, I have this page:

http://486.408.myftpupload.com/work-at-upsiid/

I have a content band, with 2 columns above the main group, but it has a huge gap to the left of the image, how do I reduce that, so it looks like the group below.

Attached is an image to show how I have set it up.

If you have an alternative method, let me know, the problem with the group below, is that as the screen decreases in width, the format gets screwed up, I dont want the words going under the image, I want it to stay to the left.

Thanks.

[Christopher]

Hi there,

Please add a custom class like my-class to the column wraps the image.
Please add the following code in Customize -> Custom -> CSS :

@media (min-width:767px){
.my-class{
    width: 10%;
}
}

Hope that helps.

[logoglo]

That worked ok, reduced the space, but is there any the image and text can be aligned center? at the moment this pushes the text up and doesnt look good.

Thanks.

[Christopher]

Hi there,

Please disable ‘marginless columns’ option.

Add this as well :

.my-class img{
margin:0;
}

If you want to keep the text in one line, please change column layout to 1/6+5/6 and remove line-height inline CSS from text element.

Hope that helps.

[logoglo]

It worked to a point, but its not a very elegant solution, I mean, when you view it at different widths, the image icon shrinks sometimes, or the gap increases, the formatting goes off, could you have a look, and maybe suggest something else to try? Sorry for being a pain.

[logoglo]

I think I have it working a little better using tables, again, not the best, but it look a bit better:

<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tbody>
<tr>
<td width=”6%” align=”left” valign=”middle”><span style=”text-align: left; font-size: 25px;”></span></td>
<td style=”text-align: left;” align=”left” valign=”middle” width=”94%”><span style=”text-align: left; font-size: 25px;”>We are paid based on success.</span></td>
</tr>
</tbody>
</table>

If there is a way to reduce that gap, It would be appreciated. Thanks for all your help.

[Christopher]

Hi there,

To remove the padding, please add this code :

.page-id-348 td {
    padding: 0 !important;
}

Hope it helps.

[logoglo]

Perfect, thanks for your help.

[Friech]

Glad we could help,

Cheers!

[Author]

Posts