Mobile responsive issues

StatusIDPriorityType
Closed30687NormaluSquare WP
Profile Reply
dlmweb Client

Hello Shindiri,
I really like your USquare plugin.  You can see my project in development here –
https://visiontolearn.org/dev/

All works great and displays well on a desktop, with a content width of 1200px.  Each item is 400px wide, so there are 3 items per row.

Problem:  At 1200px, and 1023px, the USquare doesn’t scale down; instead it just overflows off the viewport.

At 960px and below, the breakpoint settings kick in and all looks fine.

What can I do to address the mobile responsive issues between 1200 and and 960px?  My preference would be to add css for percentages, 16.6%.   Or, at the very least create a breakpoint at 1023. 

Thoughts?  Suggestions? 
Thank you.

How can chan

Replies

User Description Posted On
Shindiri Support team Administrator

Hi,

did you consider responsive settings you have at your disposal to find the right setting you need. For example, using non default width of 400px (default is 320px) requires adjusting the number of items in the row, so if you set 2 items per row instead of default 3 you will not have flowing of items out of viewport.

Check this screenshot https://prnt.sc/h0x7ty

Can you explore that responsive settings before adding new break points please?
If you already tried to do it unsuccessfully you can ask for assistance with it from our support team. You can reach them via email support@shindiristudio.com

Best regards,
Shindiri Studio | http://www.shindiristudio.com/
dlmweb Client

The breakpoints you show in your screenshot work fine.

The problem is that there is no breakpoint higher than 960px.   960 is good for ipad vertical.

On an ipad horizontal the content overflows off the screen -
https://visiontolearn.org/dev/wp-content/uploads/ipad-horizontal-screenshot.jpg
dlmweb Client

Hello Shindiri,

I don't like editing core plugin files, but I was able to edit these three files to add a breakpoint for 1200px.
/pages/usquare_edit.php
/pages/usquare_functions.php
/pages/usquare_settings.php 

All appears to be functioning fine, and the results looks as intended on ipad horizontal.  I know this isn't update proof which is a problem.  I would like to request that you add this breakpoint as a permanent part of your code in your next release.   ipad horizontal is an important breakpoint.

I now have a different question I hope you can answer.  In the extended height window there is roughly 60px at the bottom of extra space which should not be there.  How can I remove that?    This screenshot will better explain what I'm talking about - https://visiontolearn.org/dev/wp-content/uploads/extra-space-extended-height.png

Thank you.  Again, the plugin is terrific!
Shindiri Support team Administrator

Hi,

next update of plugin is planed to have a bigger responsive adaptions. Yes, ipad horizontal will surely be addressed there.  now about that second question can you recheck that screen you sent us as it seems like its not working for us. We are not sure what white space you want to remove.

Thank you.

Best regards,
Shindiri Studio | http://www.shindiristudio.com/

× This ticket is closed.