Brooklyn Theme Slideshow text & button position on mobile

Solved

Brooklyn Theme Slideshow text & button position on mobile

ImTired
Tourist
6 0 0

I'm hoping someone can help me to adjust the text and button placement for my slideshow on mobile, using the Brooklyn theme. I basically want the button and text to  be in the same place as it is on desktop, I have some code that I've used to adjust some things in the css but it doesn't mimic the desktop layout. If anyone has any ideas I would appreciate it.
Examples of how it currently is:
DESKTOP1.jpgDESKTOP2.jpg

 

 

Thanks,

Amanda

 

Accepted Solution (1)
BSSCommerce-B2B
Shopify Partner
1969 564 566

This is an accepted solution.

Hi @ImTired 

To achieve that, you need to modify a bit of my previous CSS code.

With this CSS code snippet.

@media only screen and (max-width: 600px) {
    .hero__text-content.hero__text-content--adapt.text-center {
        top: -240px !important;
        font-size: 0.8rem;
        color: #fff !important;
        text-align: left !important;
    }
}

Please change to it

@media only screen and (max-width: 600px) {
    .hero__text-content.hero__text-content--adapt.text-center {
        top: -240px !important;
        font-size: 0.8rem;
        color: #fff !important;
    }
    .hero-slideshow[data-slide-index='0']~.hero__adapt-text-wrap .hero__text-content,
.hero-slideshow[data-slide-index='2']~.hero__adapt-text-wrap .hero__text-content
{
    text-align: right !important;
}

.hero-slideshow[data-slide-index='1']~.hero__adapt-text-wrap .hero__text-content,
.hero-slideshow[data-slide-index='3']~.hero__adapt-text-wrap .hero__text-content
{
    text-align: left !important;
}
}

0 1 2 3 in data-slide-index='' represent the order of images in the slide. Understanding this, you can customize the alignment (left, center, right) for any corresponding text in the slide.

If this answer helps solve your issue, please like and mark it as the solution. Have a great day!

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 6 (6)

BSSCommerce-B2B
Shopify Partner
1969 564 566

Hi @ImTired 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution in a few minutes.

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

ImTired
Tourist
6 0 0
BSSCommerce-B2B
Shopify Partner
1969 564 566

Hi @ImTired 

 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file timber.scss.css. Search for the following CSS snippet

.text-center {
    text-align: center !important;
}

Please change to it

.text-center {
    text-align: center;
}

Find the file theme.scss.css. Search for the following CSS snippet

@media only screen and (max-width: 600px) {
    .hero__text-content.hero__text-content--adapt.text-center {
        top: -185px !important;
        color: #fff !important;
    }
}

Please change to it

@media only screen and (max-width: 600px) {
    .hero__text-content.hero__text-content--adapt.text-center {
        top: -240px !important;
        font-size: 0.8rem;
        color: #fff !important;
        text-align: left !important;
    }
}

Result

BSSCommerceB2B_0-1718340867809.png

Have a nive day

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

ImTired
Tourist
6 0 0

Thanks so much. The only thing that isn't working is the alignment.
I want the horizontal alignment to be the same as the desktop. So when making the slide show if I chose text alignment Right/Left/Center I want it use that alignment. Not always left or always center. as the alignment on each of my slideshow images changes.

BSSCommerce-B2B
Shopify Partner
1969 564 566

This is an accepted solution.

Hi @ImTired 

To achieve that, you need to modify a bit of my previous CSS code.

With this CSS code snippet.

@media only screen and (max-width: 600px) {
    .hero__text-content.hero__text-content--adapt.text-center {
        top: -240px !important;
        font-size: 0.8rem;
        color: #fff !important;
        text-align: left !important;
    }
}

Please change to it

@media only screen and (max-width: 600px) {
    .hero__text-content.hero__text-content--adapt.text-center {
        top: -240px !important;
        font-size: 0.8rem;
        color: #fff !important;
    }
    .hero-slideshow[data-slide-index='0']~.hero__adapt-text-wrap .hero__text-content,
.hero-slideshow[data-slide-index='2']~.hero__adapt-text-wrap .hero__text-content
{
    text-align: right !important;
}

.hero-slideshow[data-slide-index='1']~.hero__adapt-text-wrap .hero__text-content,
.hero-slideshow[data-slide-index='3']~.hero__adapt-text-wrap .hero__text-content
{
    text-align: left !important;
}
}

0 1 2 3 in data-slide-index='' represent the order of images in the slide. Understanding this, you can customize the alignment (left, center, right) for any corresponding text in the slide.

If this answer helps solve your issue, please like and mark it as the solution. Have a great day!

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

ImTired
Tourist
6 0 0

Perfect. Thank you so much for your help!