trying to make something disappear on mobile with block codes

Site URL: http://katiecaftravel.com

hi all - I added a vertical line via custom code to divide my page:

/* Vertical Line */
.vertical-line {
  height: 5000px; /* line height */
  width: .1px; /* line width */
  background: #D3D3D3; /*line colour*/
  margin-right: 0px;
  margin-left: 40px;
  top: 0px;
  bottom: 0px; 
}

and I want it to disappear on mobile because it's just this huge line at the end of the scroll on mobile currently, so I used this:

@media screen and (max-width:640px) {
section[data-section-id=“#block-yui_3_17_2_1_1629838726812_40395.”] {
display: none;}
}

this is the block code information:

<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_1_1629838726812_40395"><div class="sqs-block-content" id="yui_3_17_2_1_1629848011465_993"><div class="vertical-line" id="yui_3_17_2_1_1629848011465_1073"></div></div></div>

and it does nothing! at my wit's end here haha. any help appreciated 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.vertical-line {display: none !important;}
}