Modifying expire notice appearance

In most cases I’m just using the existing WooCommerce notices, it’s only the ‘Please checkout within…’ notice that changing that css will affect.

Are you trying to only style these notices or everything from WooCommerce?

I realized that the reason my changes weren’t being reflected were Chrome cache related. Sorry about that!

All of the changes I wanted could be made via your wc-csr-info class.

I’ve noticed something else which is odd. The notification interferes with the filtering and result count in certain resolutions:
https://tinypic.com/r/jafn0g/9

I’ve added a display: block; rule, but the notice remains in this awkward position. Is there anything I can do to ensure that the notice will be displayed on its own line?

That is odd, what resolution does that happen at and is it only with changes you made or with the default markup?

I believe it happens at any resolution, as the notice is appearing on the same line as the filtering options. It only becomes noticeable as the viewport becomes smaller (roughly 1720×1440).

I tried making all of these elements block, however this doesn’t seem to change anything (whereas a change of color for example is reflected instantly).

I can’t seem to reproduce this at all.

* What are you using to add the filtering options?
* Can you share you’re exact changes?

Hey James!

I managed to figure out the issue! I believe that my theme’s developer is using flexboxes as a way to make the page responsive.

wc-csr-info is being placed inside of woo-top-page, which is a flexbox. All the filtering items and the notice is its own flexitem and all you have to do is make the class behave like a normal block element with this css:
.wc-csr-info {
flex: 0 0 100%;
}

Credit to this post over on SO for the css.

Thanks for your help in any case!

• This reply was modified 5 years, 11 months ago by ljackl.
• This reply was modified 5 years, 11 months ago by ljackl. Reason: grammar