Jump to content

Archived

This topic is now archived and is closed to further replies.

misterb101

Mobile view error when setting section to height of window

Recommended Posts

misterb101    0
misterb101

Hi there,

 

There seems to be a bug in DMS2 that causes view problems on mobile browsers. 

I have a site where the canvas area on the first page is set to the height of the browser window. The canvas area has a background image, and a column with a text box on it. (I had to do this because my revolution slider won't work on IE8, and unfortunately my clients are stuck on that outdated broser...)

 

When viewing the site on a mobile device, the canvas area is overlapped by the next elements on the page. When I remove the "set to window height" setting of the canvas area, the site is displayed correctly on the mobile device, but off course does not look very nice on the desktop anymore. 

 

Any ideas how to solve this?

Thanks a lot!

Bert

url: newsite.appointsolutions.com/wordpress/

Share this post


Link to post
Share on other sites
misterb101    0
misterb101

Hi Danny, 

Did you try on iphone? I tested on iphone5s safari. Other browsers are now working since I took off the revolution slider.

 

Thanks!

Bert

Share this post


Link to post
Share on other sites
misterb101    0
misterb101

We finally pinpointed the problem, it was caused by the "set height to window" setting, which is buggy. To make things worse, when a quick carousel is added to the first page canvas (which is supposed to have the screen height) and the carousel has more items then can be show (so requiring scrolling animation), the entire canvas section collapses. 

 

We have fixed with the following hack:

1. Set Canvas area styling to "No \scroll Effect"

2. Add the following custom script:

<script language="JavaScript">setTimeout(function() {var header = document.getElementById('pl_areauklb3ob'); if (header) {header.style.minHeight = window.innerHeight+'px';}},1);</script>

 

(where the pl_.... is your canvas area alemen)

Share this post


Link to post
Share on other sites

  • Similar Content

    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • poseyg
      By poseyg+
      This just happened to a site I'm working on. When I decrease width of browser to check for responsiveness...the pagelines content section is not responding???
    • yemoonyah
      By yemoonyah+
      While building my website, I set a padding of 5%, 25%, 5%, 25% so the text on the pages is not too wide.
      However, it looks crappy on mobile.
      How do I get the same effect and still have it look good on mobile?
      Example: http://yemoonyah.com/quiz
      Thanks
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      can I limit the overall of MegaNav on mobile? When I look at michaelkummer.com on a mobile device, the menu takes up more than a third of the screen space. Using CSS to limit max-height doesn't seem to work. Is there another/better way to reduce the overall height to maybe 10% of the screen available?
      Thanks
      Michael
       
×