What's the ideal banner size for tablet/iPad view?

Store Design
1

hey guys! can help me, my desktop and mobile ver banner is all good, but when i change to ipad/tablet, i think the size is not correct, can someone help me?

or is maybe can help me on the media query ?

my store - https://on9m8vieiig6asqh-55783292951.shopifypreview.com/

2

hi @ladyaya ,

i’m checked, currently on your banner using two banner different, one for mobile and one for desktop.

So, why you don’t make an other image for tablet?

3

yes i did make 2 different banner for mobile and desktop,

so right now i just want to make the tablet ver to be same like desktop ver

are there any ways to do it?

4

you want change the banner look like this, right?

PHAVIA_0-1657178402649.png
PHAVIA_0-1657178402649.png570×650 195 KB

1 Like
5

yes correct haha

6

hi @ladyaya ,

The link above has expired for access, so can you please give the link and password access to your store.

Thank you!

7

hey sure, here you go,

https://o2cv7satizh8p304-55783292951.shopifypreview.com

8

hi @ladyaya ,

You had change the other image, so i will fix follow the image changed.

Can you please add the short code this at the bottom of /assets/custom.scss.css file:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    .hero__image {
        height: 100% !important;
    }
   .hero__image-wrapper{
      height: auto !important;
   }
   .hero--450px {
      height: 300px !important;
   }
}

If have the task need check, please let me know, thank you!

9

this is what i get when checking using inspect :slightly_smiling_face:

https://cxgqx8kzlnosm7xa-55783292951.shopifypreview.com

1 Like
10

@ladyaya ,

i’m checked and found the class did change, it change from .hero–450px to .hero–650px, Maybe the class change depend follow image other here.

So can you please add the code this for this case.

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
   .index-section--hero .hero {
      height: 300px !important;
   }
}

Please let me know if have other issue, thank you!

11

hey got it! for ipad mini now is really working, but ipad air still stretch the image

12

@ladyaya ,

Can you please add the short code for adjust on ipad Air:

@media only screen and (min-width: 800px) and (max-width: 1180px){
.index-section--hero .hero {
    height: 420px !important;
}
}

So, for easy for discuss for issues you want check or fix, you can please join here:

https://join.slack.com/t/phavia/shared_invite/zt-1c4fceyuc-6L99qqyTsUG5simcl~I09A

This is channel Slack Chat of me spend for support the customers.

Thank you!