Brooklyn header slideshow problem in phone

Solved
taracollectionc
Tourist
7 0 1

hello,

I have a problem with the mobile version of the theme! the text is not showing as it should be like in the laptop version.

can someone help me plz?

thanks from now;)

PhonePhone

 

KetanKumar
Shopify Partner
14522 1673 5210

Hello, @taracollectionc 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
taracollectionc
Tourist
7 0 1
Hello,
My website is taracollection.ca
And the problem is only in phone version.
Tnx
-Tara
0 Likes

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
@media (max-width:767px){
    .slick-active .hero__text-align{
    display: block !important;
    position: relative;

}

.slick-active .hero__text-content{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


}

@media (max-width: 500px){
       .slick-active .hero__text-align *{
    font-size: 120% !important;

}

.slick-active .hero__text-content{
    position: absolute;
    top: 50%;
    transform: translateY(-20%);
}
}
</style>



Let me know if it works

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
taracollectionc
Tourist
7 0 1

Annotation 2020-08-09 115434.png

Thanks for your help but now there is also the text under the slideshow ...

-Tara

0 Likes

This is an accepted solution.

Hello,

Replace all the code I mentioned above for this new one:

<style>
@media (max-width:767px){
    .slick-active .hero__text-align{
    display: block !important;
    position: relative;

}

.slick-active .hero__text-content{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


}

@media (max-width: 500px){
       .slick-active .hero__text-align *{
    font-size: 120% !important;

}

.slick-active .hero__text-content{
    position: absolute;
    top: 50%;
    transform: translateY(-20%);
}
}

@media (max-width: 767px){
    [class="hero__adapt-text-wrap wrapper"]{
    display: none !important;
}
}
</style>


Let me know whether it works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
taracollectionc
Tourist
7 0 1

Thank you so much for your help! It worked

-Tara

0 Likes

You're welcome! Wishing you a good week, Tara.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
taracollectionc
Tourist
7 0 1

another question?

how can I make the text smaller? it is too big for phone! even the menu on the top!

 

Annotation 2020-08-09 230837.png

0 Likes

This is an accepted solution.

@taracollectionc 

In the code that I sent you, there is a value that is font-size: 120% !important;

You can change the 120% to anything you like. For instance, 100% would make the font smaller on mobile devices. Feel free to play around with it and find a value that suits you!

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.