Remove an element for mobile screen size

Site URL: https://www.inspirewellnessandnutrition.com/recipes-blog/favorite-crunchy-avocado-toast

Hey guys,

Is it possible to remove a recurring image in mobile view? 

I am designing recipe pages in a blog and I am using an image of a line that separates the ingredients from the instructions... which looks ok on desktop but not on mobile... 

Any suggestions for this issue?

Thanks in advance!

Add to Home > Design > Custom CSS

/* Hide vertical line */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1604937282399_6682 {
    display: none;
}
}

10 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

/* Hide vertical line */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1604937282399_6682 {
    display: none;
}
}

 

Hi @tuanphan thank you for your reply. Do I have to do this manually for all the recipes? 

https://www.inspirewellnessandnutrition.com/all-recipes

Or is there a way to "call" that specific image that I use and remove it from mobile screens...(?)

Thank you in advance!

Just now, mathildeeeeee said:

Hi @tuanphan thank you for your reply. Do I have to do this manually for all the recipes? 

https://www.inspirewellnessandnutrition.com/all-recipes

Or is there a way to "call" that specific image that I use and remove it from mobile screens...(?)

Thank you in advance!

Each image has a different ID, so you have 2 options

• 1 page = 1 code
• or replace Image Block with Code Block, then you need 1 code = hide all line on mobile.

50 minutes ago, tuanphan said:

Each image has a different ID, so you have 2 options

• 1 page = 1 code
• or replace Image Block with Code Block, then you need 1 code = hide all line on mobile.

 

Ok I think I got this ! Thanks so much for your help on this!

This is working for me:

Code Block:

<div class="vertical-line"></div>

CSS:

.vertical-line {
  display: block;
  background: #ffffff;
  width: 2px;
  height: 500px;
}

/*hide vertical line*/

@media screen and (max-width:640px) {

.vertical-line {

display: none;

}

}