Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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:
Thanks,
Amanda
Solved! Go to the solution
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
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
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
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
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.
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
Perfect. Thank you so much for your help!
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024