Hide element/section from Desktop Only

Site URL: https://martifosteryoga.com/prenatal

I am trying to have a schedule button on mobile only at the top of every page. I can't seem to get the button that is the header to appear on mobile, so I have added a section below the header that has a button. I want this section to only appear on mobile.

I have tried this on one page (https://martifosteryoga.com/prenatal) , which does what I need, but then messes up the desktop view by eliminating some of the section below it.

@media screen and (min-width:767px) {
[data-section-id="6047a5919976e42da7b47e4b"] {
    display: none;
}
}

I have also tried this and it didn't do anything. 

/* Hide top button section on desktop - only visible on mobile */
@media only screen and (min-width:769px) {
div#block-yui_3_17_2_1_1615308115621_26092.sqs-block-content {
   display: none;
}
}

Any help would be appreciated. I am trying to learn css, and have taken a course, just still struggling with this.

On 4/14/2021 at 9:59 PM, dctocali said:

Site URL: https://martifosteryoga.com/prenatal

I am trying to have a schedule button on mobile only at the top of every page. I can't seem to get the button that is the header to appear on mobile, so I have added a section below the header that has a button. I want this section to only appear on mobile.

I have tried this on one page (https://martifosteryoga.com/prenatal) , which does what I need, but then messes up the desktop view by eliminating some of the section below it.

@media screen and (min-width:767px) {
[data-section-id="6047a5919976e42da7b47e4b"] {
    display: none;
}
}

 

I have also tried this and it didn't do anything. 

/* Hide top button section on desktop - only visible on mobile */
@media only screen and (min-width:769px) {
div#block-yui_3_17_2_1_1615308115621_26092.sqs-block-content {
   display: none;
}
}

 

Any help would be appreciated. I am trying to learn css, and have taken a course, just still struggling with this.

Add this to Design > Custom CSS

/* Hide button on desktop */
@media screen and (min-width:768px) {
[data-section-id="6047a5919976e42da7b47e4b"] .content-wrapper {
    display: none;
}
}