GK Storefront - Show/hide module on mobile or tablet Joomla 4

kolasinac

How to show/hide modules on mobile or tablet or big screen? I us joomla 4. Tnx

kolasinac

Can I have some help, please?

forvox1

Which module needs to be disabled?
Is there a link to the site?

forvox1

Your file .css
For example
#gkBottom2 {
background: #F6F4F1;
color: #111111;
width: 1920px;
}
Add display: none;

#gkBottom2 {
background: #F6F4F1;
color: #111111;
width: 1920px;
display: none;
}

kolasinac

Maybe you did not understand me.
Is there a module class suffix which (when we add it) will hide a specific module on a desktop pc, and it will be visible on a mobile device?
There were suffixes earlier as nomobile, onlymobile ... They do not work anymore. How can I fix it?
Thanks.

forvox1

Do you need to hide the block in the PC version and make it visible in the mobile version?

template.css
#gkBottom3 {
display: none;
}

small.desktop.css
small.tablet.css
tablet.css
mobile.css
#gkBottom3 {
display: block;
}
or
#gkBottom3 {
display: block !important;
}

kolasinac

Is it possible to use it through module class suffix?
If I use the code you have given me, will it crash during the next update?
Where do I have to embed the code you have given me?

forvox1

Can be used in the correct order
In the files that you have made changes - it is not advisable to update (or just make your changes again)
Usually these files are not updated (.css )
Code needs to be changed in files (.css )
There is a link to your site and a photo of what is needed
I don't need access to the site

kolasinac

The site is https://alatimasine.rs/
But I want to hide more specific modules, some of them will be visible on mobile devices, ans some on PC desktops, and that is not a suitable solution. I want to see some modules on both positions.
I was thinking of a solution given here:
https://www.gavick.com/documentation/joomla/hide-joomla-module-in-mobile-or-tablet-layout
Is this possible?

saguaros

kolasinac I was thinking of a solution given here:
https://www.gavick.com/documentation/joomla/hide-joomla-module-in-mobile-or-tablet-layout
Is this possible?

Yes, you can use these class suffixes for your site. Just add the class name into the Module Class option of module you want to hide.

For example:

This will hide module on mobile.

forvox1

What modules do you need to manage?
If you do not know their name, you can look through the developer console and make changes in the same place and see where you need to make changes (photo attached) - it's not difficult
If you do not know how to do this, just point them to me through the screen
There is a partial solution in the link, but not a complete one - it's easier to make changes in the files (.css )

kolasinac

I do not want to change module position, but a specific module itself. It is possible that I have two modules in the same position (i.e bottom 3) and I want one to be visible and another invisible one?That is why I wanted to know:
How can I define a class suffix in order to define module inherited rules and not the position where the module is (as it is written in the link I had sent)?

forvox1

I did not suggest you change the position of the module
You need to create a class ( suffixes ) and add in to your files
Each suffix is an additional created class with its own settings
As in the example of the photo, the links indicate the classes
bigtitle
double
nomobile
Perhaps these classes are in your template, but this needs to be checked.
3If you want to solve this issue in this way, then you need outside help, as this takes time.

The easiest way for you is to add modules in the template and manage them
Bottom1
Bottom2
Bottom3
Bottom4
Bottom5
+
Bottom6
Bottom7
Bottom8
File templateDetails.xml

<position>bottom1</position>
<position>bottom2</position>
<position>bottom3</position>
<position>bottom4</position>
<position>bottom5</position>
+
<position>bottom6</position>
<position>bottom7</position>
<position>bottom8</position>
Line -- 256
<field name="module_override" type="moduleoverride" label="TPL_GK_LANG_MODULE_STYLES_OVERRIDE" description="TPL_GK_LANG_MODULE_STYLES_OVERRIDE_DESC" module_positions="breadcrumb,usermenu,header,footer_nav,login,cart,search,sidebar,mainbody,mainbody_top,mainbody_bottom,top1,top2,bottom1,bottom2,bottom3,bottom4,bottom5, +++++
menu1,menu2,menu3,menu4,menu5,menu6,menu7,menu8,menu9,menu10,tab1,tab2,tab3,tab4,tab5,tab6,tab7,tab8,tab9,tab10" module_styles="gk_style,xhtml,none,table,horz,rounded,outline" />