SOLVED visible-phone is still visible on desktop
-
-
- Wicko
- Elite Rocketeer
- Posts: 884
- Thanks: 8
- Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.
-
I have created 2 modules what I am loading into an article inline. I have tried to set modules, one to be vissible only on phone and the other to be hidden on phone. I have set visible-phone and hidden-phone on the module class suffix but this did not work. I have also tried to add this as a class inline but this still is not working.
<p class="search hidden-phone">{loadposition search-help}</p> <p class="search visible-phone">{loadposition search-help-mob}</p>
This appears to be working for the mobile class as only one module is visible. But on desktop both are visible.
How can I ensure that visible-phone works correctly?
regards
David - Last Edit: 4 years 8 months ago by Wicko.
- This image is hidden for guests.
Please log in or register to see it.
Wicko Design is a multi-disciplined creative agency based in the South East of England. Specialising in web design & development, retail packaging and brand identity.
https://www.wickodesign.com
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Wicko
- Elite Rocketeer
- Posts: 884
- Thanks: 8
- Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.
-
This message contains only secure information that is visible to MrT, moderators and administrators
- This image is hidden for guests.
Please log in or register to see it.
Wicko Design is a multi-disciplined creative agency based in the South East of England. Specialising in web design & development, retail packaging and brand identity.
https://www.wickodesign.com
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Ok I fixed this... in html you are not allowed to have DIV inside a block level element, in other words you can't have DIV tags inside of P tags. You had:
<p>{loadposition xyz}</p>
The module you were loading contained DIV tags so this is why it failed. So I changed the code to:
<div>{loadposition xyz}</div>
Which then works ok. Also, You second module you were trying to load was unpublished anyway - so I published it for you.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Wicko
- Elite Rocketeer
- Posts: 884
- Thanks: 8
- Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.
- Oh now this has been done and I clear the cache none of the modules are showing.
- Last Edit: 4 years 8 months ago by Wicko.
- This image is hidden for guests.
Please log in or register to see it.
Wicko Design is a multi-disciplined creative agency based in the South East of England. Specialising in web design & development, retail packaging and brand identity.
https://www.wickodesign.com
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
huh? All I did was change P to DIV and it's working for me?
Are we looking at different things?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Wicko
- Elite Rocketeer
- Posts: 884
- Thanks: 8
- Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.
-
Yes what you see is correct page and what I am seeing. But there should be a module showing. Original it was showing both but now it is not showing either.
There should be a RokSprocket Tab on Desktop and RokSprocket List on Mobile.
Is this the change you made in the article?
<div class="search hidden-phone">{loadposition search-help}</div> <div class="search visible-phone">{loadposition search-help-mob} <div>
The second module was published. You may have been confused by another that was unpublished.
Its the module positions helptabs and helplisst that are now not showing. They were in paragraph sytling but have also made as div but still not showing.
<div class="search hidden-phone">{loadposition search-help}</div> <div class="search visible-phone">{loadposition search-help-mob}<div> <div>{loadposition helptabs} {loadposition helplists}</div>
These were working fine - This image is hidden for guests.
Please log in or register to see it.
Wicko Design is a multi-disciplined creative agency based in the South East of England. Specialising in web design & development, retail packaging and brand identity.
https://www.wickodesign.com
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
I'm still confused... Those two modules both have "visible-phone" class on them (in the module itself) and they both do show on mobile view?
What am I missing?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Wicko
- Elite Rocketeer
- Posts: 884
- Thanks: 8
- Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.
-
No. That is the point I guess. Originally I used the module suffix on these module to make visible and hidden on phone. This is where everything was going wrong. I would normally set the options in the module itself than inline.
Help lists is set to be visible-phone
Help tabs is set to be hidden-phone
Perhaps there is a conflict where I have other inline modules before but I am not sure. - This image is hidden for guests.
Please log in or register to see it.
Wicko Design is a multi-disciplined creative agency based in the South East of England. Specialising in web design & development, retail packaging and brand identity.
https://www.wickodesign.com
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
The article had unbalanced html tags... there was an opening DIV instead of a closing DIV which I have now fixed.
This is all a snowball effect.... You using loadposition to load a module which loads a module which loads a module which loads and article.... etc etc . This is all very inefficient. Also, as I said before, you are loading modules (which contain DIVS) inside P tags - which breaks the whole structure of the HTML (since this is not valid markup and the browser auto corrects the markup and get's it wrong) - so you end up with "viisble" inside of "hidden" etc etc. See my screenshot of more examples of what I spotted.
Now it's even worse though... because then you're loading articles with readmore breaks or curtailed previews lengths which make the markup even more wrong.
I think you need to simplify the whole way that you have done this.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.058 seconds