Section Content Missing / Not Visible

Support
#1

I have a page that generates a member list using Profile Builder. Profile Builder generates an all user table and a single user table. In the all user table when you click on more it displays the single user view. The page is setup with three separate tables. The first one displays until you reach the 3rd breakpoint, the second one displays only at the middle breakpoint, and the third displays at the 4th and 5th breakpoints. The page displays fine in the all user listing view. However, when I click on the single listing view only the first table works and since it is hidden at the 3, 4 & 5 break points no table displays once you hit the third break point. I changed all of the three tables in Profile Builder to the same exact code so that they would be identical and the same issue occurs, so I don’t believe PB is the root of the problem.

I noticed after creating the page, which I have done multiple times to rule out other issues. When clicking on the section customize area and selecting the icons that represent what should be hidden and saving it after leaving and returning they are no longer highlighted. I am not sure if this is related to my issue but may be something that you should further investigate.

When using the browsers inspect elements tool I see the issue in the CSS and found this line of code.

<div class=”e122 x-bar-content-area x-hide-md x-hide-sm x-hide-xs”>

In inspect elements when I edit the code and remove x-hide-sm x-hide-xs the content then displays as it should.

My site URL is http://8f4.f2d.myftpupload.com and the page with the issue is http://8f4.f2d.myftpupload.com/affiliates/

Any assistance you can offer to help diagnosis the issue would be greatly appreciated.

#2

Hi there,

The section and the element that contains the table have the class x-hide-md x-hide-sm x-hide-xs.

If you don’t want them to be hidden on mobile, you will have to click on the customize option of the sections and remove the rules that hides it from mobile devices. Also, remove the class added to the content are element.

Hope this helps.

#3

That is the way the the section and elements are set up. Please see the screenshots.

The settings for the two largest breakpoints which displays fine.

The settings for the two smallest breakpoints which does not display correctly in the expanded single user listing view when viewing on a mobile sized device.

#4

Just to expand on the issue please see the two additional two screen shots.

#5

Hi there,

Would you mind clarifying what should we see on mobile? The screenshots aren’t enough as I seeing differently on my end.

In my view, the one you said has missing content has content. The one with the arrow in the first screenshot is of course hidden in mobile, because, you set it to be hidden in mobile.

Example, this means

hidden from medium, tablet, and mobile devices

Plus, you don’t have to go to CUSTOMIZE section of every element and apply that visibility. What you did is you hide the section, row, and element. You just need to hide the section if you wish to hide the section, you don’t need to do it in every rows and every element.

Thanks!

#6

Got it. I created a new section with one row and element it for each of the three tables I was trying to display on the page. I will post an image with more detail shortly. For some reason I can’t get pro to open edit page so I can show you. The circle just keeps on spinning. Nothing has changed since yesterday when I last used edit page in Pro.

#7

Hi there,

Would you mind providing your login credentials? I’ll check that too.

How about cloning your page to a test page?

Thanks.

#8

I will forward my credentials as a secure note

#9

I created a new page from scratch using the page builder and have the same issue. Next, I created another page this time one that is a hard-coded affiliate page without using the page builder. In this version before I apply the hide elements classes everything works perfectly. When I apply the classes to hide the elements at certain breakpoints the page performs the same way as the one built with your page builder. All of the three of all user tables generated by a short code work fine and only appear on appropriate screen size. However, when clicking on more link inside of the table which opens the single user template on the same page from each of the appropriate template lists, once you hit the middle breakpoint nothing appears. The expanded profile is not visible. They all work when there are no hiding classes applied. The classes I am using these classes to hide the elements:

x-hide-xl
x-hide-lg
x-hide-md
x-hide-sm
x-hide-xs

The hard coded page is http://8f4.f2d.myftpupload.com/affiliate-directory-hard-coded-testpage/

The page created using page builder is http://8f4.f2d.myftpupload.com/affiliates/

#10

Hi,

I would like to check but the credentials provided is not working.

Kindly check again and let us know.

Thanks

#11

I am attaching revised credentials

#12

Hi,

The content is missing because it was set to be visible only in desktop.

If you go edit this page - http://8f4.f2d.myftpupload.com/x/#/content/938/inspector and check the section, you will see the settings under Customize.

If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks

#13

I don’t think we are looking at the same thing. Please see my copy and paste screen shot. This is from the same page link you provided.

