TABS editing / responsiveness : Floating Region on tablet and phone

Hi there
1-How can I have text displayed in a responsive way in tabs.
I copied the tabs-panino preset CSS to my theme ( called it pricetabs in my theme COIFFURE A DOMICILE ) but it does not display text in a responsive way on a mobile . Is the anything I forgot to do ?
2- I am experimenting floating region ... It displays only on desktop ! can I get it on tablet and mobile ? I did not see a show icon in responsive mode !
3- can you confirm that theupfront slider element is NOT responsive and truncate images ... ( do you know of any responsive slider I could use instead )
4- Is there a way to hide a region when in Desktop Mode ?
Thanks have a nice day
Thierry

  • Patrick

    Hey there dubernet

    I hope you're well today!

    1) By default, tabs will simply stack themselves one on top of the other when on smaller devices. That default behavior can be seen in the Panino theme. The CSS you had copied appears to be functioning in your theme as it does in Panino. Is there any other behavior you wanted to acheive? If so, can you provide some additional details, pehaps a mockup?

    2) Sorry, can you explain what you mean by a "floating" region?

    3) Indeed, the Upfront slider does not resize vertically on smaller screens. However, any slider plugin that uses shortcodes or widgets can be used instead. Simply add the slider shortcode to a text element in any region, or select the slider widget from the Widgets in the Upfront editor sidebar. Note however, that every slider behaves differently. See an example of Revolution Slider on this test site: http://pcwriter.biz/

    4) Hiding a region on large screens only is not a built-in feature. But it can be easily be done by adding a media query to the global CSS area to hide the specified region on screens above a specified width.

    • dubernet

      Hi Patrick
      sorry about the delay answering ...
      1- The text in the tabs does not wrap like it does in Panino when I dosp[lay it on a mobile telephone.
      What did I miss?
      2-If you go in the upfront builder and right click on the region "corner , it proposes to create a floating region . I would like to have that on tab and mobile screen ... is it possible??
      ( see aatached picture)
      I did that but I do not see any effect when I do not us the Desktop view ....

      3- It is a bit disappointing because WPMUDEV did write it was ( https://premium.wpmudev.org/blog/most-popular-free-wordpress-slider-plugins/ )
      WHat is the best you can advise if I want to read pictures from a folder automatically in the slider . Do you know any ? .....
      4- Thanks for the answer . My knowledge of CSS is unforunately not good
      So I keep it in mind ... may be it will come as an option in a further release ... it would be great to be able to make 3 different independant designs, one for each of the screen size, and in the same theme

  • Patrick

    Hi again dubernet

    1) Oh, silly me, you meant the text inside the tabbed content areas, not the tabs themselves. It's not wrapping because you had selected Preformatted as the the text format. That intentionally prevents text from wrapping and is intended to be used only to display code. For text elements where you want text to wrap automatically, select anything but the Preformatted option. I just changed that for you. :slight_smile:

    2) Ah, that floating region. That is displayed on desktop mode only by design. They cannot be closed like a popup ad or something, so not desirable to have them on mobile devices as they could overtake the entire screen.

    3) Ah, there is a difference between responsive and fluid. Responsive means that it will resize proportionately to whatever dimensions you define for each of your responsive breakpoints. So on desktops (1081px and above), it will display at size "A", on tablets at size "B" (571px to 1080px), and on teeny-weeny devices at size "C" (570px or less). You can see an example on my test site where I've set an Upfront slider to proportionately smaller heights for the different breakpoints: http://upfront.pcwriter.net/

    4) You can make 3 different designs, one for each breakpoint. But they all depend on regions & elements being present on the desktop size. Once you've added your regions & elements to your layout, enter responsive mode and hide the ones you don't need or want on those smaller sizes. If you want to hide stuff on the desktop size, add them there anyway, then hide them with a media query added to the custom CSS. If you need help with that, just let us know, and we'll gladly guide you through it (it's really not that complicated). :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.