Jump to content

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

Recommended Posts

  • Replies 6
  • Views 957
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...
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?

 

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

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
  • 3 weeks later...

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

 

 

 

 

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

 

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

Create an account or sign in to comment

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

×
×
  • 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.