• Closed
  • Patrick Horan
    Spectator
    November 1, 2016 at 2:11 pm #30972

    I have WP 4.6.1 w/ evolve+ 2.6.8, site http://www.event1software.com.

    We had initially set the site up on a dev server and I thought the responsive layout width was working just fine when viewing a page in portrait mode using Android Google Chrome browser.

    After we updated to our live server, the pages no longer resize in portrait mode on Android and iPhone devices. Both display perfectly when viewing in landscape mode.

    For example, reference http://www.event1software.com/product

    Denzel Chia
    Moderator
    Posts: 2656
    November 2, 2016 at 7:39 am #30984

    Hi,

    Your HTML table is breaking the layout.
    Please use columns shortcode instead of table.

    Thank you

    Patrick Horan
    Spectator
    Posts: 21
    November 2, 2016 at 4:23 pm #30993

    I think what you are saying is to reformat my entire site (600+ pages/posts) to use

    elements instead of <table> elements.

    Since the current content was resizing with no issues on both Android and iPhone devices in portrait mode for http://www.event1software.com/product before I moved the content to the live server, I’m going to say that is quite an implausible request.

    To verify it is not the <table> elements causing the issue, I created a new page and placed only content from http://www.event1software.com/product that was not contained in a table element and the same issue is occurring on the test page as well.

    See http://www.event1software.com/this-is-a-test-page/

    As the page renders, it appears to be resizing for portrait mode, but then ends up sized for landscape.

    Denzel Chia
    Moderator
    Posts: 2656
    November 3, 2016 at 8:14 am #31004

    Hi,

    Please take a look at your webpage source code of your test page.
    http://www.event1software.com/this-is-a-test-page/

    There is broken HTML, the docttype and body and head tags….all are not suppose to appear in the middle of the webpage. Maybe that’s the cause of your issue.
    http://image.prntscr.com/image/769458ae217f4bce9312ffa2ba4cccef.png

    Did you edit the theme files?

    Thank you

    Patrick Horan
    Spectator
    Posts: 21
    November 3, 2016 at 1:49 pm #31014

    At your request, I have removed the doctype/body/head/html element tags from the page and it is still resizing in portrait mode to landscape width on smart devices.

    I have made no manual changes to the theme files with the exception of what was doing using the Custom CSS tool in Theme Options. Pretty sure that is not the issue, but just in case, I’ve copied all the Custom CSS code below for review:

    .td-75 {
    width=75%;
    }

    .th-half {
    width=50% !important;
    text-align: right;
    }

    .td-half {
    width=50% !important;
    vertical-align: top;
    }

    div#leftDiv{
    width: 100%
    text-align: left;
    }

    .ul-striped{
    padding: 5px;
    line-height: 200%;
    }

    .ul-striped li:nth-child(odd) {
    border-bottom: 1px solid black;
    background-color: lightgray;
    list-style-type: disc !important;
    }

    .ul-striped li:nth-child(even) {
    border-bottom: 1px solid black;
    background-color: white;
    list-style-type: disc !important;
    }

    .div-form{
    width: 75%;
    float: right;
    }

    .table-form{
    background-color: lightgray;
    }

    .td-formleft{
    width: 25%;
    }

    .input-form{
    width: 100%;
    padding: 1px !important;
    }

    .input-half{
    width: 50%;
    }

    input.required{
    width: 100%;
    padding: 1px !important;
    border-style: solid !important;
    border-color: red !important;
    border-width: thin !important;
    }

    textarea.required{
    width: 100%;
    padding: 1px !important;
    border-style: solid !important;
    border-color: red !important;
    border-width: thin !important;
    }

    Patrick Horan
    Spectator
    Posts: 21
    November 4, 2016 at 2:26 am #31019

    So I played with the Theme Options a bit trying to find some clue as to why this is occurring and discovered something strange.

    When I change the page Theme Option for Sidebar Position to No Sidebar the page still displays the Sidebar, but the content renders properly for portrait view on an Android or iPhone device. The General Theme Option is set for a single side bar, so I guess the added option chosen on the page Theme Option is causing a glitch or something.

    Anyways, I consider the matter closed, but thought it was worth mentioning in case it is a bug that needs to be resolved in future releases.

    Denzel Chia
    Moderator
    Posts: 2656
    November 4, 2016 at 9:18 am #31029

    Hi,

    When I change the page Theme Option for Sidebar Position to No Sidebar the page still displays the Sidebar, but the content renders properly for portrait view on an Android or iPhone device. The General Theme Option is set for a single side bar, so I guess the added option chosen on the page Theme Option is causing a glitch or something.

    I do not know if this is a bug.
    I will need to get our developer to investigate this issue.

    Thank you