Centering a third party widget in a column #20195
Replies: 5 comments 1 reply
-
I have tried absolute positioning and managed to move it to the right position for the three responsive views. However, I do not like this solution as I am sure on some screens it will not look right and Elementor itself suggests do not overdo this as it can cause problems. I have removed the absolute positioning now. |
Beta Was this translation helpful? Give feedback.
-
Just trying things almost randomly, and I think I have found a solution. Edit the HTML element | Advanced | Layout and then set width to custom. The widget just centred itself. Nothing else needed. So far it seems to have centred it on all three responsive views. Hope it continues to work. Hope this helps somebody else. |
Beta Was this translation helpful? Give feedback.
-
Unfortunately, that has not stuck and I couldn't get it to work again. Weird. I have gone back to using absolute positioning and will try it on lots of different devices. |
Beta Was this translation helpful? Give feedback.
-
why not use one column and simply add .ftb_widget {margin: auto;} Nothing todo with Elementor but simple CSS 😉 |
Beta Was this translation helpful? Give feedback.
-
Thanks very much, Michael. I am a real novice when it comes to css. I changed it last night and it worked like magic in elementors environment on all three responsive views. Yippee. It also worked on my PC using firefox browser. For some reason it did not work on my mobile so was rather puzzled. I have been investigating some more hence the delay in replying. I found it does work on my pixel 6 with Bing but I normally use Firefox. It does not centre the widget on my pixel 6 running latest android and the Firefox browser. However, it nearly fills the width of the screen so does not look too bad. I have tried it on some of the testing sites that use different devices, and it looks centred. So in conclusion. Thanks very much it will work for nearly every situation so that's good. Problem solved well enough. I am not sure responsive viewing works perfectly on every device and browser anyway. |
Beta Was this translation helpful? Give feedback.
-
I am building a new website and am having trouble positioning a third party widget. The blue and white freetobook widget is towards the bottom of the page.
https://devsite10.co.uk/wp/drifter-seafront-holiday-cottage-filey/
I have put the html element of the widget in the central column of a 5 column inner section. The html element has script and div code parts.
The div code of the widget has align=”center” in it, but the widget still ends up at the left hand edge of its column. By using 5 columns it is roughly in the middle in some screen sizes but not all. I have spent a long time trying to use the custom css section to make it move to the centre of the column but with no success despite using all sorts of help on the Internet. Any help or suggestions anyone can give greatly appreciated.
Beta Was this translation helpful? Give feedback.
All reactions