Adjusting the slide sizing for the mobile homepage.

Store Design
1

Hi,

I am having issues sizing a photo for the mobile homepage slide under the header. On desktop the photo looks great! However, on mobile the photo is completely out of scale. Is there any way for me to fix this?

I am using the Debutify theme.

Desktop
Desktop2560×1440 478 KB

Mobile
Mobile1170×2532 253 KB

Also the inverted logo doesn’t seem to work for the mobile homepage. Is there a way that I can change this?

www.zafaraair.com

2

Hello @MLD
I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
@media screen and (max-width: 769px){
.transparent-header--mobile .shopify-section.hero-section:first-child .hero-mobile-xlarge, .transparent-header--mobile .hero-first .hero-mobile-xlarge {
min-height: calc(62vh - 38px) !important;
}
.site-header__logo .mobile-logo {
display: block;
filter: invert(1);
}
.is-scrolling .mobile-logo.imgset.radius-none.lazyloaded {
filter: invert(0) !important;
}
}
</style>

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

1 Like
3

Hey, the size was slightly adjusted but not completely. The logo looks good now. Thank you! This is what the mobile page currently looks like.

Screen Shot 2023-01-06 at 7.30.50 AM.png
Screen Shot 2023-01-06 at 7.30.50 AM.png758×1278 131 KB

4

GO to online store > Theme > Action > edit code > section > Open your theme.liquid theme file

copy below code And paste code(header.liquid)

<style>
@media screen and (max-width: 769px){
.transparent-header--mobile .shopify-section.hero-section:first-child .hero-mobile-xlarge, .transparent-header--mobile .hero-first .hero-mobile-xlarge {
min-height: calc(62vh - 38px) !important;
}
.site-header__logo .mobile-logo {
display: block;
filter: invert(1);
}
.is-scrolling .mobile-logo.imgset.radius-none.lazyloaded {
filter: invert(0) !important;
}
}
</style>


 
1 Like
5

@MLD

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :

<style>
@media screen and (max-width: 769px){
.transparent-header--mobile .shopify-section.hero-section:first-child .hero-mobile-xlarge, .transparent-header--mobile .hero-first .hero-mobile-xlarge {
min-height: calc(30vh - 38px) !important;
}
.site-header__logo .mobile-logo {
display: block;
filter: invert(1);
}
.is-scrolling .mobile-logo.imgset.radius-none.lazyloaded {
filter: invert(0) !important;
}
}

</style>

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

1 Like
6

Ok that worked. Thank you!

7

One more question, is there a way that I can edit the code to change the inverted logo so that when you scroll it changed back to the original color?