Make a Web Element Only Appear on Mobile / Hide on Desktop

Site URL: https://www.nationaltab.com/solutions

Hi, 

I want the "Solution Driven Process" section on this page to only be visible on desktop and not on mobile. At the same time, I would like to create a mobile-version of this that will not appear on desktop. 

Can someone please advise how to do so? 

Thanks!

Megan

Hi. You can create 2 sections on current page, design its layout. Then let me know. We will give the code to show 1 on desktop, show 1 on mobile

On 6/15/2021 at 4:41 AM, tuanphan said:

Hi. You can create 2 sections on current page, design its layout. Then let me know. We will give the code to show 1 on desktop, show 1 on mobile

Hey Tuanphan,

I have a similar question - I have created vertical lines on a page I'm using for a lightbox.

For mobile - I either need to hide the vertical lines or, change the viewable size of the lightbox for mobile, which I don't think I want to do.  Is there an easy fix for this?

15 hours ago, kmdesign said:

Hey Tuanphan,

I have a similar question - I have created vertical lines on a page I'm using for a lightbox.

For mobile - I either need to hide the vertical lines or, change the viewable size of the lightbox for mobile, which I don't think I want to do.  Is there an easy fix for this?

 

Can you share page url? We can help easier

Thanks! 

Here's the URL https://www.fairmarket.delivery/lightbox-new-york-strip

I have a lightbox set up for a recipe card. 

I would like to hide the vertical lines on the mobile version - and would like to reduce the padding to zero on the vertical lines to zero on both versions - here's what I have in custom css - so far - but it's not working. 

Thank you for your help!

/* Vertical Line */
.vertical-line {
  height: 600px; /* line height */
  width: 1px; /* line width */
  background: #000000; /*line colour*/
  border-collapse: collapse !important;
  padding: 0em !important;
}

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

On 8/1/2021 at 9:36 PM, kmdesign said:

Thanks! 

Here's the URL https://www.fairmarket.delivery/lightbox-new-york-strip

I have a lightbox set up for a recipe card. 

I would like to hide the vertical lines on the mobile version - and would like to reduce the padding to zero on the vertical lines to zero on both versions - here's what I have in custom css - so far - but it's not working. 

Thank you for your help!

 

/* Vertical Line */
.vertical-line {
  height: 600px; /* line height */
  width: 1px; /* line width */
  background: #000000; /*line colour*/
  border-collapse: collapse !important;
  padding: 0em !important;
}

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

 

 

 

 

Add to Design > Custom CSS

/* hide vertical lines mobile */
@media screen and (max-width:640px) {
div#block-e567b214eab3ceae301f+.row .code-block {
    display: none;
}
}

Thank you so much!