Mobile viewport

[thodorisgo]

For some reason on mobile view there is some blank space to the right side that causes page to overflow

[Jefferson49]

Thank you for reporting the issue!

It would be helpful if you could provide some more details. Which template do you use? Do you use a specific mobile template or a template that switches to a mobile view if the screen resolution is small? Do you use a specific extension/plugin for mobile views? Which Joomla version do you use?

If possible, it would also be helpful to post a screenshot.

[thodorisgo]

With pleasure i will provide the info you asked. I believe a url will also help. Here it is https://tinyurl.com/sexypoll I use ja blockk by joomlart it's the same template that has mobile viewport settings and i'm on the latest Joomla 4 version.

With Cassiopeia template the problem is gone

Kind regards

[Jefferson49]

Thank you for providing the URL. I can see the blank space on the right side if opening the URL in my mobile phone in portrait view. In landscape view, everything seems to be o.k.. I am not sure what you mean with "causes page to overflow".

At the moment, I have no idea about the reason for this behavior. On first try, I could not manage to open a browser development tool on my mobile phone. Without details about the generated HTML/CSS, it is difficult to understand the background. If opening in a PC browser, I could not observe the behavior. Do you know how to reproduce the behavior on a PC, e.g. with small resolution?

Additional question: Is the blank space behavior directly linked to the sexy polling plugin? Does the white space disappear after deactivating the plugin? Re-appear after activating?

[thodorisgo]

You can reproduce it on desktop with chrome console. After you open it press CTRL+SHIFT+M and refresh. Yes the Sexy polling is causing the page width to grow. On other posts where there is no poll this issue doesnt exist.

[Jefferson49]

Thank you for the hint how to reproduce in Chrome. If using the developer tools in chrome and inspecting the html/css, I can reproduce the blank space on the right side, but the sexy polling plugin seems to work correctly. Depending on the available screen resolution, the plugin creates reasonable width values and fits into the overall layout. However, the overall layout creates the margin on the right sight. Maybe, this results from the template. Another thing that looks suspicious is the "back" button on the lower right side, because it is exactly located in the empty space. This looks more like an issue with the template.

I observed another thing: If navigating to some other menu and afterwards navigating back to the page with the plugin, the empty space does not show up. However, in this case, the "back" button seems to be missing.

Although, the issue seems to be only related to this single page (with the sexy polling plugin), it would really help to switch the plugin on and off and see if the behviour changes. Hopefully, this will deliver some insights, if the issue is related to the plugin or to the template.

[thodorisgo]

When changing my default template to cassiopeia the right side padding is gone. So it seems that my template is causing the issue. Thank you so much for your time and effort.

[thodorisgo]

After some more investigation i noticed what was causing this issue. When using the shortcode to display the poll for a weird reason the code is getting messed up and it adds some extra block of text on the bottom of the page. And that block is overflowing the viewport and caused this problem. If i use the demo to diplay the poll instead of using the shortcode the issue is gone for good. Check this url to see the issue https://tinyurl.com/sexypoll3 there is some text that shows ", "author": { "@type": "Person", "name": "Reporter", "image":

[Jefferson49]

there is some text that shows ", "author": { "@type": "Person", "name": "Reporter", "image":

It is really difficult to understand for me. There is a div "data-eb-posts", which contains a script. The script seems to be from sexy polling. After the script, there is a section with <font ...>", "author" ...

<div data-eb-posts="" class="DS0327988045039034">
    <div data-eb-posts-wrapper="">
        <div data-eb-post-section= ...>
                    <script type="text/javascript">
                        <div class="polling_container_wrapper" ....>
                    <font _mstmutation="1" _msttexthash="9313447" _msthash="169">",
                         "author": {
                         "@type": "Person",
                         "name": "Reporter",
                         "Bild": "... .jpg"
                          }}
                    </font>

I do not understand how all things things are generated and interact. Maybe, the data-eb-posts div comes from the T4 framework you use and the script is used if you insert the code for the plugin. The text with "author ..." seems to be inserted afterwards, but is not related to the sexy polling plugin.

I am afraid that I cannot help.

[thodorisgo]

FYI this div is from the component Easyblog. Anyway as i mentioned using the module instead of using shortcode fixes the issue so it's all good. Kind regards