Hi, I hope I can get some help. I’m not sure what’s going on here but somehow I cannot stack the text above the image banner for mobile view. I have it checked, but it’s not doing anything. It only goes over the image when the container is unchecked. I would prefer the text with the container checked over the image. I currently have this block invisible for now since I cannot get it to work.
Images for reference:
It sounds like you’re having trouble with the layout of your website for mobile devices. Without more information or seeing the code, it’s hard to say exactly what’s causing the issue, but I can give you some general advice that might help.
Check your CSS media queries: It’s possible that your layout is not properly adjusting for smaller screen sizes. Make sure that you have media queries set up in your CSS to adjust the layout of your site for different screen sizes. You can use the CSS @media rule to apply different styles for different screen sizes.
Use CSS Flexbox or Grid: CSS Flexbox and Grid are powerful tools for creating responsive layouts. With Flexbox or Grid, you can easily control the positioning of elements on your page, even on mobile devices.
Test your site on multiple devices: Make sure to test your site on different devices to ensure that your layout is working properly. You can use tools like Google’s Chrome Developer Tools to simulate different screen sizes.
Adjust the positioning of the text section using CSS: You can add some CSS code to your Shopify theme’s stylesheet to adjust the positioning of the text section in the mobile view.
@media only screen and (max-width: 767px) {
.banner-text-wrapper {
position: relative;
top: -100%;
}
}
