Breakpoints

Discussion in 'Presentation Panels' started by Ivo Aats, Apr 5, 2016.

Tags:
  1. Ivo Aats

    Ivo Aats Member

    9
    0
    I was wondering if there's a solution of adding breakpoints with the Presentation Panels.
    Once I add breakpoints it seems to go nuts. I would like to control the text in certain breakpoints.
    Thanks
     
  2. Alex Wiley

    Alex Wiley Product Specialist / Widget Development Staff Member Advisory Group

    164
    51
    Hey @Ivo Aats

    Could you perhaps explain what you mean a little more? I popped into Muse and checked this out and it appears to be working fine on my end. I have attached a demo Muse file for you to check out, there are three breakpoints on my site and it's working great!

    Find the file here: https://www.dropbox.com/s/9u4sjiqlm66fk4k/Presentation Panels .muse?dl=0

    Let me know if you have any more information; thanks!
    Alex
     
  3. Ivo Aats

    Ivo Aats Member

    9
    0
    Hi Alex,

    Thanks for your respond and the dropbox file.
    At this stage we have a fluid site, www.gedandtarz.co.nz/regenerate.
    As you can see the headings and the text are aligned left (Home page). What I'm trying to
    do is to control the the size both of the headings and text. Once I ad a breakpoint
    the widget creates an extra panel and deletes another one and or shuffles the order of the panel.
    Hopefully is makes sense.
    Thanks,
    Ivo
     
  4. Ivo Aats

    Ivo Aats Member

    9
    0
    Hi Alex,

    The titles are SVG's and it seems if I change the size in the breakpoints it disappears. Does it work with SVG or is
    it better to use live text or converted it into a PNG?
    Thanks,
    Ivo
     
  5. Alex Wiley

    Alex Wiley Product Specialist / Widget Development Staff Member Advisory Group

    164
    51
    Hey,

    Firstly; really great looking site, it looks real clean.

    I would recommend using plain text, it could be the SVG's that are causing the issue. But not only from the fact that it may be breaking it, more so to do with the fact that using plain text will greatly increase your SEO.

    Thanks,
    Alex
     
  6. Ivo Aats

    Ivo Aats Member

    9
    0
    Hi Alex,

    Thanks for your response. I quickly changed the SVG into live type and that seems to be working.
    Now I have the issues that the image isn't responding to the correct size. It cut of the picture in
    the desktop version and doesn't respond to the mobile version. I have created an url for you to look
    at so that you can see what is happening. There's a breakpoint at 768 and 325. Sorry for all the
    questions and testing this widget to the limit. www.gedandtarz.co.nz/RCrespons
    Thanks
    Ivo
     
  7. Ivo Aats

    Ivo Aats Member

    9
    0
    Sorry me again. If there's is no text in the panels it responsive nicely for every device. I have tried several things
    to get the text right for the breakpoints still no luck. I used a child, set text on non responsive and if I set the text on responsive
    it goes all over the show and then the image doesn't respond for the devices.
    Thanks
    Ivo
     
  8. Shantaram Marley

    Shantaram Marley New Member

    2
    0
    I'm having similar issues. I built a site with several svgs, but if I add any breakpoints the design falls apart in the browser. Pages get mixed around and the functionality gets broken.

    I tried using your demo file. It works great as you have it set up with a simple text box, but once I added other elements to the page they don't show up on screen. The only things that does show up is the main state button pages and the text. Using an png instead of svg didn't fix the problem.

    Would love to have this resolved as it's a great widget, but without breakpoints it's not very useful for me.
     
  9. marcelt

    marcelt Active Member

    43
    0
    just to piggy back on this thread, I recently trying working with presentation panels with a couple fluid breakpoints. I didn't experience the above reported issues, but I did have a problem with one child 'state button composition' refusing to center properly. No matter what I did it always sat to the right. I assumed after extensive debugging that this widget doesn't support breakpoints, so I went to a simple fixed layout and everything worked fine, however now I'm seeing a lot of threads with people trying to work in this mode & I'm confused.

    Can I, or Can't I use Presentation Panels in a fluid/fixed responsive site?

    A secondary question, how come I can't align the child objects left/right center?
     
  10. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,339
    250
    marcelt, one thing that gets overlooked when discussing this widget and responsiveness is that this widget was designed for Desktop use only.
    It will act responsively, to a certain point. For example, if I set up a page with BP's at 1200, 960 (typically Desktop sizes) you can see the widget responds nicely to the two sizes. Even when you place , lets say some text in a State button (with no child designation at your desired left centered).
    But if you also have a BP at 768 (typically a tablet size), you'll see you start to lose that responsiveness.
    I hope this helps a bit.
    Dj
     
  11. Jeremei

    Jeremei Well-Known Member

    745
    97
    Marcel!
    You can use Presentation Panels in fluid responsive site at least in this way:
    1. Make fluid breakpoints e.g. 1200 px, 960 px, 768 px and 480 px.
    2. Turn double arrow in breakpoint panel to right.
    3. Drag the state button to canvas (remove text and dot from inside) and set it to responsive with width in all breakpoints. Stretch the state button to 1200 px and set the height e.g. 750 px.
    4. Open Presentation Panel widget icon and write to Unique Panel ID box and also to Panel Graphic Style box panel 1.
    5. Activate state button and open Graphic Style panel and add a new graphic style name panel1.
    6. Copy the state button and drag the copy down. Do not yet connect state buttons to each other, keep them separately.
    7. In each breakpoint you must separate state buttons from each others to avoid "vacuuming phenom".
    8. Copy Presentation Panel widget icon and write there to Unique Panel ID box and to Panel Graphic Style box panel2. And to Pagination Dot Hover Display Title box write Panel Two.
    8. Activate state button 2 and open Graphic Style panel and add a new graphic style name panel2.
    9. Fill state buttons (panel1 and panel2) with images if you want.
    10. Make a text box (responsive with width) outside the state buttons and write to text box e.g. Panel 1 and give it a name in graphic style panel e.g. child1.
    11. Write to Child Panel widget to Graphic Style box child1 and to Parent Panel Graphic Style To Place Within panel1 and select e.g. Centered in Child Panel Position Within Screen.
    12. After that move the text box (Panel 1) into state button panel1 bypassing state button 2 (panel2) and connect state buttons.
    13. Preview in browser.

    In this way I succeded to show Presentation Panels in fluid responsive site. Good luck! ;)
     
    marcelt likes this.
  12. marcelt

    marcelt Active Member

    43
    0
    Thanks as usual @Jeremei and @DjHerold .... I'll try this.

    DJ, I'm curious about your comment "with no child designation at your desired left centered". It seems to be that I can center it in my screen, but isn't the purpose of the child panel to ensure it centers on everyone's screen? It's my understanding that Muse currently doesn't support horizontal alignment, hence the attractiveness of this child panel.
     

Share This Page