Now look at this page. http://8f4.f2d.myftpupload.com/affiliate-directory-hard-coded-testpage/user/44/ This is the test page I hard coded without using the page builder. I removed the hiding classes and each of three different tables work fine. You’ll see all three tables and if you change your browser size they all perform as they should. Prior to removing the hiding classes which I listed in my previous post it performed the same way as the page builder version.The issue is when clicking on the more (in the last column of the table - see second screen shot composition) Section 4 and Section 5 do not perform and appear on the appropriate sized screen. I have the same result in both Chrome and Firefox.

Section 4 should only be visible in the middle sized output and section 5 only at the two a smallest. I believe that the hiding class for these two sections is changing or not passing through when the page repopulates when clicking on the more link in the table.

#14

You could also give a class in your content band and use:

@media (min-width: 500px) and (max-width:600px) { .mycustombandclass { display:none; } }
Here screens betwen 500px - 600px. Like this you could hide content on mobile / desktop.You need just to chose your breakpoints. Also the custom class permit you to have different font sizes / family in mobile / tablet view.

Edit: Reading your post I can’t figure why you want to hide / show content based on viewpoint…

#15

I want to hide bases upon view points because although the table is responsive it looks bad and is hard to read when the screen size gets smaller. So, if I understand you correctly you are suggesting instead of using the the icons in the page builder to apply the classes directly to the content. Can you tell me what the existing break points are as I can’t find where they are set?

#16

Hi There,

I did take some time to understand the issue. So it seems the affiliates page that is built in Cornerstone is fine, right? And the issue is on the generated individual user’s page.

Here’s the issue, the generated page nested the sections (sections with the affiliates shortcodes)

screenshot

So that means if the desktop section is hidden, the tablet and mobile section will be hidden too because they are inside the desktop section (hope that make sense).

I did @RivmanBx suggestion on a test page as that seems to be the practical solution (see the CSS on that page), and I was initially thinking that this might be a conflict issue with the hide during breakpoints feature and the affiliate plugin (but no!). Unfortunately, that did not resolve the issue, because even if we placed all 3 shortcodes on its own RAW Content element it is going to be nested (this means this is not an issue with the section). Even if we put them on the same raw content element, it will still nested.

Maybe if we can apply the ID directly to each shortcode and the tables markup will be properly wrapped, the CSS I’ve provided on that test page should work.

Its a plugin issue, please contact the plugin Author.

Have a great day,
Cheers!

#17

Thank you for all your time looking into this issue. I have reached out to plugin author and are awaiting their response. I did discover one more thing that makes no sense to me. So as I told you while I was trying investigate the root of the problem I built a page in raw html page using only the WordPress page editor. I actually built two one where I wrapped the short codes inside a div with the hiding classes applied and one without. The one without the div wrapper works perfectly other than there are three tables on the page. What I discovered is when I remove the class from the first div then the others two work perfectly. So somehow the first div which has been closed is still affecting the other two.

Here is the code and the two URLs just for your reference.

<div class="x-hide-md x-hide-sm x-hide-xs">
[wppb-list-users name="affiliate-directory"]
</div>

<div class="x-hide-xl x-hide-lg x-hide-sm x-hide-xs">
[wppb-list-users name="affiliate-directory-tablet-view"]
</div>

<div class="x-hide-xl x-hide-lg x-hide-md">
[wppb-list-users name="affiliate-directory-mobile-view"]
</div>

http://8f4.f2d.myftpupload.com/affiliate-directory-hard-coded-testpage-1/
http://8f4.f2d.myftpupload.com/affiliate-directory-hard-coded-testpage-2/

Thanks again for the assistance.

#18

Hi,

I would like to check again but the login provided no longer works.

I am not sure how would classes affect the div structure.

The structure only change when generating the individual user’s page so it has something to with plugin code that is affecting it.

We’ll wait for the plugin support response, they will be able to diagnose things much better due to the fact that they know the code that generates it.

Thanks

#19

Here credentials are attached.

#20

Hey @mark2inspect,

I investigated the issue and like what @friech said, it’s due to your plugin adding dynamic content. You should not use the hiding method. You should use custom media queries. For that, you need to code your own CSS or seek help from a third party developer. Or, ask the plugin developer if he accepts custom coding or features.

Thank you for understanding.