How can I overlap text on image in Refresh theme for mobile view?

Store Design
, , ,
1

Hello, I like how it looks on desktop, but is there a way to make the text overlap on the image, to not be separated like in the picture with this blue square on mobile. without changing the look on desktop.

Refresh theme.

IMG_6687.png
IMG_6687.png1179×2556 190 KB

2

Hello @bigha ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Assets folder → base.css file → add this following code at the bottom of page:
@media screen and (max-width: 767px) {
  .container-class {
    position: relative;
    height: auto;
  }
  .image-class {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .text-class {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
  }
}
  • Save and preview

Hope this can help.

Ali Reviews team.

3

Hi @bigha
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

4

Hello, thank you for your time but unfortunately this doesn’t seem to work. It is still the same.

5

Hello, I have sent you a message.