Highlighted

How to center a widget in responsive design?

Explorer ,
May 25, 2017

Copy link to clipboard

Copied

The only resize options available on the widget is None or Stretch to Browser Width.

I've played around with grouping transparent rectangles in a variety of attempts to get a widget to remain centered on my page as it narrows in width.

I've put a transparent rectangle above the widget, to the left and right of the widget (both grouped and not) and I built a group with above, left and right and all have failed to keep the widget centered.  Sigh!

Am I right in my belief that only objects that share the same resize setting are group-able? If so, Even though the widget shows up in Layers under the group, obviously it does not behave as I had hoped.

Pinning isn't available because I want the design to work in pads and phones so unfortunately that's not the solution (looks great in Design mode though).

Searched these boards and can't find an answer.

View the test site at www.songseeds.com/a    The widget is visible by going to the page for the artist named "songseeds."

Thanks

              ! ! ! CAUTION: IF TESTING YOUR SITE ON A 3RD PARTY SERVER ! ! !

Rather than publish on Adobe's Business Catalyst service I figured I would just upload my test site to my own hosting service (godaddy.com).  I have cPanel hosting.

I didn't want my work to go "live" so I put a "test" directory inside my "/public_html" directory and uploaded my site files there.  Everything looked fine until I began using a widget. In this case, an audio playlist widget.

Songs played just fine, the images looked fine but I could NOT get the widget to display horizontally centered even though it was pinned to be centered on the page. 

Baffled by the problem and having exhausted every other thing I could think of, I decided I'd put it up on the Business Catalyst service.  THERE, the widget was centered JUST FINE.  This caused me to look into my hosting procedure and finally to the SOLUTION.

I uploaded my site files directly into the /public/html directory and THERE the widget was centered JUST FINE.

Therefore, I believe that putting my site files into a directory one level below the /public_html directory put those files out of the path of some server utilities that they need to work correctly. 

Thanks to the community experts who tried to help me solve this.  Special thanks to fotoroeder (Uwe) and Pavel Homeriki for coming up with some good suggestions.

Views

785

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to center a widget in responsive design?

Explorer ,
May 25, 2017

Copy link to clipboard

Copied

The only resize options available on the widget is None or Stretch to Browser Width.

I've played around with grouping transparent rectangles in a variety of attempts to get a widget to remain centered on my page as it narrows in width.

I've put a transparent rectangle above the widget, to the left and right of the widget (both grouped and not) and I built a group with above, left and right and all have failed to keep the widget centered.  Sigh!

Am I right in my belief that only objects that share the same resize setting are group-able? If so, Even though the widget shows up in Layers under the group, obviously it does not behave as I had hoped.

Pinning isn't available because I want the design to work in pads and phones so unfortunately that's not the solution (looks great in Design mode though).

Searched these boards and can't find an answer.

View the test site at www.songseeds.com/a    The widget is visible by going to the page for the artist named "songseeds."

Thanks

              ! ! ! CAUTION: IF TESTING YOUR SITE ON A 3RD PARTY SERVER ! ! !

Rather than publish on Adobe's Business Catalyst service I figured I would just upload my test site to my own hosting service (godaddy.com).  I have cPanel hosting.

I didn't want my work to go "live" so I put a "test" directory inside my "/public_html" directory and uploaded my site files there.  Everything looked fine until I began using a widget. In this case, an audio playlist widget.

Songs played just fine, the images looked fine but I could NOT get the widget to display horizontally centered even though it was pinned to be centered on the page. 

Baffled by the problem and having exhausted every other thing I could think of, I decided I'd put it up on the Business Catalyst service.  THERE, the widget was centered JUST FINE.  This caused me to look into my hosting procedure and finally to the SOLUTION.

I uploaded my site files directly into the /public/html directory and THERE the widget was centered JUST FINE.

Therefore, I believe that putting my site files into a directory one level below the /public_html directory put those files out of the path of some server utilities that they need to work correctly. 

Thanks to the community experts who tried to help me solve this.  Special thanks to fotoroeder (Uwe) and Pavel Homeriki for coming up with some good suggestions.

Views

786

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

I cannot see any issue. Could you be more precise about your issue?

Pinning is available but not necessary all the time

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 0
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

I've been told I should avoid pinning below 1024.  My breakpoints are 1200 and 640.  So pinning is hardly usable if that is true.

From the home page scroll down to the second block "songseeds" and click the button to go the page with the widget.

Refresh your browser and look again please.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 0
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Ahh, I see this discussion board offers links!

Go to the page with the problem widget HERE.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

If you do now place a download button to your latest file, link this button to your file, upload this file to BC, we could have a look.

Waiting …

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 0
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Hi Uwe

You saidL "Upload this file to BC."  Not sure what you mean.  What is BC.

I think you're wanting to look at the .muse file.

Here it is:

songseeds10.1.2.muse - Google Drive

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

It looks like this:

Bildschirmfoto 2017-05-26 um 00.40.54.png

