Public Forums 71,145 posts

[david Friend davidJoin date: November 2017Posts: 18Downloads:3Uploads:0 Thanks: 4]

#1076742

Hello everyone! I have a little issue with Purity III. The thing is that I have hide the position one from Large and Medium layouts and only kept it public to small and extra small. I don’t want a module to be present on desktops, only mobile devices. But on desktops, instead of hidden the position a blank space is shown. The module published in that position is not shown. Please refer to this link:
https://robustiana.com/

Is it possible to completely hide that position?

Thank you.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1076827

Hi
Can you provide a screenshot which space you want to remove?
I have not found the module on Homepage, I can see two module is showing on Large display
Here: http://prntscr.com/hfolzy

Regards

[david Friend davidJoin date: November 2017Posts: 18Downloads:3Uploads:0 Thanks: 4]

#1076868

Yes sorry. I had to change the modules to a spotlight position because it did not look good. But now I’m thinking that this may not be a template issue. The website had a sidebar position to the right where I published two modules (Google Adsense ad and social networks plugins). In the majority of the items that I have published those modules are correctly shown on the right side of the website but in some items the sidebar modules are at the bottom which looks very bad.

The only thing that is different from the generated source code in Google Chrome (I copied the code and compare the two files with Meld Diff Viewer) is this:

#k2Container{padding:0 0 24px 0}.clr{clear:both;height:0;line-height:0;display:block;float:none;padding:0;margin:0;border:none}.even{padding:2px}.odd{padding:2px}

That text after .clr{clear…. is the only difference. The articles that have the issue do not have that portion of code. The articles that are working fine have it. So I think it is like a template reaction to the lack of that portion of code. K2 is the one that I think is causing the issue in the first place but I don’t know if it is for the template to do that. Sorry, I’m not expert in this topics. I have already return the state to the original issue so you can see it. Thank you very much.

• This reply was modified 7 years ago by  david.
• This reply was modified 7 years ago by  david.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1076871

Hi
The sidebar will load on the page and use the space if there is any module published on it.
As the hidden style will apply only to hide it like a module suffix, You have to unpublish all module in the sidebar if you do not want to show it.
Or choose different module position because if the sidebar is active it will use the space.

Regards

[david Friend davidJoin date: November 2017Posts: 18Downloads:3Uploads:0 Thanks: 4]

#1077082

Thank you! I understand but if you have a chance, check for example that URL. I have a hidden position on Large and Medium Layouts but not hidden on Small and Extra Small. What I’m saying, and sorry for my last answer (I confused the forum post), is that I see a blank space just below the menu. There is a module published but I only want that module to be shown on mobiles. The issue is that in desktops I see a blank space when what I want is to hide all the position, not hide the module. If I understand right, even if I hide the position for two layouts if there is a module published in that position but I only want it to be shown on two layouts there is going to be a blank space in the other two layouts. Is that correct?

This is the link:
https://robustiana.com/321-experiencia-de-un-ano-con-oneplus

Thanks!!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1077190

Hi
You can see here that module is loaded but hidden for the large view
http://prntscr.com/hg5288 space is of the spotlight block that contained different position
If you want to hide it from large display you can use media queries in the custom.css file and apply it on the spotlight classes as in the screenshot.
Here is an example of media queries.

Regards

[david Friend davidJoin date: November 2017Posts: 18Downloads:3Uploads:0 Thanks: 4]

#1077365

Thank you for your help. I temporarly did it using Advanced Module Manager and excluding the module from desktops. Now I the blank space disappeared. I will try the way you tolde me. Thanks!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1077520

You are welcome!

[david Friend davidJoin date: November 2017Posts: 18Downloads:3Uploads:0 Thanks: 4]

#1081241

Hi! I was trying to follow your guide but how can I hide the spotlight position on large desktops using media queries?

For example this: @media (min-width: @screen-lg-min) { what do I write here to hide the spotlight block? }

Something like: @media (min-width: @screen-lg-min) { .t3-spotlight{display:none} } ??

Thanks!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1081316

, For example, this: @media (min-width: @screen-lg-min) { what do I write here to hide the spotlight block? }

Hi
To check the style classes use inspect element from the browser tool.
As showing here https://prnt.sc/hg5288
And you can see the style classes as pointed in the screenshot.

Regards

[david Friend davidJoin date: November 2017Posts: 18Downloads:3Uploads:0 Thanks: 4]

#1081325

Ok thanks! But is this the correct way to write it supposing that it is the correct class?
@media (min-width: @screen-lg-min) { .t3-spotlight{display:none} }

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1081331

Hi
You can use the width as well,By above code, it will use the value from variable.less file

@media (min-width: 1200px;) { .t3-spotlight{display:none} }

Regards

[Author]

Posts