Hello,
I setup my homepage so that the first banner image will show on desktop view, and the second banner image will show on mobile view. Then, I had the issue that the slideshow was not showing on mobile view. I adjusted the code to fix this problem. This slideshow is now displaying correctly, but the banner image on mobile view has disappeared.
I am using DAWN theme.
Any suggestions would be appreciated.
@Teedz Can you share preview link of the store?
To troubleshoot the issue with the banner image disappearing on mobile view after adjusting the code for the slideshow in the DAWN theme, you can follow these steps:
Double-check the code changes: Review the code changes you made to ensure that there are no errors or conflicts with the banner image code. Make sure you haven’t accidentally removed or modified any code related to the banner image.
Check the CSS: Inspect the elements using your browser’s developer tools and check the CSS styles applied to the banner image element on mobile view. Look for any conflicting styles or properties that might be causing the image to be hidden or not displayed correctly. Adjust the CSS styles accordingly to ensure the banner image is visible on mobile devices.
Ensure responsive settings: Verify that the responsive settings for the banner image are properly configured in the theme settings. Some themes have options to set different images or settings for mobile and desktop views. Make sure the correct image is assigned to the mobile view and that the settings are saved properly.
Could you share your store URL to check?
If you’ve made changes to the code of your DAWN theme and the banner image on mobile view has disappeared as a result, there may be a conflict or error in the code that is causing this issue. Here are a few suggestions to troubleshoot and resolve the problem:
Check your code modifications: Review the code changes you made to ensure there are no syntax errors, missing elements, or conflicting code. Even a small mistake can disrupt the display of elements on your website. Double-check the specific code related to the banner image and ensure it is correctly implemented.
Restore default code: If you have a backup of your theme or the original code, try reverting the changes you made to see if the banner image reappears on mobile view. This can help identify if the issue is caused by the modifications you made.
Responsive design considerations: Ensure that your modifications take into account responsive design principles. Mobile devices often have different screen sizes and resolutions, so it’s important to use responsive techniques, such as media queries, to adapt the layout and display of elements for optimal viewing on mobile devices.
Theme settings: Check the theme settings in the Shopify admin to ensure that the banner image for mobile view is still configured correctly. It’s possible that the settings were inadvertently changed during your code modifications.
Reach out to theme support: If you’re unable to identify and resolve the issue on your own, it’s recommended to contact the theme support team or consult the theme’s documentation for guidance. They can provide specific instructions or insights into the code modifications needed to achieve the desired display of the banner image on mobile view.
Remember to backup your theme files and make note of any code changes before making further modifications. This will allow you to easily revert to a previous version if needed.
@Teedz add below css into base.css file
@media (max-width:425px)
{
.banner {
position: unset !important;
}
}
That fixed the problem! Your help is greatly appreciated.
