Different banner size on mobile Portrait and landscape

Store Design

Topic summary

A user seeks CSS code to adjust banner sizing on mobile devices for their Shopify store (thesnoozy.com).

Current Issue:

  • Desktop banner displays correctly
  • Mobile landscape: Banner doesn’t fill the entire space
  • Mobile portrait: Banner image needs to be larger vertically, with the button positioned below 30% of the image

Solution Provided:
A community member shared CSS code using media queries targeting screens up to 767px width:

  • Adjusts .banner__content height to 300px (customizable)
  • Positions .banner__box at 30% from bottom with centered horizontal alignment
  • Includes transform properties for proper centering

The solution was tested and includes a screenshot showing the result. The user can modify the height and bottom position values as needed to achieve their desired layout.

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

Hi,

website url: https://thesnoozy.com/

My banner size is perfect on the desktop version, but I would like to change the size for the mobile version. This is how it currently looks on the mobile version.

Mobile (Landscape Mode): I would like for the image to fill the whole space, just like on desktop.

IMG_1312.jpg
IMG_1312.jpg2504×921 108 KB

Mobile (Portrait mode): I Would like the image banner to be larger on the vertical, so that the button comes below the 30%, like the picture I posted below.

IMG_1311.jpg
IMG_1311.jpg1170×1971 153 KB

IMG_98BE3881324B-1.jpeg
IMG_98BE3881324B-1.jpeg1170×1973 175 KB

2

you would need a expert to built it.

3

my guy just give me the code, stop trying to just sell yourself for small stuff. I’ll wait for a reasonable person to just answer the question.

4

Hello @GeorgeRizos ,

Try below code :

@media screen and (max-width: 767px) {
  .banner__content {
    height: 300px; /* adjust this value as needed */
  }

  .banner__box {
    position: absolute;
    bottom: 30%; /* adjust this value as needed */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

I tested it on my browser and this is how it looks after applying CSS :

SaaSEnthu_0-1672413514541.png
SaaSEnthu_0-1672413514541.png397×561 72.3 KB

Hope it helps. Let me know if need further assistance.