Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Remove an element for mobile screen size


mathildeeeeee

Question

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!

Screen Shot 2020-11-11 at 9.24.21 AM.png

IMG_A4E3F4DF311C-1.jpeg

Edited by mathildeeeeee
Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

Link to comment
  • 0
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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;

}

}

Edited by mathildeeeeee
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...