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.
Forum