From there you could upload to "whatyouwant.businesscatalyst.com".

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 0
Explorer ,
May 25, 2017

Copy link to clipboard

Copied

Uwe, I'm sorry.  I don't understand what you're asking.  I think BC might mean business catalyst?  I've never used it!

Were you able to observe the behavior on the website?

songseeds

Did the .muse file help?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

Yes I did so far, but unfortunately have no solution for now. These two grey containers are for text or pictures?

I could only pin the video to the center of the canvas.

Your issue is one reason to stay with fixed width breakpoints as much as possible until 768 for tablets and mobiles.

For some reason the video does not respond to the containers – sorry.

Publish on the top right has drop down:

Bildschirmfoto 2017-05-26 um 01.20.26.png

When you check Business Catalyst you can upload to check on a real ftp-server.

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 1
Explorer ,
May 26, 2017

Copy link to clipboard

Copied

Hi Uwe

It's looking like Muse has no method of centering a widget.  Seems like such a basic requirement!  This is an audio player widget.  I have not loaded it with any songs so you're just seeing the shell.

I put the two grey containers there thinking they would keep the widget centered as the width narrows since they are set to resize responsibly.  The widget appears to just ignore them as you can see. 

Staying with fixed breakpoints and pinning the widget would solve the problem but only down to 1024.  @pavel_homeriki said to avoid pinning below that.

At this point it looks like I'm stuck with fixed breakpoints even with tablets and mobiles.  Not what I wanted!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 26, 2017 0
Adobe Community Professional ,
May 26, 2017

Copy link to clipboard

Copied

Please tell me, why am I able to pin the widget. You do not need these grey rectangles.

You can watch this: songseeds

Pinning to the canvas is not the biggest issue. Talking about Pavel Homeriki​, you must tell the whole truth: he also recommends. to use fixed width breakpoints until 768. As far as I know, there´s no other way to keep something centered in a fluid width layout than to pin it to the center of the canvas or container ( not to the browser! )

Staying with fixed breakpoints and pinning the widget would solve the problem but only down to 1024.  @pavel_homeriki said to avoid pinning below that.

Normally it is recommended to use fixed width breakpoints for 1200 | 960 | and 768 (fixed width and fluid width).

Please watch this: Muse not redirecting to tablet version  from here

Bildschirmfoto 2017-05-20 um 23.50.36.png

Go for it

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 26, 2017 0
Explorer ,
May 26, 2017

Copy link to clipboard

Copied

Hi Uwe,

I looked at your BC site.  Since the grey rectangles weren't working, I deleted them.  I see you were not able to get the widget centered below the 640 breakpoint.  If I use Pavel Homeriki advice and use fluid at 768 and below, it won't help since I cannot use pinning to center the widget at those widths.

On one of the previous tests I did, I had the recommended fixed breakpoints at 1200 and 1024 but also set 768 fixed with a minimum page width of 480.  When I view it on my phone, the home page is too wide (it scrolls left to right) but my child page (with the widget) scales perfectly AND the widget is centered ! ! !  Why the child page scales correctly but not the home page does not make sense to me.  They both have the exact same breakpoints, all fixed. 

If I lower my minimum page width to 320 (what everyone recommends) and scale the widget to fit in Design mode, it displays too wide in preview as though I didn't scale it.  Perhaps the widget cannot be scaled down to 320 width.  I have emailed support at musetemplatespro (who makes the widget) to see if I can get any answers since there is nothing in the documentation. 

I'll post any updates so the community can benefit once I find out more.

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 26, 2017 0
Guide ,
May 27, 2017

Copy link to clipboard

Copied

On one of the previous tests I did, I had the recommended fixed breakpoints at 1200 and 1024 but also set 768 fixed with a minimum page width of 480. 

The minimum width can be set only to the fluid breakpoint. At a fixed breakpoint, this makes no sense. The width of the fixed breakpoint is the minimum and maximum width. That's why the breakpoint is called fixed. At a fixed breakpoint, there is simply no such parameter as the minimum width.

17bc660a88.png

Maybe my Google translator is not too capable of understanding. In order to make it clear:

Do you want to fix the video player in a flexible breakpoint in the center, that it would always remain in the same place when scrolling? Or you just want to fix the video player on the center of the page, and it will moving when scrolling up / down?

If the first, then this is not worth doing for mobile devices.

If the second, then it's very simple.

3a42794abd.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2017 0
Adobe Community Professional ,
May 27, 2017

Copy link to clipboard

Copied

songseeds.com  schrieb

I see you were not able to get the widget centered below the 640 breakpoint.  If I use https://forums.adobe.com/people/Pavel+Homeriki  advice and use fluid at 768 and below, it won't help since I cannot use pinning to center the widget at those widths.

Good Morning. That it is not possible to center the audio widget below 640 must have to do with the widget and maybe some padding?. I put an extra layer below the audio and centered it as well, just to show, that it normally works.

Who is the inventor of the audio widget? If it is a 3rd party, ask them if it is muse we should ask ankushr40215001​ or Preran​?

