Widget Indent

Hello Again!

I just noticed the note “I would like to align this to the left” on your test page. The CSS code I gave above only takes care of the outer indenting, and not the inner one.

To be clear, after taking care of the outer left padding above, the card layout should look OK in the small sidebar column where (I believe) these widgets were intended to be used.

But as you’re using the widgets in the larger main content area, these paddings become larger because they are defined as percentages of the parent container, and not as absolute amounts. Thus additional work has to be done to reduce these paddings.

And, once again, to address this issue, we have to undo some CSS styles defined in your theme for the card.

And this is perhaps the time to pause for a moment and consider whether it’ll be easier and even better to get in touch with the developer of the custom theme you’re using to address this, to avoid any unintended effects should you go ahead with the suggested changes below.

Still, want to fix this yourself? Let’s give this a shot then:

First, the card has padding: 10% 14% 5% 14%, which squishes everything away from the left and right.

Now since this is defined on the entire card, you’d expect the image to also be indented as well, just like the text. Well, except the image has been given a width of 139% to compensate for the padding, as well as a bunch of negative margins… as seen below:

So to fix this, we’ll first have to reduce the left and right paddings on the entire card. In the CSS code below, I’ve changed the left and right paddings from 14% to just 2%, leaving the top and bottom paddings unchanged.

.cards-widget .default-card {
padding: 10% 2% 5% 2%; 
}

That takes care of the text problem. But as you can see below, the images are now extending beyond the card container. That’s because of the width of 139% and negative margins I mention earlier.

After playing around with the width and margin numbers, here’s what seems to work:

.cards-widget .default-card .card-image {
width: 104%;
margin: -13.5% -2.5% 0 -2%;
}

PLEASE NOTE:

Kindly note that I could only test this on the specific page you gave and without reloading the page… as I don’t have access to your site to make this code persist when the page is reloaded or when I navigate to another page. It’s possible (though not likely) that the above CSS changes could break something elsewhere in the site.

Unfortunately, I have no way of knowing or testing this.

This is why I mentioned from the onset that you should probably get in touch with the developer of this theme (if you can) to get their input.

Good luck!