Pipeline theme - different banner for desktop and mobile

Store Design
, ,
1

Hey!

Actually I’m pretty lost at the moment… Maybe you can help me.

I would like to select the banner (on the homepage of my website) height for desktop as tall and select it as short for mobile. I am very very new to coding so any help would be appreciated! I am using the Pipeline theme. my website is www.amongequals.com.au

Is something like this even possible?

Thank you!

2

Hello @amongequalsbilu :waving_hand:

Yes it is possible. In Shopify Admin, you can go to Edit theme code, open file base.css and add this code snippet at the bottom

/* Desktop height */
.homepage-image {
    height: 500px;
}

/* Mobile height */
@media (max-width: 768px) {
.homepage-image {
    height: 300px;
}
}

Make sure to change height values as you need. Hope that helps!

3

Hi @amongequalsbilu

  • You can refer to these 2 CSS code snippets. Please paste it to admin/online store/themes/edit code/theme,css

  • Below is the code for the phone

@media screen and (min-width: 769px) {
    .index-sections .shopify-section:first-child .lazy-image {
        padding: 0 !important;
}
    .index-sections .shopify-section:first-child .lazy-image img {
        position: relative !important;
        height: 800px !important;
    }
}
  • Below is the code for the desktop screen
.index-sections .shopify-section:first-child .lazy-image {
    padding: 0;
}
.index-sections .shopify-section:first-child .lazy-image img {
    position: relative !important;
    height: 800px;
}
  • Also, you can change the number “800px” the height as you want

Let me know if it works for you.