Hello, when I use the features widget on my website I have problem in mobile version.
On my computer everything works perfect but on the mobile phone fails responsive and shows a sidebar on the right and I scroll horizontally across the screen.
I use the circle icon and three features in a single row and Pagespeed Insights shows me this problem:
Adapting the content to the graphics window
The content of the page is too wide for the graphics window and the user has to scroll horizontally. Adapts the content of the page to the graphics window to provide a better user experience.
The content of the page is 385 pixels wide in CSS, but the graphics window has only 375. The following items are outside the graphics window:
The element FormaciónEstud … fil academic! is outside the viewport.
The element Profesionalida … my Portfolio! is outside the viewport.
The element ComunicaciónMi … isit my Blog! is outside the viewport.
My website is www.juangalera.com
Please I need help with this issue. How I can solve it please? Regards.
Hi Juangalera
Thanks for reaching out.
I’m not quite sure what’s causing this problem. You can try hotfixing by adding the following to a Custom CSS plugin like SiteOrigin CSS:
@media (max-width: 480px) { .sow-features-list .sow-features-feature { margin: 0 auto; max-width: 375px; } }Hi Andrew! Thanks for the help but unfortunately this has not solved anything.
I tried the CSS code and still have the same problem.
Can I do any more to solve the problem?
I am worried because Google is penalizing me for Responsive design and I would not like to change the design of the web.
http://www.juangalera.com
Thanks. Regards.
Please, try the following instead:
@media (max-width: 480px) { .sow-features-list.sow-features-responsive .sow-features-feature { margin: 0 auto !important; max-width: 375px !important; } }Hi again Andrew,
Thanks for help but new code didn’t solve the problem.
The graphics window is displayed in the same way and now Pagespeed shows:
Before applying the new code showed three errors and now only one but the score has declined from 70/100 to 63/100 in mobile and from 80/100 to 71/100 in computer and shows problems with compression.
Google will penalize me even more than before.
Can I do any more to solve the problem?
Thanks. Regards.
If I disable the plugin SiteOrigin Widgets Bundle the graphics windows works correctly. The problem is in features widget.
Message showed is:
The content of the page is 385 pixels wide in CSS, but the graphics window has only 375. The following items are outside the graphics window:
div class=”sow-features-l…res-responsive”>FormaciónEstud…isita mi Blog! /div is outside the viewport
Omitting the signs to display correctly here
My website: http://www.juangalera.com
Can you please, confirm that the last Custom CSS rule I sent is still saved in your Custom CSS plugin? I’ll need to inspect the problem with the rule saved to see why it isn’t working. Thanks.
You can see it here:
Thanks. Regards.
Thanks for confirming. I think our team has managed to locate the problematic rule. It’s hard to tell where this rule is coming from because all stylesheets are being merged. Please, could you clear the cache of your Autoptimize plugin and then deactivate it so we can see more.
Hi again Andrew.
DONE!
Have you touched something in the configuration? Now I can’t see new post and new comments on my computer. I have to change of browser to watch them. The same problem happens on all devices
This problem didn’t happen yesterday.
Now the score on Pagespeed on mobile version is 67/100 and computer version is 76/100 (before 63/100 mobile and 71/100 computer although initially it was 70/100 mobile and 80/100 computer).
Thanks. Regards.
Thanks for the update :)
As far as I know we haven’t ever logged into your site. There isn’t any way for us to alter your WordPress installation without being logged in.
Not being able to see new posts or comments on the front end of your site hints to a caching problem. Clearing cache both in WordPress based caching plugins and your browser might be ways to resolve.
To try and resolve the horizontal scroll bar challenge, try editing the row in question, click the Layout tab on the right and change the row layout to Standard. Let us know how that goes.
I have tried the three design options row (standar, 100% width and extended width) and the problem continues.
With the extended width the problem gets worse and with the other two options the problem remains the same.
I cleared cache in Fastest Cache plugin and I have disabled the plugin. Plugin is disabled but the problem continues. Can it help to you to solve te problem (plugin Fastest Cache disabled)?
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to UsersAdd New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the Send Password field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
This is a private message.
DONE!
Confirm me please if you have access to the account.
This is a private message.
All is OK? I just received a message with an internal note and a password.
Thanks, we have access.
A quick side note, there is an error in your Edit CSS section that you might want to fix:
p { padding: .5em 0 .5em 0 h1, h2, h3, h4, h5, h6, p {; font-family: 'Open Sans', sans-serif, arial; }Not quite sure what you wanted there, perhaps:
p { padding: .5em 0 .5em 0; } h1, h2, h3, h4, h5, h6, p { font-family: 'Open Sans', sans-serif, arial; }It’s worth noting that your theme does produce a horizontal scroll bar between 869px and 768px without Page Builder being used. You can see that happen here: http://www.juangalera.com/home-page-test/.
Your theme adds a negative margin of 15px to rows. When I remove this the problem resolves. Unfortunately, this aspect of your theme doesn’t work well with Page Builder’s own grid engine.
At Appearance > Edit CSS I’ve removed the Features widget margin below 768, this seems to have resolved the issue. It’s a hotfix and won’t prevent this from perhaps occurring with other Page Builder widgets. You’ll need to see how it goes.
Thank you very much for your help Andrew.
It seems that the problem is solved.
I have also modified the css code. Thanks for the warning.
Your attention has been 10/10. Greetings.
For sure :) Glad to hear this helps for the moment. All the best with your site moving forward. We’ll chat again if anything else comes up in the future.
All the best.