Forum Support

Shape 5
March 28, 2024, 08:29:47 AM *
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: Formatting Issues - Ipad  (Read 1263 times)
pkennedy99
Jr. Member
**
Offline Offline

Posts: 37



« on: January 28, 2018, 04:50:22 PM »

I am having format issues w/ an Ipad Pro 9.7 (1024 X 768 Portrait) (see attached) - the menu does not show at all and modules are pushed together

Thoughts?
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: January 29, 2018, 08:52:24 AM »

Hello,

I don't really know what I'm looking at in this picture. I need an exact url to where this can be seen.

Modules are supposed to re-position on smaller screens. If you're using the columns they would position under each other so that they become one column on smaller screens.

Your menu is most likely to big and therefore can't all show on small screens. I would recommend reducing the size of your menu, but if that's not an option you can increased the Trigger Width setting under Main/Responsive Nav for when the mobile menu appears.
Logged

Mike Knott
------------
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
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #2 on: January 29, 2018, 09:12:46 AM »

Hello,

Actually I can see on your homepage that you're using "large_picture" classes, which are not designed for this template. They were used with another template and would require custom css work to integrate into another. There is css in the responsive css files that need to be adapted for this template. That large image is meant to re-position and hide on smaller screens, and none of that css was transferred over. That is what is causing the overlay issue.
Logged

Mike Knott
------------
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
pkennedy99
Jr. Member
**
Offline Offline

Posts: 37



« Reply #3 on: January 29, 2018, 10:10:50 AM »

The URL is on the screen shot.  If you look at the website in pretty much any other browser or device, it works fine.  The menu should show as a hamburger menu and the logo should show (again, it works all other devices and browsers)
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #4 on: January 30, 2018, 08:17:21 AM »

Hello,

It's as I stated above, you are using code that is not designed for this template.

Your menu is hiding because you have custom_1 set to hide too early with hide_900. The hide class needs to be the same as your mobile trigger width so that the menu is set to hide at the same time as you are hiding this content.
Logged

Mike Knott
------------
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
pkennedy99
Jr. Member
**
Offline Offline

Posts: 37



« Reply #5 on: January 30, 2018, 10:44:13 AM »

Can you point out to me what custom code I am using?

- The only reason I'm using "class=hide_900" in Custom_1 is because if I don't there's a large blank space on mobiles devices where the video normally shows

- As far as the menu hiding..when it hides shouldn't a hamburger menu appear like it does on all other mobile devices/phones ?

- As far as "large_picture" classes, where do you see that?  I didn't think I modified anything other that the actual images and text in your demo module.
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #6 on: January 31, 2018, 08:35:09 AM »

Hello,

"The only reason I'm using "class=hide_900" in Custom_1 is because if I don't there's a large blank space on mobiles devices where the video normally shows"

----Yes, but you are calling it before the mobile menu triggers so it causes everything to move up. You need to change the time it triggers.

"As far as the menu hiding..when it hides shouldn't a hamburger menu appear like it does on all other mobile devices/phones ?"

----It does show on your site, but there's screen range where it won't show because of the issue above, you need to change the trigger call.

"As far as "large_picture" classes, where do you see that?  I didn't think I modified anything other that the actual images and text in your demo module."

----Sorry I was looking at the wrong template, I was looking at Curb Appeal for some reason. This is the correct issue. The issue is that the text on the left side of the picture in the "What is HAKI SAKI?" section is taller than the image. That text is position:absolute called until it hits about 970px screen width and as the screen shrinks it becomes taller than the available area, which causes it to overlap the text below it. The main issue here is the amount of text or the height of the image. I would recommend either reducing the amount of text, or if possible can you use a taller image to the right of it? Either one of those would fix the issue. The only alternative is that we change the css for this area so that the pictures stacks on top of the text at a larger screen resolution, but that is meant for tablet size and mobile sized screens.
Logged

Mike Knott
------------
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
pkennedy99
Jr. Member
**
Offline Offline

Posts: 37



« Reply #7 on: January 31, 2018, 10:58:24 AM »

OK, I will play with that module to see what I can do.

As far as when the mobile menu triggers, where can I find some further explanation on how to change that?

Thanks.
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #8 on: February 01, 2018, 08:12:08 AM »

Hello,

You can change the mobile trigger width in the location I mentioned above:

"Trigger Width setting under Main/Responsive Nav"

There's a field there where you can adjust the screen width for where the mobile menu appears.
Logged

Mike Knott
------------
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.