Product Page Banners

Hi there,

could try making the banners a flex box to align the content and keep it from wrapping under the image like so:

.next-day-banner, .pi-edd {
    display: flex;
    align-items: center;
}
.next-day-banner, .pi-edd {
    display: flex;
    align-items: center;
}

Thanks

The next day option looks fine but the delivery date one look weird on mobile for some reason

Are you able to edit the HTML for that banner, as the issue is related to the markup. Can you share what you have ?

In the plugin it's like this {icon}Standard Delivery: <font color="#ed553b"><b>{min_date} - {max_date}</b></font>

Would it better if the format was:

Standard Delivery:
The Date Below

If so, then you could so something like this:

{icon}<div><div class="delivery-title">Standard Delivery:</div><div class="delivery-date">{min_date} - {max_date}</div></div>

The CSS i provided for the flex box should still apply. And then a little CSS to add the color to the date:

.delivery-date {
    color: #ed553b;
}

Hmm it would on mobile but then looks odd on desktop.

Make the changes to the HTML.
I can then relook at the CSS; to keep the text inline whilst there is room for it, and then to stack the text when there isn't

Added thanks

I am not seeing the change on the URL provided, do you have any caches that need clearing?

One other thing i noticed the Image in the banners has no width/height attributes - which may give you some CLS issues, might be worth addressing that with the plugin author.

Ok thanks I will look into that, I have cleared cache.

So remove any CSS i provided so far and add this:

.next-day-banner, .pi-edd, .pi-edd > div {
    display: flex;
    align-items: center;
}
.next-day-banner, .pi-edd {
    display: flex;
    align-items: center;
}
.next-day-banner img, .pi-edd img {
    margin-right: 10px;
}

.pi-edd > div {
    flex-wrap: wrap;
}

.delivery-date {
    color: #ed553b;
}

And in your HTML add a space after the Standard Delivery:

Thanks David, That looks much better. Added the space but doesn't show it, but looks much better.

Add this CSS to provide that space:

.delivery-title {
    margin-right: 15px;
}