In my megamenu, how do i change this image to an image that I chose on mobile?

In my megamenu, how do i change this image to an image that I chose on mobile?

withaudette
Excursionist
61 0 23

withaudette_0-1743858319304.png

In my megamenu, how do i change this image to an image that I chose? I've changed it in code and it works on desktop but not on mobile.

 

Also the product name is supposed to be in all uppercase, I'm not sure how to change that for the megamenu.

 

www.audette.store (code:test)

 

Replies 2 (2)

pajayxceptional
Shopify Partner
4 1 0

To fix your issues:

1. Change Image on Mobile:
Use CSS media queries to load different images for mobile and desktop.

 css
/* Desktop */
.mega-menu img {
content: url('path/to/desktop-image.jpg');
}

/* Mobile */
@media (max-width: 768px) {
.mega-menu img {
content: url('path/to/mobile-image.jpg');
}
}
```

2. Make Product Name Uppercase:
 Use this CSS to force the product name to be uppercase:

css
.mega-menu .product-name {
text-transform: uppercase;
}

Check if these CSS changes work and clear your cache if needed!

Good luck!
withaudette
Excursionist
61 0 23

How do I find the code for mobile here?