Templates for Joomla! 3.x • Re: Hide module for mobile / desktop view

To achieve the display of the CF Filtering module in the right sidebar for mobile view and in the left sidebar for desktop view in VirtueMart, you'll need to use CSS media queries and possibly module class suffixes to control the visibility and positioning of the module. Here’s a step-by-step approach to achieve this:

### Step 1: Determine Module Positions and Visibility

1. **Identify Module Positions**: Make sure you have separate module positions for the left and right sidebars in your VirtueMart template. Typically, these positions are defined in your template's layout files or can be configured in the template settings.

2. **Module Class Suffix**: If you haven't already, create a module class suffix for your CF Filtering module. This suffix will help you style or position the module differently based on device type (mobile/desktop).

### Step 2: Implement CSS Media Queries

Use CSS media queries to control the display and positioning of the CF Filtering module based on screen size (mobile/desktop).

1. **Hide/Show Module Based on Screen Size**:
- Determine the CSS class or ID of the module container. You can inspect it using your browser's developer tools.
- Example media query to hide/show modules based on screen size:

```css
/* For desktop view (e.g., screens wider than 768px) */
@media (min-width: 769px) {
.desktop-module {
display: block; /* Ensure module is visible */
float: left; /* Position it on the left */
}
.mobile-module {
display: none; /* Hide module for mobile */
}
}

/* For mobile view (e.g., screens up to 768px wide) */
@media (max-width: 768px) {
.desktop-module {
display: none; /* Hide module for desktop */
}
.mobile-module {
display: block; /* Ensure module is visible */
float: right; /* Position it on the right */
}
}
```

Adjust `.desktop-module` and `.mobile-module` classes based on how your module containers are structured and named.

### Step 3: Apply Module Class Suffix

1. **Assign Module Class Suffix**: Go to your Joomla admin panel, navigate to Extensions > Modules, and edit your CF Filtering module.

2. **Add Module Class Suffix**: In the module settings, under the Advanced tab, add a module class suffix such as `desktop-module` or `mobile-module` depending on where you want the module to appear.

### Step 4: Save and Test

1. **Save Changes**: Save your module settings and ensure the module is assigned to the correct module position (left sidebar for desktop, right sidebar for mobile, or vice versa).

2. **Test**: View your VirtueMart pages on both desktop and mobile devices to ensure the CF Filtering module appears correctly in the designated sidebar based on screen size.

### Additional Tips:

- **Clear Cache**: After making changes, clear your Joomla cache and browser cache to ensure CSS updates are reflected immediately.
- **Responsive Design**: Ensure your VirtueMart template is responsive to adapt to different screen sizes seamlessly.

By following these steps and customizing the CSS and module settings accordingly, you should be able to achieve the desired layout for your CF Filtering module in VirtueMart based on mobile and desktop views. Adjust CSS and module class suffixes as needed to fit your specific template and layout structure.

Statistics: Posted by artml1 — Tue Jun 25, 2024 10:22 am

---