Solved

Edit Title position on slideshow Mobile view

Medy06
Tourist
39 0 3

Hello

1- I am currently working on Brooklyn theme. I want to have the slideshow title on right side on mobile view (I want try different positions : Right up, right down and right center).

2- Still on mobile view, Same thing for the other button below the title + have this button with smaller size + invert colors (like pc view)

 

Can someone help wit this issue ? I took a screenshot

Here is my url : Waterlys

Thanks

Screenshot_20210516-191511_Samsung Internet.jpg

 

 

Accepted Solutions (2)

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

 

hello @Medy06 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.  see screenshot  http://prnt.sc/130u2nd

 

@media only screen and  (max-width: 749px){
 #shopify-section-slideshow  #HeroWrapper-slideshow .hero__adapt-text-wrap .hero__text-content{
         text-align: right !important ;
 }
 }

 

View solution in original post

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

 @media only screen and  (max-width: 749px){

 #shopify-section-slideshow  #HeroWrapper-slideshow .hero__adapt-text-wrap .hero__text-content a.hero__cta.btn{
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: bold !important;
    font-size: 11px !important;
}
   #shopify-section-slideshow  #HeroWrapper-slideshow .hero__adapt-text-wrap .hero__text-content .hero__title.h1{
   font-size: 40px !important;
   }
}

View solution in original post

Replies 4 (4)

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

 

hello @Medy06 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.  see screenshot  http://prnt.sc/130u2nd

 

@media only screen and  (max-width: 749px){
 #shopify-section-slideshow  #HeroWrapper-slideshow .hero__adapt-text-wrap .hero__text-content{
         text-align: right !important ;
 }
 }

 

Medy06
Tourist
39 0 3

Thanks for the solution, it works 

What about the point N°2 ?

oscprofessional
Shopify Partner
15830 2369 3072

Hello Medy06,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss

@media only screen and (max-width: 749px){
#shopify-section-slideshow .hero__adapt-text-wrap.wrapper a.btn.hero__cta {
    background-color: #fff !important;
    color: #000 !important;
    padding: 8px 10px;
}
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

 @media only screen and  (max-width: 749px){

 #shopify-section-slideshow  #HeroWrapper-slideshow .hero__adapt-text-wrap .hero__text-content a.hero__cta.btn{
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: bold !important;
    font-size: 11px !important;
}
   #shopify-section-slideshow  #HeroWrapper-slideshow .hero__adapt-text-wrap .hero__text-content .hero__title.h1{
   font-size: 40px !important;
   }
}