Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Is there a setting where we can set the min and max width for tablets

Featured Lock Resolved Issue
Hi,

although I set sections to only display on desktop or tablet or mobile some desktop items still display on tablet views. In particular the landscape on Ipads and looks a mess.

Is there anywhere to tell SPPagebuilder to treat everything up to 1024px as tablet? If not, what is the correct way to ensure that tablet layouts are used when it is landscape or portrait on say the ipad air 1 and 2?

I only seem to have problems with this when I add sections and addons in SPPagebuilder as other components are automatically responsive.

For example my megamenus where displaying when they shouldn't so I had to turn them off using your instructions on here. Now I need to know the correct way to not show (or show) sections on tablets (particularly including landscape size).

How do I achieve this?

Kind regards

UPDATE: I can see that I can add sppb-hidden-md to make the section or component hidden on the areas I don't want them which can solve my problem. However, I cannot get it to do the reverse on the tablet where I want it to be visible. I tried

sppb-visibe-md
sppb-display-md

But neither work

11 Answers

Mel

More than a month ago #Permalink
Thanks Pavel,

I have followed your advice :)

Now I have it displaying correctly. Here is what I did in case anyone else needs to do same:

In the section's CSS Class I added hideme then in the custom css I added the following:

@media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) {display:none !important; visibility: hidden;}
@media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) {display:none !important; visibility: hidden;}
@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) {.hideme {display:none !important; visibility: hidden;}}
@media only screen and (min-device-width: 1366px) and (max-device-width: 1440px) and (orientation: landscape) {.hideme {display:none !important; visibility: hidden;}}
@media screen and (device-width: 1536px) and (device-height: 2048px) and (orientation: portrait) {.hideme {display:none !important; visibility: hidden;}}
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) {.hideme {display:none !important; visibility: hidden;}}
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {.hideme {display:none !important; visibility: hidden;}}

I hope that is the correct approach? It seems to be working

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
From setting not,
you have to override styles by adding new rules,
New iPads which you mentioned have very high resolution, like laptops.
It means that advanced CSS @media must be used
https://stackoverflow.com/questions/41978487/correct-media-query-for-ipad-pro


As you may know, there is:
iPad 3, 4 and Pro 9.7", iPad Pro 10.5", iPad Pro 12.9"
so it's not so easy.

Example syntax

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {

HERE IS YOUR CODE - CLASS name and rule

}

Mel

More than a month ago #Permalink
Hi Paul,

I will go read. Is it display: inline-block if we want to show a section?

It would be a good feature in SPPagebuilder if we could select all the different size displays in the responsive section BUT I am guessing this is a stupid idea as it would have been included if it was useful?

Paul Frankowski - Staff

More than a month ago #Permalink
If you would use a proper code inside
"HERE IS YOUR CODE - CLASS name and rule"
yes, it should.
Remember also about !important.
---
In theory in options, there should be 8 responsive switchers to manage "all popular" resolutions, but nobody does that, even in WordPress world.
---

Now all is in your hands.

Mel

More than a month ago #Permalink
Hi Paul,

it is my SPPagebuilder where I have created a page.

I have got everything working except for on 2 displays. These are Ipad Pro at 1024 x 1366 and 1024 x 768

No matter what I do the section in SPPagebuilder will not display. I don't know how to force it to be visible. Even with display on Tablet set it doesn't show.

Any advice? I have mobile and desktop disabled

Paul Frankowski - Staff

More than a month ago #Permalink
I gave you advice, as I said. Use your CSS skills and Code Inspector from your browser.

Mel

More than a month ago #Permalink
Hi Paul,

I am using css. This is what I have tried so far.

I have put showsearch in the CSS class box in the sppagebuilder section and then added this to my custom css:

@media (min-width: 1024px) and (max-width: 1366px) #section-id-1535457245140 {.showsearch {display:inline-block !important;}
}
@media (min-width: 768px) and (max-width: 1024px) #section-id-1535457245140 {.showsearch {display:inline-block !important;}
}

Also tried this:

@media (min-width: 1024px) and (max-width: 1366px) #section-id-1535457245140 {.showsearch {display:inline-block !important; visibility: visible;}
}
@media (min-width: 768px) and (max-width: 1024px) #section-id-1535457245140 {.showsearch {display:inline-block !important; visibility: visible;}
}

But neither display the section.

Pavel

More than a month ago #Permalink
Hi. Of course, I don’t know what you are trying to do, but it’s rather strange to apply the display: inline-block property to a section. By applying to the inline-block section you globally violate the layout and this can lead to the need to override many other elements in custom css. It would be more logical to apply display: block.
And try swapping min-width and max-width in @media. Since the SP PB system is more suitable for Desktop first, but not for Mobile first.
And in your situation, I think it's better to write code to hide, not code to display ( display:none; ). Disable all regular hide settings and write code for this.

UPD. I just noticed that your code is not properly written at all.
http://dl3.joxi.net/drive/2019/05/19/0008/0401/545169/69/c07a966d6c.png
It must be so, if the showsearch class belongs to a section.

@media (min-width: 1024px) and (max-width: 1366px) {
#section-id-1535457245140.showsearch {
display:inline-block !important;
visibility: visible;
}
}

It is possible without a section ID like this

@media (min-width: 1024px) and (max-width: 1366px) {
.showsearch {
display:inline-block !important;
visibility: visible;
}
}

Or without class

@media (min-width: 1024px) and (max-width: 1366px) {
#section-id-1535457245140 {
display:inline-block !important;
visibility: visible;
}
}

If the showsearch class does not belong to a section, but to an object inside a section, then this should be so

@media (min-width: 1024px) and (max-width: 1366px) {
#section-id-1535457245140 .showsearch {
display:inline-block !important;
visibility: visible;
}
}

Write the code structurally, then you can easily notice the errors. In optimized code it is very difficult to see errors.

And I think you don't need the visibility property.

Paul Frankowski - Staff

More than a month ago #Permalink
Thanks @Pavel

@Mel - code is a code if you make mistake browser doesn't understand what to do.
Tip: From time to time use CSS validator to check if your syntax is correct. We all make mistakes. ;)

Mel

More than a month ago #Permalink
Thanks Paul and Pavel, all the advice has been most appreciated.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 119
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 108
Toufiq

Toufiq

Total Accepted Answers: 89
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 3
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

296064

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us