Hidden on Tablet - Forum | JoomShaper
Staff replied SP Page Builder

Hidden on Tablet

Asked by Lito Cabezas 5 years ago Last activity 5 years ago

I'n working on a website based on a design given by client's designer using Adobe XD. While I was able to complete the layout based on the desktop design and also the mobile display. I'm trying to adjust some items using tablet (particularly iPad) but it seems that Hidden on Tablet is not working.

What's the reference of "Hidden on Tablet", is it the size or resolution of the browser or it detects the device being used?

Appreciate any advise.

Thanks.

9 replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
5 years ago · edited

Hi,
About Hide/show in Tablet - it's all based on boostrap4 and they implemented screen size detecion.
Yes, it may not work perfect becuase Apple made iPads (ex. iPad Pro 10.5", iPad Pro 12.9) that have screen with resolution like used in small laptop.

So I guess, extra custom CSS is needed for some devices.
More here :
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Section: Tablets - iPads

Lito Cabezas Asked this
5 years ago

Thanks Paul.

Can you provide an example on how I can manage that? What particular css should I put?

Regards.

Paul Frankowski Senior Staff
5 years ago

First I have to know about what device we are talking about.
For example?

  1. iPad 3, 4
  2. iPad Pro 9.7"
  3. iPad Pro 10,5"
  4. iPad Pro 12.9"

whole rest is simple.

Lito Cabezas Asked this
5 years ago

iPad mini 5 is the one I'm using to test the display.

Paul Frankowski Senior Staff
5 years ago

Thx,

And you need to hide addon (or row?) on:

  1. Portrait view
  2. Landscape view
  3. Both

General @Media CSS Code would be

/* ----------- iPad 1, 2, Mini and Air ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    HERE EXTRA CUSTOM CSS
}
Paul Frankowski Senior Staff
5 years ago · edited

Short guide for iPad Mini (older):

  1. Inside addon settings - CSS Class - insert name: ipadhide
  2. Inside template custom CSS area put below code
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
.sppb-addon.ipadhide  
{display: none !important; visibility: hidden;}
}
  1. Clear Sarafi browser cache or refresh screen 2-3x to see effect

For newer models of iPads

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .sppb-addon.ipadhide  
{display: none !important; visibility: hidden;}
}
Lito Cabezas Asked this
5 years ago

Thanks Paul,

I will try all of these if I understand it correctly.

Regards.

Paul Frankowski Senior Staff
5 years ago
  1. Added to your custom.css
  2. Now add class name into selected addons
  3. Remember to clean mobile/tablet cache to load new file
Log in to reply.