How can I hide a specific section on mobile view in Turbo theme?

Technical Q&A
1

hi all,

please check this screenshot https://prnt.sc/qbhlb1

URL is = https://shahniazstore.myshopify.com/

i am using turbo theme

i have a section which have 2 sub sections (text+images). i want to keep them both on desktop version but want to hide 1 sub section on mobile view so customer will not scroll a long and see products immediately.

What i tried = i tried to hide the sub section on mobile view by modifying CSS and through media queries but got no luck. help will be highly appreciated. thanks

2

Hello discky,

What you want to hide first sub section or second sub section?

3

Hello discky,

If you want to hide first sub section add this css at bottom of
Online Store-> Themes → Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px){
#shopify-section-1576065013508 .container div:nth-child(1) {
    display: none;
}
}

If you want to hide second sub section add this css at bottom of
Online Store-> Themes → Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px){
#shopify-section-1576065013508 .container div:nth-child(2) {
    display: none;
}
}
4

@oscprofessional you ROCK… thanks for the help

5

For anyone who want to hide a section but different from above’s section, please follow the tutorial below. This should work on any section and any theme. No APP and it is FREE.