-
AuthorPosts
-
November 19, 2019 at 6:21 pm #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.
November 20, 2019 at 7:33 pm #1158577Hey Roberta,
You might want to write to the Ubermenu support or check their docs, we cannot really help you with this plugin.
Best regards,
VictoriaNovember 21, 2019 at 9:52 am #1158760Hi 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,
RobertaNovember 22, 2019 at 5:53 pm #1159250Hi Roberta,
Have you tried the solution posted there?
Could you please attach some screenshots of the issue?
Best regards,
VictoriaNovember 25, 2019 at 6:55 pm #1159977Hi 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/SPWQhSJ2. 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/qMgdMv53. 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,
RobertaNovember 28, 2019 at 12:14 pm #1160916Hi 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,
VictoriaNovember 29, 2019 at 3:47 pm #1161240Hi 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,
RobertaDecember 3, 2019 at 1:47 pm #1162198Hi,
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,
IsmaelMay 14, 2020 at 1:31 pm #1212945Ismael, 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
May 14, 2020 at 1:43 pm #1212948This 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.
May 18, 2020 at 8:45 am #1213940Hi,
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,
IsmaelMay 21, 2020 at 12:13 pm #1214969Thank you, Ismael, that makes total sense.
Best,
RobertaMay 23, 2020 at 5:23 am #1215352 -
AuthorPosts
- You must be logged in to reply to this topic.