Mobile Headers For Categories

We’d like the ability to have a different image appear for mobile devices on our categories the way that we can on our pages.

As an example, on this page: https://adamjohnlea.com/product-category/tops/
We love this layout on the desktop, but on mobile, we’d like the right-most image to appear as the header (currently it just uses the default responsive behavior and shows the middle image).

Sometimes, we like to use an entirely different image altogether, like we can with pages. Example: https://adamjohnlea.com/activewear/

Can you help? Thank you 🙂

Hello,

It is not possible to show different images on different devices for categories and other Woocommerce templates.

Best Regards

OK, is it possible to get the header images on pages:
https://adamjohnlea.com/activewear/

to be the same size as the ones on categories:
https://adamjohnlea.com/product-category/maternity-gowns/sleeveless-gowns/

Attachments:

You must be logged in to view attached files.

You need to activate Page title for that page and upload page heading image in Dashboard -> Pages. It will look exactly the same.

One final question. Is it possible to change the background image on a per page basis at a certain breakpoint? For instance, in the Page Settings > Custom CSS settings could I do something like (I know the code is wrong, wondering if this would work with the proper code that hopefully you can provide me!):

@media (min-width: 301px) and (max-width: 600px) {
.page-title page-title-default title-size-default title-design-centered color-scheme-light {
background-color: blue;
background-image: image-url(“http://placekitten.com/g/400/600”);
}
}

Thank you!

You can use the following code:

@media (min-width: 301px) and (max-width: 600px) {
.main-page-wrapper .page-title {
background-image: url(https://adamjohnlea.com/wp-content/uploads/2018/05/maternity_gown.jpg); !important;
background-color: blue;
}
}

Regards

Close this ticket please 🙂 I’ve got it

[Author]

Posts