Hello,
I’d like to use the “Tabs” element on a specific page (http://cbac.robstrickland.net/avi-home/) and have one tab open by default on mobile devices, and the other on tablets and larger.
How can I accomplish that?
Thank in advance,
Rob
Hi Rob,
I couldn’t see any tabs on that page.
Could you please double check?
Thanks.
Right you are…
I have added them for your review and titled the tabs as MOBILE and DESKTOP although I have yet to deploy the content for Mobile viewing, which will link to the app.
Thanks!
Rob
Hi Rob,
I am not sure I understand the goal of your design.
But I would suggest creating two different rows instead.
On each row you will put one of your tabs.
You will than go to the customize tab of each row and select which screenwidhts you want to hide it.
Hope it helps
Thanks for that suggestion… the second set of tabs which I think you’re referencing are sourced from an external website… and that content is not responsive.
So I was hoping I could offer content on the page specific to device.
That’s really my goal. To deliver content version “a” on small browsers and deliver content version"b" on desktops.
I hope this additional explanation helps…
Regards,
Rob
Hi Rob,
Thank you for the clarification, I feel that using Tab element in this case just complicate things.
I suggest that you create 2 kinds of your Section instead (one for desktop and one for mobile), and then utilize the Hide Base on Screen Width option.
On that screencast, you may notice that the section’s settings are different (old version) but its the same concept. Showing one section and hiding the other base on the screen width.
On the new Cornerstone/Content builder version, you’ll see the option as Hide During Breakpoints under the Customize panel (https://prnt.sc/hdmg1z)
Hope this shed some lights,
Cheers!
This is a great fix, thank you! I did create a mobile specific rows to show different content, however the iframe on mobile I have modified with webkit to be touch scroll, but that seems to allow pinch/expand to read content in view but i cannot expand the size of the site and scroll through the iframe. Any ideas on how to fix that?
Thanks,
Rob
http://cbac.robstrickland.net/avi-home/ (to view on mobile)
Hi,
Try to add a unique class(my-section) to your section where your iframe is
Then add this in Theme Options > CSS
@media (max-width:767px) {
.my-section {
height:500px;
overflow-y:scroll;
}
}
Hope that helps
Thanks for this idea.
I added the unique class and css and the iframe could be zoomed, and partially scrolled, but the content scrolling within the iframe only displays a partial view. So, no changes were observed.
I tested in a private browser to be sure no caching was in effect.
Regards,
Rob
Hi Rob,
Please try adding the class to the mobile iframe instead in the section that contains the iframe.
Hope this helps.
I havedone so:
<div class="mms-pinch" style="overflow:scroll;-webkit-overflow-scrolling:touch">
<iframe style="border: 0px none transparent;" src="http://cbavalanchecenter.org/cbac/pub_bc_avo.php?zone_id=0" width="100%" height="1700" frameborder="0" width="480"></iframe>
</div>
But maybe incorrectly since it’s not working?
Thank you again for your assistance!
Rob
Hi Rob,
It should be:
<div class="mms-pinch" style="overflow:scroll;-webkit-overflow-scrolling:touch">
<iframe class="my-section" style="border: 0px none transparent;" src="http://cbavalanchecenter.org/cbac/pub_bc_avo.php?zone_id=0" width="100%" height="1700" frameborder="0" width="480"></iframe>
</div>
Notice the my-section class in the iframe code.
Hope this helps.
I actually named the css “mms-pinch” instead of “my-selection”… does that matter?
No it should be fine. Please update the class of the iframe to mms-pinch then the CSS code should be :
@media (max-width:767px) {
.mms-pinch {
height:500px;
overflow-y:scroll;
}
}
Hope this helps.
yes, that was done earlier… still no luck. Does it work for you? I’m on an iPhone6 with latest updates and I have tried chrome and safari browsers in private and regular.
Thanks,
Rob
Hi Rob,
It seems to be scrolling fine on my end:
This is on an iPhone 6 as well.
You can check the screencast here.
I’m so glad you sent the screencast - thank you. Yes that is working… what I hope to be able to achieve, which isn’t working, is to allow users to use their fingers to zoom in on the text, then scroll. Pls try that and I think you will see that only the text that was in view prior to the finger zoom is shown in the subsequent scroll.
I’ll try to take a screencast too… never done that on the phone before 
Regards,
Rob
Ah, now I see what you mean! Unfortunately, that is virtually impossible. The problem is that the content of the section you want to have the feature is loaded via iFrame, and you can not alter the style of the code inside iFrame using CSS.
Unfortunately, you are out of luck in this case, the problem is the source of the iFrame. You can not force a feature inside a code which is loaded via iFrame. The iFrame tag itself which is available on the page can be altered but not the content inside.
I hope I could explain the situation here.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.