I uploaded a new songseeds.businesscatalyst.com

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2017 0
New Here ,
May 27, 2017

Copy link to clipboard

Copied

d8452cc9488e48afbb6590c8d725feb2.pngTell me or give me a link where I can ask a question or ask for help in solving the problem! At me such problem, that at site opening in adobe muse for its editing jumps out here such error and applications it is closed!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2017 0
Adobe Community Professional ,
May 27, 2017

Copy link to clipboard

Copied

Best way, if you start a new thread. At the moment (translation) I have no clue about your issue.

I guess nobody has, except russian forum members. Maybe Pavel Homeriki​ or Preran​​ orankushr40215001​​?

In most cases it is best to provide at least a screenshot (what you did ) or give us a .muse.

Reduced as much as possible to inspect without too much time-consuming.

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2017 0
Explorer ,
May 27, 2017

Copy link to clipboard

Copied

Hi Pavel -  Big holiday in the US this weekend so I've been away.

I am trying to keep the widget horizontally centered in a fluid layout usable with tablet & phone.

Here you can see I've moved the browser width control halfway between breakpoints and the widget is shifted to the right of center.  I'm at around 870px at this point so pinning should not be used as you recommend.  So I don't know what other tool I have in order to keep this widget horizontally centered.  It is an audio playlist widget - the image is a photo.

View it online at:

songseeds

grab.jpg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2017 0
Explorer ,
May 27, 2017

Copy link to clipboard

Copied

Hi Uwe - The widget inventor is musetemplatespro.com.  I have emailed them requesting info.  They provide very little documentation online.

I'll update this thread so the info is public if I discover something.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2017 0
Guide ,
May 27, 2017

Copy link to clipboard

Copied

Hi. It is not recommended to use this pinning.

aef798a81c.png

But another pinning is a special pinning that only works at the liquid breakpoint. And it is recommended.

a4c073324b.png

Read carefully my post above.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2017 0
Explorer ,
May 28, 2017

Copy link to clipboard

Copied

Pavel -  Thank you for the information about pinning.  Here is what I understand:

- no top/bottom browser pinning below 1024 (fluid or fixed)

- pinning to left/center/right page (or container) is allowed (fluid or fixed) at all breakpoints.

Correct?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 28, 2017 0
Most Valuable Participant ,
May 28, 2017

Copy link to clipboard

Copied

another work around to center content is to use a lightbox because they always 'center' to the browser, no matter what device.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 28, 2017 0
Explorer ,
May 28, 2017

Copy link to clipboard

Copied

              ! ! ! CAUTION: IF TESTING YOUR SITE ON A 3RD PARTY SERVER ! ! !

Rather than publish on Adobe's Business Catalyst service I figured I would just upload my test site to my own hosting service (godaddy.com).  I have cPanel hosting.

I didn't want my work to go "live" so I put a "test" directory inside my "/public_html" directory and uploaded my site files there.  Everything looked fine until I began using a widget. In this case, an audio playlist widget.

Songs played just fine, the images looked fine but I could NOT get the widget to display horizontally centered even though it was pinned to be centered on the page. 

Baffled by the problem and having exhausted every other thing I could think of, I decided I'd put it up on the Business Catalyst service.  THERE, the widget was centered JUST FINE.  This caused me to look into my hosting procedure and finally to the SOLUTION.

I uploaded my site files directly into the /public/html directory and THERE the widget was centered JUST FINE.

Therefore, I believe that putting my site files into a directory one level below the /public_html directory put those files out of the path of some server utilities that they need to work correctly. 

Thanks to the community experts who tried to help me solve this.  Special thanks to fotoroeder (Uwe) and Pavel Homeriki for coming up with some good suggestions.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 28, 2017 0
Adobe Community Professional ,
May 28, 2017

Copy link to clipboard

Copied

Good to know, strange though, what does ADOBE say to this?

Great that it works now.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 28, 2017 0
Most Valuable Participant ,
May 28, 2017

Copy link to clipboard

Copied

songseeds.com  wrote

Therefore, I believe that putting my site files into a directory one level below the /public_html directory put those files out of the path of some server utilities that they need to work correctly.

correct... thats why most good widget makers have to give you the working scripts as well when you download a 3rd party widget, just in case you need them

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 28, 2017 0
Adobe Community Professional ,
May 28, 2017

Copy link to clipboard

Copied

Ussnorway  schrieb

songseeds.com   wrote

Therefore, I believe that putting my site files into a directory one level below the /public_html directory put those files out of the path of some server utilities that they need to work correctly.

correct... thats why most good widget makers have to give you the working scripts as well when you download a 3rd party widget, just in case you need them

Since I used only free widgets I have neither seen these working scripts, nor did I ever had to use one.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 28, 2017 0
Most Valuable Participant ,
May 28, 2017

Copy link to clipboard

Copied

yes I pretty much only use Adobe BC now so this doesn't become an issue for me either

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 28, 2017 1