All-In-One Widget: Write Review Button destroys Web Design

Ask the Community General Questions
1

  • Issue description: In some resolutions the Write Review Button destroyes my web design and makes the whole design wider and horizontal scrollable. It depends on the label text on the button. I tryed several text lengh to solve the problem but it comes depending on text length and resolutions again. Also the label after click the button where to write review is sometimes shown half outside of the screen and not readable. Please solve the problem for design (or button design) not changed the container the widget is placed in.

  • Link to the page with the widget in question: https:://skiroller-store.com

1 Like
3

Hi @Tom_Scharf and welcome to Community :tada:

I see the issue and I am really sorry :pensive:

I’ve forwarded your request to our devs. I’ll get back to you once I receive any news.

Have a great day!

5

Hi @Tom_Scharf :wave:

Sure thing! Try this one and let me know if it helped :slightly_smiling_face:

[class*="ButtonBase__Ellipsis-sc"] {
  width: 50px;
}
6

Thanks… The width canged but it does not solve the problem. Seems its an other class which is responsible for the problems.

7

I am sorry about it!

Our devs are investigating the issue and, hopefully, they’ll come up with a solution really soon.

Please do not worry, I’ll keep you updated :slightly_smiling_face:

8

Hi @Tom_Scharf :wave:

Thank you for waiting!

Our devs have added these styles to the Custom CSS field to fix the issue with Write a Review button:

[class^='HeaderWriteReviewButton__Component-sc'],
[class^='HeaderContainer__Inner-sc'] [class^='Header__Info-sc'] {
  margin: 0 !important;
}

[class^='HeaderWriteReviewButton__Modal-sc'] {
  right: 0;
}

@media (max-width: 370px) {
  [class^='HeaderWriteReviewButton__Modal-sc'] {
    right: 0;
    left: 0;
  }
  
  [class^='HeaderContainer__Inner-sc'] [class^='Header__Info-sc'] {
    margin-right: 24px !important;
  }
  
  [class^='HeaderWriteReviewButton__Component-sc'] {
    margin-top: 8px !important;
  }
}

However, I see that you removed the widget from the website.

Could you please specify if something went wrong?

9

Works like a charm! :love_you_gesture:
No I just removed the rating header.
Now we wait for the facebook reviews fowarding working also from mobile sites :innocent:

1 Like
10

Happy to hear that you are good now!

As for the Facebook Reviews issue, I see that my colleague Marina has already contacted you.

As Marina said, unfortunately, this functionality isn’t supported at the moment. I am so sorry about it.

We have such a request in our Wishlist. Please vote for this feature to get a notification upon its release.

Have a great day :slightly_smiling_face:

11

Still one question about the code… between some classes there are no comma - thats right?

Between [class^=‘HeaderContainer__Inner-sc’] [class^=‘Header__Info-sc’]

1 Like
12

@Tom_Scharf There is should be comma. You are right!

If you have any other questions left, please let me know. I’ll be happy to help!