Hi there!
I'm trying to get the hero text image on this website (https://drmichelleweiner.squarespace.com/ pw: MW2023!) to be different on mobile. I've figured most of it out through the assistance of ChatGPT and this thread, but now, I'm encountering difficulties with both the Hero image as well as the Hero Image text. I need to change the hero image to a vertical image and I need the hero image text to disappear on mobile.
Basically, I need a different hero image and mobile text image for both mobile and desk top. I tried the coding outlined here in this thread, but I encountered the mobile image being too small or not showing up entirely because the desktop image is much longer. So, I tried adding a different image block to show once in mobile. However, here- the desktop image will not disappear, it still shows on mobile. Screenshot also included in this post.
The code I used for the current formatting is below (please help me include coding to change the hero image on mobile- my client's face is cut off:
/* Dr MW Hero Text - Desktop */
div#block-yui_3_17_2_1_1698275164210_47548 img.desktop-image {
content: url(https://images.squarespace-cdn.com/content/64fb8378a809ea11c70c62dc/c6c012ae-1e86-4c7b-b008-9b4bd68d218e/Dr+Michelle+Weiner+Pain+Expert.png?content-type=image%2Fpng);
}
/* Dr MW Hero Text - Mobile */
@media screen and (max-width: 767px) {
div#block-yui_3_17_2_1_1698275164210_47548 img.desktop-image {
display: none !important;
}
div#block-yui_3_17_2_1_1698703169827_36238 {
content: url(https://images.squarespace-cdn.com/content/64fb8378a809ea11c70c62dc/5e93fa51-be35-402d-8461-4ccc29adfd1f/Dr+MW+Pain+Expert+Text+Hero+Mobile%402x.png?content-type=image%2Fpng);
object-fit: fill !important;
height: auto !important;
}
}
