text on image banner on homepage doesn't stay on image when seen on mobile

[blublu]

text on image banner on homepage doesn't stay on image when seen on mobile

The text I need to be responsie and stay on the image is : Pop, Scoop and enjoy.

https://blublu.ca/

password is saghoo

Tahnk you!!

[Sangeetanahar]

hello @blublu 

Go to online store ----> themes ----> actions ----> edit code ---->assets ----> section-image-banner.css...>
add the code end of the file

@media only screen and (max-width: 767px) {

.banner__box {
    padding: 4rem 1.5rem;
    position: absolute;
    height: fit-content;
    align-items: center;
    text-align: center;
    width: 100%;
    word-wrap: break-word;
    z-index: 1;
    background: transparent;
    bottom: 0;
}
}

result

Buy me a Pizza

If this was helpful, hit the like button and accept the solution.
Thanks

[BSSCommerce-B2B]

@blublu ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
@media only screen and (max-width: 768px) {
  #Banner-template--16207740633157__image_banner .banner__media.media{
    min-height:438px;
  }
  #Banner-template--16207740633157__image_banner .banner__content {
    top: 134px;
    position: absolute;
  }
  #Banner-template--16207740633157__image_banner .banner__content .banner__box {
    background: transparent;
  }
}
</style>

Result

[blublu]

How can I have the text staying exactly at the same place on desktop and mobile please? Your code helps to keep it on the image but on MOBILE it becomes centered on image.. I want it to stay at the right

[BSSCommerce-B2B]

@blublu ,  add this in your section-image-banner.css file

@media only screen and (max-width: 767px) {
.banner__box {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}
.banner__box .banner__heading {
   font-size: 36px;
   width: 200px
}
}

  result:

[Van_Nguyen_GSG]

Hi,

Dawn theme has the setting for this. you do not need to edit the theme's code. Go to theme editor > Image Banner section > Uncheck the "Show container on mobile" setting.