# Pyx's Modern Theme
**URL:** https://meta.discourse.org/t/pyxs-modern-theme/357665
**Category:** Theme
**Created:** [March 17, 2025, 11:17pm UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665 "2025-03-17T23:17:47Z")
**Posts on this page:** 1
**Showing post:** 5
### Author:  [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [March 18, 2025, 2:44am UTC](https://meta.discourse.org/t/pyxs-modern-theme/357665/5 "2025-03-18T02:44:45Z")
> [@Discourse Advertising Plugin (Ads)](https://meta.discourse.org/t/discourse-advertising-plugin-ads/33734):
>
> discourse2Summary Discourse Advertising allows the set up of advertisements on Discourseopen_bookInstall Guide This plugin is bundled with Discourse core. There is no need to install the plugin separately.warning AD-BLOCKERS If you are running an ad-blocker in your browser or through a vpn, the contents of your /admin/plugins page may be blanked out. Disabling your adblocker, using an incognito tab, or whitelisting your site should prevent this issue. Features …
\
I wonder if it’s possible to add an adaptive scale? I’d like to have a sidebar component on the right side.
> **CSS**
>
> ```plaintext
> /* Get the user's avatar width and set the maximum width of the ad container */
>
> /* Ad container styles */
> #list-area {
> display: flex; /* Arrange ads using flexbox */
> flex-direction: column; /* Display ads vertically */
> gap: 0; /* Remove spacing between ad images */
> padding: 0; /* Remove container padding */
> margin: 0; /* Ensure no extra margin around the ad container */
> max-width: 812px; /* Limit the ad container width to a maximum of 812px (avatar width: 48px) */
> }
>
> /* Ad link styles */
> .banner-ad {
> display: block; /* Make the ad container a block element */
> width: 100%; /* Ensure the ad container occupies 100% width */
> max-width: 100%; /* Prevent exceeding the maximum width */
> margin: 0; /* Remove spacing between ad containers */
> }
>
> /* Responsive ad image styles */
> .ad-image {
> width: 100%; /* Ensure the image occupies the full width of its parent */
> height: auto; /* Maintain the original aspect ratio of the image */
> max-width: 100%; /* Prevent the image from exceeding its container's max width */
> display: block; /* Fix the empty space issue at the bottom of images */
> margin: 0; /* Remove any additional space around the image */
> }
>
> /* Responsive Design: Adjust ad display for large and small screens */
>
> /* Adjust ad display on devices with a width less than 768px */
> @media (max-width: 768px) {
> #list-area {
> padding: 0; /* Ensure no extra padding on mobile devices */
> }
>
> .banner-ad {
> width: 100%; /* Ensure the ad occupies the full width on small screens */
> }
>
> .ad-image {
> width: 100%; /* Ensure the image adapts to the container width */
> height: auto; /* Maintain the image's aspect ratio */
> }
> }
>
> /* Further adjust ad images on very small devices (e.g., phones in portrait mode) */
> @media (max-width: 480px) {
> .ad-image {
> width: 100%; /* Ensure images adapt to the phone's screen width */
> max-width: 100%; /* Set the maximum width to 100% to avoid oversizing */
> height: auto; /* Maintain the image's aspect ratio */
> }
> }
>
> ```
\
> [@Right Sidebar Blocks](https://meta.discourse.org/t/right-sidebar-blocks/231067):
>
> discourse2Summary Right Sidebar Blocks shows a sidebar to the right of topic lists with a configurable list of blocks.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/right-sidebar-blocks)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-right-sidebar-blocks](https://github.com/discourse/discourse-right-sidebar-blocks)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features The component includes a few blocks you can display in the sidebar: popular-tags …
---
_[View the full topic](https://meta.discourse.org/t/pyxs-modern-theme/357665)._