Different Height For Mobile And Desktop Hero Image Banner

6 0 1

Hi there, 


I have 2 different image banners on my homepage, one for mobile and one for desktop. 

I would like to increase the height of my mobile image banner. 

Does anyone know how to do it? 


The link to my store is 7c52c6.myshopify.com

Password: lomooo


Many thanks in advance

Reply 1 (1)

Shopify Partner
104 6 21

Hello @claraclarad 


You can go into your theme editor, and find the homepage file.

You would want to add some CSS code for device-specific customization here.


Since you want to adjust it on mobile view, the code is:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}


For example, I've edited it to have 500px-height here. 

My code is:

@media only screen and (max-width: 600px) {height: 500px;}



This would come in much easier if you used a pagebuilder for your page.


Should you want to make the process easier, please give Foxify Smart Pagebuilder a try 😉

Find my answer helpful? Give it a like :]
Try Foxify now - #1 Conversion-focused page builder.
Use FoxKit free - All-in-one Sales Boost.
FoxEcom smart solutions impact sales, costs, and profit all at once.