[mateoserendipiaParticipant]

Hi people,

In have used various X-shortcodes (which I starting to really like) to place images in portfolio items. This works fine, but they still show slight differences in padding.

– Featured images: no padding. Image is aligned vertically with typography
– Image in lightbox thumbnail (blue image): small padding.
– Images inserted with [image] (red images): slightly more padding.

A link to the page is in the private reply. I have made the background grey for now to make the padding visible. I have tried a lot with code found in the forum. but can’t get it right.

Is there a way to remove the padding from both the Lightbox thumbnails and images inserted with the [image] shortcode.

Thanks!

[mateoserendipiaParticipant]

This reply has been marked as private.

[mateoserendipiaParticipant]

by the way, I used the code from this earlier post

https://community.theme.co/forums/topic/remove-border-and-padding-in-x_lightbox/#post-379604

but it has no effect on the portfolio page.

Thanks!

[ZeshanMember]

Hi there,

Thanks for writing in!

Please add following CSS under Custom > CSS in the Customizer:

a.x-img {
    padding: 0;
}

Hope this helps. 🙂

Thank you.

[mateoserendipiaParticipant]

Hi,

Perfect, it worked, the padding is gone, thanks!

There is still one very small (literally) issue left. In the page there is a ‘full width’ image (the blue one), and images (red) in two-up block grids. The righthand side of the second image in each two-up block grid does not line up exactly with the full-width or featured images above . I think this has something to do with floating within the block grids (i think both block grid items float to the left and leave a few pixels of space to the right), but I’m not sure. It’s not a huge difference of course, but as a graphic designer I have an audience of very nitty-gritty people with eagle’s eyes ;-).

Thanks,
Mateo

[mateoserendipiaParticipant]

hmm, I looked at it again, and the issue is on the side of the two-up blockgrids that are towards the centre of the page in full view. So in project 4 it’s the 4b that doesn’t line up, and on the right side of the page it’s the other way around: there 3a doesn’t line up.

In mobile view (small) the issue is there as well, but there only red images do not line up at their right side. So it seems that (playing Sherlock Holmes):

– the red images (or the gap between them) are slightly too small
– and on large screens they float to the left (on the left side of the page) and to the right (of the right side of the page)
– and on mobile screens in Small view they float all to the left.
– and thus in both views (big and small) they leave a small gap at the side opposite of where they float to.

[ZeshanMember]

Hi there,

In that case, you can try adding following CSS code under Custom > CSS in the Customizer:

.x-block-grid {
    margin-right: -5.3%;
}

Thanks!

[mateoserendipiaParticipant]

Thanks, -5.5% did it 😉

[Rue NelModerator]

You’re welcome! It’s good to know it works for you.

[Author]

Posts