Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1158215

    Hi there,

    I recently realized we are running into responsiveness issues with our custom post types on mobile devices.

    For you to get a sense of what is happening on the front end, I created the exact same page as an enfold “page” and not a custom type page.

    Here is the page (which is working perfectly): https://dev-myelitis.pantheonsite.io/test-3/

    Here is the custom page one: https://dev-myelitis.pantheonsite.io/clinical-studies-and-trials/the-prevent-study/

    The difference I notice on mobile are:
    1. The menu breaks on the custom page. You can see this prominently if you try to go to programs and services < individuals. It won’t show up entirely.
    2. The responsiveness isn’t really happening on the custom page, look at the padding left and right and compare it to the page one, it isn’t properly being responsive.
    3. Functions on the backend — screen options like element visibility on mobile devices isn’t working either. The sections will show even though they are prompted to be hidden depending on the screen size.

    I noticed that this happens on all custom page types — we have quite a few. In our child theme, we currently have single .php files for each custom post type that are identical to the page.php files.

    What can we do to fix this?

    Thank you!
    Roberta

    • This topic was modified 5 years, 1 month ago by Roberta.
    #1158577

    Hey Roberta,

    You might want to write to the Ubermenu support or check their docs, we cannot really help you with this plugin.

    Best regards,
    Victoria

    #1158760

    Hi Victoria,

    Thanks for your response.

    The menu problem is only one of the three problems. Like I mentioned in my entry, there are at least two more problems related to the page —page responsiveness and also the avia layout problem (avia sections are still showing when they are asked to be hidden in the avia layout editor). They can all easily be identified by comparing the two pages I sent over in my previous message.

    I don’t have enough knowledge on the matter, but what I’m seeing is that the page properties for mobile devices are not being pulled for the custom post types, while we would like them to. The theme is not working as it should on our custom post types on mobile.

    I believe something similar as what is mentioned here is going on: https://kriesi.at/support/topic/theme-not-working-with-custom-post-type-and-pages-main-div-closing-too-early/.

    Thank you,
    Roberta

    #1159250

    Hi Roberta,

    Have you tried the solution posted there?

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    #1159977

    Hi Victoria,

    I haven’t because it’s a similar issue but not exactly the same. As mentioned in my previous message, the page has exactly the same code/content as the custom post type page. I’m attaching some screenshots below highlighting the issues I found:

    1. The issue of the menu getting cut off on the custom post type page. On the normal page, it works fine.

    Page — works fine: https://ibb.co/bLFsrTh
    Custom Post Type Page — gets cut off: https://ibb.co/SPWQhSJ

    2. The responsiveness issue — on the page it is showing correctly, and on the custom post type page, you can see the padding is much narrower.

    Page — works fine: https://ibb.co/stGqPvw
    Custom Post Type Page — content does not show up properly, see padding-left/right: https://ibb.co/qMgdMv5

    3. The issue related to the hiding sections on mobile devices. There is an option in enfold, where sections can be hidden on mobile and tablet devices. If I check the boxes to hide the sections on the custom post type pages, those sections will still show up. https://ibb.co/fS89Trq

    I appreciate your help!

    Warmly,
    Roberta

    #1160916

    Hi Roberta,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 767px) {
      div .av_three_fifth {
          margin-left: 0%;
          width: 100%;
      }
    }
    

    As for the menu being cut-off, it is the parallax section covering it, please disable the parallax effect and see if the issue persists.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1161240

    Hi Victoria,

    Thanks for getting back to me. The code you sent over more or less solved one of the issues —the responsiveness/padding on the side of the page. However, I think this is only a patch solution for this specific page, and won’t necessarily fix all other custom post type pages that have a different layout. I think the problem lies deeper. When I inspect both pages, I am seeing that for some reason, the stylesheet that is being pulled on the custom post type page is different than the one that is being pulled from the standard page one (which works fine). I’m attaching screenshots as an example.

    The page that is working like it should: https://ibb.co/KbLkPHP is pulling styles from the grid.css stylesheet
    The custom post type page that isn’t working properly: https://ibb.co/6ngJ416 is not pulling from the grid.css stylesheet.

    Ideally, we want the custom post type pages to work/look exactly the same as the standard pages so that no errors occur.

    I hope this makes sense!

    Warmly,
    Roberta

    #1162198

    Hi,

    Thank you for the update.

    Did you register the custom post type using the new filter? Please check the documentation below to learn more on how to properly enable the advance layout builder for the post type.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#alb-for-any-post-type

    Best regards,
    Ismael

    #1212945

    Ismael, I’m just seeing this message, I’m terribly sorry about that!

    I will look into it and let you know. I definitely think this is an issue with the advance layout builder not being properly enabled (you helped me with a similar issue a couple of days ago). As always, thank you so much for your help. You are all incredible :)

    Roberta

    #1212948

    This worked, Ismael, thank you SO MUCH!

    Just a final question (given my very limited PHP knowledge): is it possible to add more custom post types to this code?

    function avf_alb_supported_post_types_mod( array $supported_post_types )
    {
      $supported_post_types[] = 'YOUR CUSTOM POST NAME';
      $supported_post_types[] = 'YOUR CUSTOM POST NAME';
      return $supported_post_types;
    }
    add_filter('avf_alb_supported_post_types', 'avf_alb_supported_post_types_mod', 10, 1);

    I currently have it set to the code below but would like to add more custom post types if possible.

    function avf_alb_supported_post_types_mod( array $supported_post_types )
    {
      $supported_post_types[] = 'clinical-studies';
      $supported_post_types[] = 'clinical-studies';
      return $supported_post_types;
    }
    add_filter('avf_alb_supported_post_types', 'avf_alb_supported_post_types_mod', 10, 1);

    Thank you!
    Roberta

    • This reply was modified 4 years, 7 months ago by Roberta.
    #1213940

    Hi,

    Thank you for the update.

    You can actually replace the value of the second line..

     $supported_post_types[] = 'clinical-studies';
    

    .. with the other custom post name or slug.

     $supported_post_types[] = 'another-custom-post-type';
    

    You should end up with this.

    function avf_alb_supported_post_types_mod( array $supported_post_types )
    {
      $supported_post_types[] = 'clinical-studies';
      $supported_post_types[] = 'another-custom-post-type';
      return $supported_post_types;
    }
    add_filter('avf_alb_supported_post_types', 'avf_alb_supported_post_types_mod', 10, 1);
    

    Best regards,
    Ismael

    #1214969

    Thank you, Ismael, that makes total sense.

    Best,
    Roberta

    #1215352

    Hi Roberta,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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