VISIT AND LIKE OUR PAGE ON FACEBOOK
TAKE A LOOK AT OUR TWEETS ON TWITTER
SUBSCRIBE TO THE JOOMFREAK RSS FEED
VISIT OUR CHANNEL ON YOUTUBE

Account Details

Change your name, email, password or permanently delete your account. Change settings

We offer several ways you can get support from our experts: Support ForumKnowledgebaseNewsletter

Your Forum Posts

No posts to display.

Welcome, Guest
Username Password: Remember me

Modul and template responsive
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: Modul and template responsive

Modul and template responsive 12 Mar 2020 09:38 #12175

Hello to the whole forum.
Meanwhile, thanks for having made the quickstart available with JF_COUDA template which I find beautiful. I'm here to ask for help regarding some modules that are installed there and more specifically to view them on smartphones and PCs.
In practice I would like the modules in captureA to be seen only on sulpc (as I believe it is already) while the modules that appear in captureB would be seen only on smrtphone.
As I am not a very technical person, I ask the forum for help to obtain these results.
Thank you

captureA
This image is hidden for guests. Please log in or register to see it.

captureB
This image is hidden for guests. Please log in or register to see it.
Last Edit: 12 Mar 2020 09:39 by rostrato.

  • Posts:1
  • rostrato
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: Modul and template responsive 13 Mar 2020 02:44 #12177

Do you want to see the modules in captureA on mobile? This module is hidden on mobile.

joomfreak

  • Posts:2940
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0

Re: Modul and template responsive 28 Jun 2023 05:31 #12810

rostrato wrote:
Hello to the whole forum.
Meanwhile, thanks for having made the quickstart available with JF_COUDA template which I find beautiful. I'm here to ask for help regarding some modules that are installed there and more specifically to view them on smartphones and PCs. mcdvoice
In practice I would like the modules in captureA to be seen only on sulpc (as I believe it is already) while the modules that appear in captureB would be seen only on smrtphone.
As I am not a very technical person, I ask the forum for help to obtain these results.
Thank you

captureA
This image is hidden for guests. Please log in or register to see it.

captureB
This image is hidden for guests. Please log in or register to see it.


To achieve your desired outcome of displaying specific modules only on certain devices (PCs or smartphones), you'll need to make some adjustments to the template's code. Here's a general guideline to help you accomplish this.

Identify the modules you want to display exclusively on PCs and smartphones. Let's call the modules you want to display on PCs as "modules A," and the modules you want to display on smartphones as "modules B."

Locate the code for each module within the template files. The template files can typically be found in the template's directory on your server.

Add device-specific CSS classes or IDs to the module containers. For modules A (to be displayed on PCs), add a CSS class or ID that distinguishes them. For example, you can add the class "pc-only" or ID "pc-module" to the module container. For modules B (to be displayed on smartphones), add a CSS class or ID that distinguishes them as well. For instance, you can add the class "mobile-only" or ID "mobile-module" to the module container.

Modify the template's CSS file. Open the template's CSS file, typically named "style.css" or similar. Add CSS rules targeting the modules based on their classes or IDs. For example.

@media only screen and (max-width: 767px) {
/* Styles for mobile-only modules (modules B) */
.mobile-only {
display: block;
}
.pc-only {
display: none;
}
}
 
@media only screen and (min-width: 768px) {
/* Styles for pc-only modules (modules A) */
.mobile-only {
display: none;
}
.pc-only {
display: block;
}
}
 


Save the CSS file and upload it to your server, replacing the existing CSS file if necessary.

Test the changes. Access your website using a PC and check if modules A are displayed while modules B are hidden. Similarly, access your website using a smartphone and ensure that modules B are visible while modules A are hidden.
Last Edit: 29 Jun 2023 05:21 by Jennylowren45.
  • Page:
  • 1
Time to create page: 0.62 seconds
Wednesday 29 May 2024

joomfreak is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.