How can I position text inside photos for mobile view?

Store Design
1

Hi everyone,

how can i make the text inside the photo like it is on web mode, rather than under the photo as it shows in mobile mode.

44B00B95-E9BA-42BC-A3B1-4EF6EBF7E633.png
44B00B95-E9BA-42BC-A3B1-4EF6EBF7E633.png1125×2436 155 KB

thank you.

url: cutestyou.com

pw: ayesho

2

Hi! @cutestyou

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> theme.css ->paste the below code at the bottom of the file.

@media not all and (min-resolution:.001dpcm)

{ @supports (-webkit-appearance:none) {

@media (max-width:767px){

.banner__box.color-background-1, .banner__box.color-accent-1 {

position: relative;

bottom: 83%;

}

}

}}

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

PageFly

3

Hi, i dont have theme.css file

4

Hey there! Will do my best to help you out.

It would be helpful to know the name of your theme and if you can provide an example of what you’re looking for as far as the style of the text - that should provide the context I need here.

Great job on your website so far, I adore the branding!

5

Hi @Ren , i am using Sense theme. I want the text showing in side the photo like this

4F50E11B-59D5-4897-B20D-1070634408C9.jpeg
4F50E11B-59D5-4897-B20D-1070634408C9.jpeg1125×1492 131 KB

in my store, it will be “our GRAMOROUS collection - Shop now” inside the picture, not under it

thank you

6

you try again with Asset-> base.css ->paste the below code at the bottom of the file.

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
@media (max-width:767px){
.banner__box.color-background-1, .banner__box.color-accent-1 {
position: relative;
bottom: 83%;
}
}
}}

7

@cutestyou

Hi,

If you simply move the text up inside of the image, please add the code below to vAssets/section-image-banner.css file.

@media screen and (max-width: 749px) {
  .banner--mobile-bottom:not(.banner--stacked) .banner__content {
    margin-top: -240px;
  }
}

If you need to adjust any other elements, please let me know.

Hope it helps.

Thanks.

8

Hi @DavidEKim , it works great!! Thanks so much