Image banner full screen on spotlight theme

Store Design
,
1

I am wanting my image banner to be full screen for desktop and mobile. Currently it’s only full screen on desktop and only half the screen on mobile.

PW:eachar

www.grippanails.com

1 Like
2

You will need to add 2 separate sections for mobile and desktop and customize an image for the mobile version to make it to be full screen on mobile

3

Hi @lovej12 ,

You can use this tutorial to assign a section for desktop or mobile.

4

To make your image banner full screen on both desktop and mobile, you can apply some CSS styles to adjust its size. Here’s how you can achieve this:

  1. Identify the CSS selector for your image banner: You’ll need to locate the CSS selector for the element that represents your image banner. This can vary depending on your theme’s structure and customization.

  2. Apply CSS styles for full-screen display:

    • For desktop: Use the following CSS styles to make the image banner cover the entire screen width:
.your-image-banner-selector {
  width: 100%;
  max-width: 100%;
  height: auto;
}

  • Replace .your-image-banner-selector with the actual CSS selector for your image banner.

  • For mobile: By default, mobile devices may have a different layout or responsive behavior. To make the image banner full screen on mobile, you can adjust the CSS styles accordingly. For example:

@media (max-width: 767px) {
  .your-image-banner-selector {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}
5

Hello @lovej12 ,

You’re currently using a spotlight theme, which offers four options (Adapt, Small, Medium, Large) for image height adjustment in a slideshow.

None of these will adjust the image to full screen (excluding header height).

For this, follow the below steps:

  1. Go to Online Store → Current Theme → Customize
  2. Open Slideshow setting(Check Screenshot)
  3. Add the below provided CSS Code.

.banner {

height: calc(100vh - var(–header-height));

}

  1. Click on Save(top right button) or CTRL+S

Cedcommerce_0-1683633470782.png
Cedcommerce_0-1683633470782.png174×150 9.45 KB

image.png

image.png

Hope it helps. Let us know if you need any further help with the Shopify store.

All the best,

CedCommerce