Banner image shrinks and the header text drops below the banner image at 749px.

Store Design
, ,

Topic summary

A developer encountered a responsive design issue where banner images shrink and header text drops below the banner at 749px viewport width. This affects all pages except the homepage, which uses a custom liquid video banner.

Issue Details:

  • Problem occurs at the 749px breakpoint
  • Developer checked media queries but couldn’t locate the root cause
  • Site is in development and password-protected

Resolution:

  • Developer implemented a CSS fix targeting the specific breakpoint with custom styles
  • Solution includes positioning adjustments and display property modifications for .banner__content.middle-center.page-width and .banner--mobile-bottom::after elements
  • Developer acknowledges the fix works but is uncertain if it’s the most efficient approach

Status: Issue resolved with custom CSS, though developer remains open to better solutions if suggested.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Banner image shrinks and the header text drops below the banner image at 749px. Not sure why it is doing this. Does anyone have suggestions on how to fix this issue?

This site is in development for a client. This issue is happening on all pages other than my homepage but I have added a video banner to that page in liquid so I think that is why this page is not affected. I have checked the media queries but cannot locate the issue. Has anyone come across this issue? Any help is greatly appreciated.

You can view the development site so the code can be inspected at https://vwd-test-store.myshopify.com/pages/about.

J.P.

2

Hey @jgoldsworthy

Your website is password protected, can you share the password as well?

Best Regards,

Moeed

3

Sorry, sure - VisionWebDesign

4

Hello Moeed,

I have fixed the issue however, I am not sure my fix is the most efficient and best solution. I added the below code to my custom css stylesheet:

@media(max-width: 749px) {
.banner.banner–content-align-center.banner–content-align-mobile-center.banner–small.banner–mobile-bottom.banner–desktop-transparent {
display: block;
}
.banner–mobile-bottom::after, .banner–mobile-bottom .banner__media::after {
display: block !important;
}
.banner__content.banner__content–middle-center.page-width {
position: absolute;
top: 30%;
}
}

If you come up with a better solution, let me know. Thanks for looking at the page!

Cheers,

J.P.