Forum Support

Shape 5
October 25, 2021, 12:56:24 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Sign Up form breaks on certain widths.  (Read 423 times)
IvesFilm
Jr. Member
**
Offline Offline

Posts: 49



« on: July 07, 2014, 08:55:41 AM »

Certain widths break the account creation form. Was able to duplicate this problem on your demo page. Any chance at a quick fix?

Normally wouldn't be a problem except..... well the iPad uses that width in portrait mode (and landscape mode that form has issues as well).

Browser is chrome
« Last Edit: July 07, 2014, 10:25:31 AM by IvesFilm » Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: July 08, 2014, 07:48:34 PM »

Hello,

There's about a 1 to 5 px width where this will happen in some browsers, but not all. It's a Vertex function that moves the login and register modules from the s5 box to the mobile areas. Javascript width detections are not 100% accurate cross browser so there's a chance you'll hit a small area where it does this.

However, because tablets are a static size and the screens don?t resize this shouldn?t be an issue. You can only potentially see it when debugging on a desktop browser since those resize. I don?t know of any tablets where it?s fallen into the small px range where the issue can be seen on an actual tablet.

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
IvesFilm
Jr. Member
**
Offline Offline

Posts: 49



« Reply #2 on: July 09, 2014, 07:39:12 AM »

iPad vertical. A very common use case scenario.
Nexus 7 horizontal.

http://iveswebsolutions.com/Video/pixeltest.mp4

Not sure about 1 to 5px. Looks closer to 220px. Video included to show rubber banding behavior from bottom.

Internet Explorer doesnt have the rubber banding effect, but the affected pixel ranges are fairly equivalent.
« Last Edit: July 09, 2014, 07:51:01 AM by IvesFilm » Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: July 09, 2014, 07:29:50 PM »

Hello,

Thanks for that update. I will have the designer take a look and release an update for the files.

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #4 on: July 11, 2014, 12:46:40 AM »

Hello,

Please find attached the updated Template.CSS file for Joomla 3.0.

Change Log is below:

Original

Code:
Template.CSS - Line 1214

#cboxTopLeft, #cboxTopCenter, #cboxTopRight, #cboxMiddleLeft, #cboxMiddleLeft, #cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight, #cboxMiddleRight{
background:none!important;}

Changed To:

Code:
#cboxTopLeft, #cboxTopCenter, #cboxTopRight, #cboxMiddleLeft, #cboxMiddleLeft, #cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight, #cboxMiddleRight{
display:none!important;}

Also Added:

Code:
 #colorbox, #cboxOverlay, #cboxWrapper {
        overflow: visible !important;}

-Mike
« Last Edit: July 11, 2014, 12:48:29 AM by mikenicoll » Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
IvesFilm
Jr. Member
**
Offline Offline

Posts: 49



« Reply #5 on: July 14, 2014, 08:27:08 AM »

The login box is usable at this point. Would like to note the following:

This box is a particular point of pain (not just this template) on Safari. At some widths the box is really thin and narrow for no reason. And for some reason iMacs default to a ridiculous width that blow my mind, but also iPad's horizontal width as well, in fact it becomes narrower than when you hold the iPad upright.

Other templates have this issue as well. For instance, Photobox.

Overall, great work. Thanks for getting this update out.

Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #6 on: July 14, 2014, 10:06:41 PM »

Hello,

In the S5 Box module settings there should be input boxes to adjust the width of the Register and Login popup boxes as well as boxes 1-10. If you increase this number it might help with the smaller screens. If you have further questions regarding the S5 Box just post in our S5 Box Forum and the script developer can assist you directly.

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.