How can I adjust image opacity and size for mobile viewing?

Store Design
1

Hi there,

How can I make the background of the banner image (“Unsere Mission”) here https://taneraskin.com/pages/uberuns transparent instead of gray and more sharp? It’s actually a transparent png.

Also, I wanna have the words just as big as “Unser Versprechen” further down below when viewing the page in mobile version, so it has less room left and right, is that possible?

Best,

Isa

2

Hi @isabellemaria ,

To make the background transparent for the Unsere Mission image, please follow the instructions below.

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the base.css file
  3. Add the code below at the very end of the file
#Banner-template--17868505481484__475bdecc-c6b6-4f1b-8894-560e7f72ad93 .banner__media.media {
    background-color: transparent;
}

Unfortunately, you have to assign another image for mobile on this one since the size is far different from the other image.

This is the “Unsere Mission” image, notice the intrinsic ration and size.

made4Uo_1-1679436923064.png
made4Uo_1-1679436923064.png1233×725 116 KB

This is the Unser Versprechen image, notice the intrinsic ration and size.

made4Uo_0-1679436804675.png
made4Uo_0-1679436804675.png1282×652 86.4 KB

1 Like
3

Thank you. How do I assign another picture for the mobile version?

4

Hi @isabellemaria ,

You can use this video tutorial to do so

1 Like