Is there a way to apply a specific class to an ID based on screen height using only CSS, HTML, or LESS without pre-compilation? The goal is to set classes from Add2Any, not CSS properties.
Here is a link to the jsfiddle.
The desired outcome is to have the #add2any div with specific classes for small screens:
<div id="add2any" class="a2a_kit a2a_default_style">
For larger screens, the classes should be:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Any suggestions on how to achieve this?
We are looking for a solution that does not involve JavaScript or jQuery to avoid any lag and unnecessary <div> elements. Only the relevant style should be displayed.
Background
The objective is to modify the layout and size of the AddToAny bar for smaller screens, showcasing a more compact design with fewer buttons. By using AddToAny's classes, future updates won't rely on fixed CSS within stylesheets. Ensuring browser compatibility is crucial.
Current CSS Approach
@media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Despite investigating frameworks like Foundation, no suitable solution has been found yet.
Conditional CSS based upon div, not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure JavaScript in HTML
**Edit 2 **
Using Less or Sass as suggested in this question seems excessive since the solution needs to be applied across all pages.
Considering self-hosting the script and adding custom JavaScript might be a more practical choice, as AddToAny's class names are likely to remain consistent even if the underlying script changes. All customization instructions endorse direct utilization of AddToAny's class names.