CSS Help

Hi Mike,

Thanks for reaching out. The following CSS should achieve this:

#auction-nudge-items .an-item .an-title a {
    overflow-wrap: break-word;
}
#auction-nudge-items .an-item .an-view,
#auction-nudge-items .an-item .an-amount {
    width: 96%;
    text-align: center;
}

I hope this helps.

Joe

Hey Joe,

Thanks for the really quick response. I put those changes in place and ALL but one worked.

#auction-nudge-items .an-item .an-title a {
overflow-wrap: break-word;
}
Tried this a few times with the odd variation but no joy – still getting the titles overflowing into the next ad.

Any ideas?

Thanks again
Mike

Also tried

word-wrap: break-word;
word-break: break-word;

no joy ??

Interestingly ‘overflow-wrap: break-word;’ appears to work in Chrome but not IE or Firefox. In chrome it does have the unfortunate side effect of throwing the ads out of alignment – probably due to the height of the container for the title.

Back to the drawing board i guess!

Hi Mike,

This is an odd one, but I eventually pinpointed the issue. I recommend removing overflow-wrap: break-word and instead adding the following:

#auction-nudge-items .an-item .an-title a {
    white-space: normal;
}

Hopefully this should do the trick.

Joe

Hi Joe,

Looks like you cracked it. Last question i prmoise. Is there any way of increasing the height of the container for the title so that if it needs to wrap it wont throw the alignment out. You’ll see what i mean if you look at the page https://www.sdmotorcycles.co.uk/stock/.

Mind you saying that I’m guessing that’s only going to increase the whitespace between the title and the image that is already quite large.

Thanks in advance
Mike

Posted a review for you – well earned ??

Hi Mike,

Setting the title height to a fixed amount should resolve this:

#auction-nudge-items div.an-item div.an-title {
    height: 40px;
}

As for the gaps between the images and text, this is to accommodate product images in portrait orientation. If all of your images are going to be landscape, like they are currently then you could decrease this gap like so:

#auction-nudge-items .an-item .an-image,
#auction-nudge-items .an-item .image-container a,
#auction-nudge-items .an-item .image-container {
    height: 220px !important
}

You may need to experiment with different values.

Good luck and thanks for the review!

Joe

Joe, what can I say m8 – you are a CSS god. Absolutely perfect – just what i needed!!

Thank you so much.

Mike

PS You are very welcome for the review, just hope you pick up a bit of affiliate commission from our bikes when they sell – we shift alot.

Happy to help. I hope Auction Nudge helps you get some extra traffic to your eBay listings.

Marking this topic as resolved.

Joe