A user successfully resolved an issue with making an image banner display consistently across desktop and mobile devices in Shopify.
Initial Problem:
Solution Implemented:
The user created custom CSS using media queries targeting screens with max-width of 749px, which included:
Outcome:
The issue was resolved independently. The user shared working CSS code that successfully adapted the banner layout for mobile screens while maintaining the desired appearance from the desktop version.
Hello. I want to make the image banner look the same on mobile as on desktop, including text, heading and button. How can I adjust it?
That’s how it looks on desktop and how I want it to be looking on mobile devices:
And that’s how it currently looks on mobile devices:
I’m currently at this:
How do I make the text fit in the screen? (I’ve already changed the font size to make it smaller)
Made it 
using this code:
@media screen and (max-width: 749px) {
.banner__text {
font-size: 14px !important;
max-width: 260px !important;
margin: auto !important;
align-items: right;
text-align: right;
position: relative;
right: -57px;
top: -28px;
line-height: 2 !important;
}
}
@media screen and (max-width: 749px) {
.banner__heading{
font-size: 25px !important;
max-width: 300px;
margin: auto;
align-items: right;
text-align: right;
position: relative;
right: -30px;
top: -25px;
}
}
@media screen and (max-width: 749px) {
.banner__media{
max-width: 100%;
height: auto;
}
}
