Jump to content

Remove an element for mobile screen size

Recommended Posts

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

Link to comment
  • mathildeeeeee changed the title to Remove an element for mobile screen size
  • Replies 4
  • Views 2.8k
  • Created
  • Last Reply
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

}

}

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.