How can I resize my banners for mobile viewing?

Store Design
, , ,

Topic summary

Issue: Mobile banners (two half-banners and one full-banner) were not full-width; the full banner appeared small with extra space below. Theme lacked mobile controls.

Key steps taken (CSS changes):

  • In rt-application.css, set banner lists to respect full width: .unero-banners-metro ul, .unero-banners-grid ul { margin: 0 -5px; padding: 0; max-width: 100% !important; }.
  • Initially suggested removing spacing: in theme.css, .row.empty_space { height: 0 !important; }. OP instead wanted to increase the image’s mobile height, not remove space.
  • Mobile-only adjustments (media query at max-width: 767px):
    • Ensure half-banner images cover and scale: .unero-banners-grid ul li img { object-fit: cover; width: 100%; }.
    • Specifically increase the full banner height: .vc_single_image-img.attachment-full { height: 32vh !important; }. (vh = viewport height units.)

Browser note: Changes initially didn’t appear in Chrome but were later confirmed working.

Outcome: The full banner now fills more vertical space on mobile, half-banners retain coverage, and desktop remains unchanged.

Status: Resolved for the original poster. A separate user’s Spotlight theme width issue was raised but not addressed in this thread.

Summarized with AI on January 13. AI used: gpt-5.
4

Hi @elo1234 , Go to rt-application.css and add the following code :

.unero-banners-metro ul,
.unero-banners-grid ul {
  margin: 0 -5px;
  padding: 0;
  max-width: 100% !important;
}
1 Like