Tagged: columns, responsive
-
AuthorPosts
-
May 21, 2019 at 6:44 pm #1103018
Today I have found that ALL my client websites are NOT responsive to mobile! The COLUMNS are not responsive but the grid of posts IS FINE.
Enfold 4.5.2 is fine
Enfold 4.5.5 is fine
Enfold 4.5.6 is the PROBLEM
Enfold 4.5.7. still a PROBLEMWhat happened? Please help.
May 21, 2019 at 6:48 pm #1103022I’m in dev mode with disabled css/java compression so no caching of files or compression is happening. I saw the problem with 4.5.6 and I upgraded to 4.5.7 and nothing was fixed.
May 21, 2019 at 6:50 pm #1103026When I check the CSS, there’s no @media width being called it remains at width: 47% instead of 100% on mobile.
May 21, 2019 at 6:53 pm #1103028Can I replace Enfold 4.5.6 and 4.5.7 with Enfold 4.5.5 and downgrade while this is being resolved?
May 21, 2019 at 9:37 pm #1103077Further testing reveals that this is only affecting custom post types but not pages.
May 22, 2019 at 2:56 pm #1103304Hi fulanoinc,
Can you please attach a few screenshots of the issue?
Please refrain from replying to your own thread because it gets pushed back to the end of the queue and moderators won’t be able to provide a response immediately. Please be patient while we go through the rest of the queue. Thank you for your understanding.
Best regards,
VictoriaMay 22, 2019 at 3:16 pm #1103318This reply has been marked as private.May 23, 2019 at 12:19 pm #1103647Hi fulanoinc,
Thank you. Can you please share the link to your profile?
Best regards,
VictoriaMay 23, 2019 at 9:46 pm #1103791Can you specify what you mean by “my profile.” On this forum, or elsewhere?
May 28, 2019 at 5:54 am #1104686Hi,
Thanks for the update and sorry for the late reply. Please post a link to where we can see the actual problem you are having.
Best regards,
RikardMay 28, 2019 at 3:36 pm #1104870Hi there,
Here are links to two of more than three websites with this issue. Again, it only seems to affect custom post types and not pages.
Thanks,
LeydenMay 28, 2019 at 3:39 pm #1104871I added some CSS to another website to make some adjustments for a temporary fix. But as I stated, the same layout works on pages fine. Also, the responsive adjustment of the title font size using the Avia builder doesn’t seem to work either.
May 30, 2019 at 6:56 pm #1105473Has no one been able to see the issue or recreate the problem? I have kept all my websites updated to the latest Enfold. I can’t upgrade other websites if this is an issue.
May 30, 2019 at 7:01 pm #1105474Both of the columns sets below are the same, but they are rendering different. Here is what I see:
————————
Custom Post Type: This half column is rendering as a full column all the way across.
#top .flex_column_table {
display: table;
table-layout: fixed;
width: 100%;
}
#top .no_margin.av_one_half {
width: 50%;
}
————————
Page: This half column is rendering fine as a half column.
#top .flex_column_table {
display: table;
table-layout: fixed;
width: 100%;
}
#top .no_margin.av_one_half {
width: 50%;
}May 31, 2019 at 1:47 pm #1105680I’m also experiencing the same issue as @fulanoinc and also have custom post types. Responsiveness works on pages but not on the custom post types. Responsiveness was working with 4.5.2 and I upgraded to 4.5.7 yesterday, and started experiencing the problem where columns stay beside each other and shrink in width, but do not slide beneath each other on mobile.
Thanks for your help.
May 31, 2019 at 9:26 pm #1105873Is anyone looking into this? More people will begin to experience this as they upgrade. Somewhere in the new upgrades, the responsive capability for custom post types is affected.
Like I posted above, I have a patch for the unstacking columns, but now it’s a different issue with the half-column.
June 1, 2019 at 12:23 pm #1106049Hi tangerinemoons,
Please start a separate thread, describe your issue there and give us a link to your website to avoid any confusion and this thread getting too long.
Best regards,
VictoriaJune 3, 2019 at 12:35 am #1106504I don’t understand why he should start a new thread if his issue is just like mine.
June 3, 2019 at 6:27 am #1106576Hi fulanoinc,
We usually ask that because of the reasons pointed out by Victoria.
Anyway, I have tested this on my end but I couldn’t reproduce the same results, here is a screenshot on my end: https://imgur.com/7wzMjKe (I have marked the layout elements and the css code fetched to make it 100% on mobile)
Then I checked on your site and though it’s fetching grid.css for some reason it’s not fetching the css code that makes it 100% on mobile, here is a screenshot on your site https://imgur.com/IpZFrB2 (screenshot doesn’t include any url so I didn’t put it in private content)
But if I check your grid.css (link in private content), the css code is right there (line 137, inside of 767px media query):.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin { margin: 0; margin-bottom: 20px; width: 100%; }
Can you create a staging site? where we can check further on this without affecting your live site, since we could not replicate it on our end.
Best regards,
NikkoJune 4, 2019 at 1:50 am #1106880Hi Nikko,
Thank you for this. Are you using a page to test this? Responsiveness works fine with pages. The issue is only with custom post types.
Please use CPT UI to quickly create a CPT. Then register the CPT in the functions.php as the theme requires. Then create a post type entry using the Avia Page Builder for three columns or whatever. You can compare the page (which works fine) with the CPT that doesn’t.
Thanks
June 4, 2019 at 2:45 pm #1107114Thanks, Victoria. Created on here and I’m all fixed. https://kriesi.at/support/topic/change-in-page-since-installing-4-5-7/
@fulanoinc:
I’m using CPT and installed the new, updated code within the functions than what I had previously been using, and the responsiveness is working again. Hope this helps.June 4, 2019 at 2:53 pm #1107119Hi fulanoinc,
Yes, I used a page for that. I have created a custom post type on my end usng Custom Post Type UI plugin and tested it.
Here is the result: https://imgur.com/EDLASiL
It’s still the same on my end, you’ll notice in the screenshot I’ve posted I highlighted the body class, single-lesson, this shows that it’s a lesson custom post type.
I’m just curious on your site why it’s fetching grid.css but does not seem to read some parts of it that’s why it’s not responsive.Best regards,
NikkoJune 5, 2019 at 4:18 am #1107338Nikko,
It could be that this is not affecting your test because you’re not using a CHILD THEME and your creating this content without any past use of the Avia Page Builder with CSS modifications in the child theme. It’s all fresh on Enfold 4.5.7.
I have just updated another client website to 4.5.7 from 4.5.2 and it went from working fine, to having layout issues. In the private content, I linked images you can look at. You will see Color Sections and Columns in the Avia Page Builder that look normally stacked in the admin but when you view the page, the Color Section and columns a fixed up.
Example: A GRAY Color Section with two 1/2 columns that contain videos. The gray was fine only showing in the Color SEction with the videos. After the update, the GRAY continues beyond the section and down the rest of the page.
Am I correct to assume that there have been significant changes to the Avia builder and the grid.css file to where I will need to strip whatever CSS adjustments I made to all my sites and start all over again?
Thanks
June 6, 2019 at 10:02 pm #1108080The entire time of using Enfold, we have never made any adjustments to the responsive columns. Only to visual elements. And again, all these sites, up to four of them now, were working fine until the update to 4.5.7.
I’ll set up a staging server to test further.
June 7, 2019 at 2:55 am #1108113I’m having the same issue of columns not becoming mobile responsive on a Single post page using a custom post type and the Advanced Layout Builder.
I can see that the issue is being caused because the DIV with ID “wrap_all” is being closed after the header page title bar and not wrapping the whole page content. The CSS to make columns responsive rely on the columns being children of the “wrap_all” DIV, so the responsive styles aren’t being applied.
The issue lies with the wrap_all div being closed too early, there must be a bug in the template-builder.php template file or related code. You will need to create a Custom Post Type, enable the ALB for that CPT and create columns on the page to replicate this issue.
- This reply was modified 5 years, 6 months ago by gocreative.
June 7, 2019 at 3:26 am #1108117Hi!
@fulanoinc: Let us know once the staging site is ready.
@gocreative: Please open a new a thread and post the necessary details there so that we can can check it. Make sure that the custom post types are registered properly using the “avf_alb_supported_post_types” filter.// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#alb-for-any-post-type
Regards,
IsmaelJune 7, 2019 at 3:52 am #1108123Thank you @Ismael, we were using outdated code to enable the ALB on our CPT. Using the code from your link above fixes the responsive issues.
@fulanoinc I would recommend checking your code and trying this to fix your issue.June 7, 2019 at 10:35 pm #1108319Hi all,
We are using outdated code as well. Here is what we are using:
function add_builder_to_posttype($metabox)
{
foreach($metabox as &$meta)
{
if($meta[‘id’] == ‘avia_builder’ || $meta[‘id’] == ‘layout’)
{
$meta[‘page’][] = ‘exhibition’;
$meta[‘page’][] = ‘YOUR CUSTOM POST NAME’;
$meta[‘page’][] = ‘YOUR CUSTOM POST NAME’;
}
}
return $metabox;
}This is what you recommend in the link:
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);
@Ismael I will let you know if this fixes my issues. @gocreative glad this worked for you.Thanks!
June 7, 2019 at 10:46 pm #1108321Do you all know how this bit of code is different from the one above it? It states “For layout meta box please use the below function:”
function avf_metabox_layout_post_types_mod( array $supported_post_types )
{
$supported_post_types[] = ‘YOUR CUSTOM POST TYPE’;
return $supported_post_types;
}
add_filter(‘avf_metabox_layout_post_types’, ‘avf_metabox_layout_post_types_mod’, 10, 1);June 9, 2019 at 5:49 am #1108555@Ismael and @gocreative, I’m happy to report it worked. We were also using outdated code to register the ALB in CPTs.
Thank you all for your help!
-
AuthorPosts
- You must be logged in to reply to this topic.