Solved

What is the solution for the text layout issue in Shopify's Brooklyn theme on mobile view?

Medy06
Tourist
39 0 3

on the mobile view, the title and text were below the slide show, so I put this code below to fix it

@media only screen and(max-width:768px){
.hero__text-content.hero__text-content--adapt.text-center {
top: -200px!important;
color: white!important;
font-size: 10px!important;
}
}

It works, but there is something wrong, there is now a big space between the slideshow and the follow section, anyone knows how to fix this ?

I'm using Brooklyn theme

Screenshot.jpg

Accepted Solution (1)
JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Add the following extra code:

@media screen and (max-width: 768px)
{
#shopify-section-16186623461235410f {
    margin-top: -160px;
}

#shopify-section-1616782620d5205165 {
    margin-top: -180px;
}
}


It will have to be done manually for each section.

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

Replies 7 (7)

JHKCreate
Shopify Expert
3571 639 916

Hi @Medy06 

Would you mind sharing your store's URL so we can assist on that?

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

oscprofessional
Shopify Partner
15831 2369 3072

Hello Medy06,
Please share your site url.
So that I can check and let you know the exact solution here.

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
Medy06
Tourist
39 0 3
JHKCreate
Shopify Expert
3571 639 916

Add the following code to the end of your timber.scss.css file:

@media only screen and(max-width:768px)
{
#shopify-section-161678277396657f11 {
    margin-top: -110px;
}
}

That should do it! Don't forget to like and mark as solution if this solves your issue!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Medy06
Tourist
39 0 3

That works, thanks a lot

but on the others slideshow on the home page, it does not work, is it possible to make it permanent each time I have to create a slideshow on home page ?

 

JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Add the following extra code:

@media screen and (max-width: 768px)
{
#shopify-section-16186623461235410f {
    margin-top: -160px;
}

#shopify-section-1616782620d5205165 {
    margin-top: -180px;
}
}


It will have to be done manually for each section.

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
oscprofessional
Shopify Partner
15831 2369 3072

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

@media screen and (max-width: 768px){
#shopify-section-161678277396657f11 {
    margin-top: -100px !important;
}
}
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