Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 8, 2020 at 12:03 pm #1210997
    swibbycreations

    When I view one of my pages on a mobile screen, the height & line-height for (I believe) the av-logo-container is set to something really large, like 621px. Specifically, I can see that the responsive height is being overridden by a height/line-height set at element.style The result is that the logo looks normal but there is a lot of empty space before the first element is visible, i.e. the user has to scroll down.

    I’ve narrowed the cause of the issue down to a script I have in a plugin I’m creating. The script passes a php $var to javascript and looks like this:

     ?>
<script type="text/javascript">
	var my_var = <?php echo json_encode($my_var, JSON_HEX_TAG); ?>;
</script>
<?php

    When I comment out this script, the issue goes away.

    The layout looks normal on larger screens (tablet/desktop etc), and I can see that on these larger screens element.style matches the responsive height. This only seems to be a problem on small mobile sized screens.

    Does anyone know why a script like this would cause this problem?

    May 8, 2020 at 5:11 pm #1211089
    swibbycreations

    Having looked into this a bit more, it seems the script is somehow interfering with the following:

    screenshot

    When the script above is commented out, this CSS sets the height to about 80px which is what I would expect, but when the script is active it sets the height to 600+px

    May 8, 2020 at 9:22 pm #1211218
    Nikko

    Hi swibbycreations,

    I think that’s a custom code added, most likely in your Quick CSS (Enfold > General Styling).
    If you can’t find where it is, please try to disable CSS file merging and compression in Enfold > Performance?
    Then you should be able to see which css file it belongs.

    Best regards,
    Nikko

    May 8, 2020 at 11:30 pm #1211296
    swibbycreations

    Thanks Nikko

    I disabled CSS file merging, and the CSS code from my screenshot is coming from:
    themes/enfold/css/layout.css?ver=4.5.7:2345
    It’s not custom CSS that I added.

    Any idea why the javascript from my first post would mess with this?

    May 9, 2020 at 7:06 pm #1211476
    Nikko

    Hi swibbycreations,

    I apologize for that, you are actually right about that.
    Can you give us a link to the page mentioned? so we can try to check on it.

    Best regards,
    Nikko

    May 11, 2020 at 12:11 pm #1211811
    swibbycreations

    Hi Nikko

    Apols for the delayed response. I was able to eliminate the issue by adding the following CSS to style.css:

    @media only screen and (max-width: 767px) {
    #header #header_main .container {
         height: 80px!important;
    }
}

    I still couldn’t say why my script caused the issue in the first place, but this CSS effectively solves the problem so I think I’m fine for now.

    May 12, 2020 at 12:52 am #1211930
    Nikko

    Hi swibbycreations,

    I’m glad to hear that you were able to fix it.
    To be honest I don’t really see any issue with your code or even as I inspected further on height: auto!important that would cause any issue but anyway, I’m glad that it’s all good now with a bit of CSS :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.