I am using the slider and I have inserted text on the hero image. When I view it on a computer or tablet the text looks fine, it is on top of the image. But when I view it on mobile the text is placed underneath the image. Is there a way to keep the text on top of the image when viewing on mobile? It works on some other themes I have tried but I would like to use Brooklyn.
Solved! Go to the solution
Hello @kevin12345,
Please share your site url so that I will give you exact solution
Hello, the site url is https://eatneatlyapron.com/
The site is not live yet so the password to enter the site is plield
Thanks.
This is an accepted solution.
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file
@media screen and (max-width: 769px) { .hero__adapt-text-wrap.wrapper { position: absolute; top: 20%; left: 0; right: 0; color: #fff; } } @media screen and (max-width: 480px) { .hero__adapt-text-wrap.wrapper { top: 10%; } }
Hi.
I applied the code as you mentioned but, in the mobile version, the button is underneath the slideshow and the space between the heading, subheading and button is bigger than normal.
Please check:
I would like it to have the same look of the desktop:
Can you please advise how to solve this issue?
Thanks!
Francisco.
Hello @FranciscoSantos,
Can you please share your site url
Hello there!
I am having the same problem. I applied the code you share above and it worked for puting the text inside the slider (well seems so, cannot see it completely because it is too big).
The webpage link is https://xn-2i0b75ttzb5vk.myshopify.com/ and the password: whahnt
Thank you so much!
Hello @killa14
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
@media screen and (max-width: 769px) { .hero__adapt-text-wrap.wrapper { top: 40%; margin: 0; } } @media screen and (max-width: 600px) { .hero__adapt-text-wrap.wrapper { top: 35%; } } @media screen and (max-width: 480px) { .hero__adapt-text-wrap.wrapper { top: 30%; } } @media screen and (max-width: 360px) { .hero__adapt-text-wrap.wrapper { top: 28%; font-size: 11px; } }
Hope this will work for you.
Thanks!
User | Count |
---|---|
429 | |
200 | |
145 | |
57 | |
43 |