Queryads single DIV and responsive CSS (fixed)

[rdwebdesign]

By submitting this pull request, I confirm the following:

• I have read and understood the contributors guide, as well as this entire template.
• I have made only one major change in my proposed changes.
• I have commented my proposed changes within the code.
• I have tested my proposed changes.
• I am willing to help maintain this change if there are issues with it later.
• I give this submission freely and claim no ownership.
• It is compatible with the EUPL 1.2 license
• I have squashed any insignificant commits. (git rebase)
• I have Signed Off all commits. (git commit --signoff)

---

What does this PR aim to accomplish?:

This PR fixes #1461 (and related comment in #1284)

How does this PR accomplish the above?:

This PR removes the double DIV solution introduced in #1284 and #1264 and replaces it with a different approach.
A single div + responsive CSS targeting the div and its inner elements.

What documentation changes (if any) are needed to support this PR?:

none

[yubiuser]

Working on desktop and mobile.
Approving but waiting for @XhmikosR reply on #1461

[XhmikosR]

My suggestion in #1461 is to use unique classes not IDs. But anyway, I don't have the time to look into this more.

[rdwebdesign]

I used classes for most elements. I just used IDs on specific and unique elements, that appear only once on each page and already had IDs configured.

CSS IDs can be used on unique elements, but if you prefer I can replace them with new classes.

[PromoFaux]

Can someone please list off the pros cons of IDs vs unique classes? I'm not a (natural) web developer so I'll need something to inform a decision, cheers!

[rdwebdesign]

On the visual side, there isn't much difference. CSS will be applied (to classes or IDs) by the browser.

Usually I don't recommend the indiscriminate use of IDs in CSS.

Generally speaking (in CSS, javascript, jQuery, etc.):

• IDs are selectors used for unique items (which are never repeated on the same page);
• classes are another type of selector used for items that can be repeat on the same page.

Example:
When you use an ID called #wrapper, you're saying "This is the wrapper - the only one of its kind. There can't be others".
When you use a class called .wrapper you're saying "This is one of the wrappers, and there may be others like it".

IDs have greater specificity. This means they should only be used to style specific and unique items.

It is not a good practice to create IDs just to apply to styles, except in cases where the element is really specific / unique (I think that's our case here). On the other hand, when IDs already exist, there are no restrictions on applying CSS to them.

NOTE: I don't want to create problems. If you prefer I can replace the IDs with new classes.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
http://www.zeldman.com/2012/11/21/in-defense-of-descendant-selectors-and-id-elements/

[yubiuser]

Thanks for your explanation. This is an edge-case: there are only 2 elements - having a unique class or unique IDs seems like a tie here. I'm fine with the way it is now.

[pralor-bot]

This pull request has been mentioned on Pi-hole Userspace. There might be relevant details there:

https://discourse.pi-hole.net/t/pi-hole-ftl-v5-12-web-v5-9-and-core-v5-7-released/51795/1