Applying a class based on media query - pure CSS or HTML needed

Question

I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.

jsfiddle

What I want to do is set the div #add2any to this for small screens.

  <div id="add2any" class="a2a_kit a2a_default_style">

Otherwise I want this:

  <div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">

Is this possible, and how?

Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.

Background

The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.

CSS so far

@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

Unable to find solution from any of these, I'm using foundation framework.

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 **

Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.

Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.

Since you are almost at the (apparent) solution, what exactly is causing you troubles? Is it not possible the way you attempted and are in search for another solution? — klaar, Aug 07 '15 at 11:21
You can't add class names with CSS, so you'll either need duplicate elements in your markup (as Marcos Pérez Gude suggests), or if you know which styles `.a2a_kit_size_32` can apply you could write overrides that are only active within a media query. — Nils Kaspersson, Aug 07 '15 at 11:31
Just select using the ID and use media-queries to make your design responsive. Or does this introduce other problems? — klaar, Aug 07 '15 at 11:41
so I'm now looking into using LESS, so that the ID I use for the sharing bar `
` can inherit the right class - dependending on the screensize. I have writte the LESS code, but can it be compiled/interpreted dynamically, and how? Do I add the LESS .js file to the CSS? Or the HTML? — Mousey, Aug 18 '15 at 00:02
Can you tell me why you need two `div`s for this? You can use just one in my opinion. Please put your problem in an [SSCCE](http://sscce.org/) or a snippet and give us something to work on instead of just code-oneliners and a whole lot of fuss. — klaar, Aug 18 '15 at 07:07
@klaar re-read the question, there is only `
` needed but the classes change. — Mousey, Aug 18 '15 at 20:54
@Klaar there is only one `
` but with two different options for classes being used. The SO standard is [MCV](http://stackoverflow.com/help/mcve] which this already is, a link to Add2Any is there as well as the code they suggest. I will try and find my jsfiddle from the other day so you can replicate easily. — Mousey, Aug 18 '15 at 20:59
Your JSFiddle link got removed during the edit, there's only a piece of text saying JSFiddle but no link attached to it. In other news, you have a media query with max-height; does that not work like expected? Also: you want to attach a CSS-class to an HTML-element when meeting certain criteria. What do you actually want to achieve? Because I have a gut feeling that you can do it in another way. — klaar, Aug 19 '15 at 07:08
@jsfiddle is there - posting it here too, it has links to documentation like the question does http://jsfiddle.net/Mousey/tugt6oay/ — Mousey, Aug 20 '15 at 00:27

Marcos Pérez Gude · Accepted Answer · 2015-08-07T11:28:31.000

5

Edited

If you have this html:

 <div  class="a2a_kit a2a_default_style">
 <div  class="a2a_kit a2a_kit_size_32 a2a_default_style">

You can make a media query like this:

 /* first state */
 .a2a_kit { display: block; }
 .a2a_kit.a2a_kit_size_32 { display: none; }

 @media screen and (max-height: 430px) {
     /* reverse behaviour on max-height 430 px */
     .a2a_kit { display: none; }
     .a2a_kit.a2a_kit_size_32 { display: block; }
 }

edited Aug 07 '15 at 11:28

answered Aug 07 '15 at 11:23

Marcos Pérez Gude

21,869
4
38
69

You can't have multiple elements with the same #id – Razvan B. Aug 07 '15 at 11:24
this didn't work, it does not recognize `. a2a_kit.a2a_kit_size_32` – Mousey Aug 07 '15 at 15:39
You have an space between the dot and the a – Marcos Pérez Gude Aug 08 '15 at 16:21
that's my keyboard autoformatting, I copied & paste the code from your answer, no combination or adding or removing spaces worked (which I tried after). – Mousey Aug 12 '15 at 23:29
If your html is exactly this: `

` the selector `.a2a_kit.a2a_kit_size_32` works fine. If you change html tell us what is the change.
– Marcos Pérez Gude Aug 13 '15 at 06:23
works now thanks @MarcosPérezGude didn't before due to syntax error on a CSS comment. AddToAny script buttons show correctly, just got to get scipt running from both sets of icons (only small ones work right now) – Mousey Sep 11 '15 at 20:14
I tell you. My pleasure to help you. – Marcos Pérez Gude Sep 11 '15 at 21:29
this hack means problems formy team, as duplicate charts and more elements inside duplicated div needs javascript duplicated efort and time. Finally we go with the simpler javascript solution, on init and on resize call a function that changes class to the div, – Rogelio Triviño May 07 '20 at 10:35

score 1 · Answer 2 · answered Aug 07 '15 at 11:51

1

You just need to set up modified styles in your media queries:

#add2any {
   /* any styles you want to apply all the time */
   background-color: blue;
   width: 100px;
   color: white;
}


@media (min-width: 420px) and (max-width: 760px) {
    /* styles when screen is greater than 420px wide but less than 760px */
    /* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
    #div1 {
        background-color: red;
        width: 300px;
        color: yellow;
    }
}

@media (min-width: 760px) {
    /* styles when screen is greater than 760px wide */
    #div1 {
        background-color: green;
        width: 600px;
    }
}

JSFiddle Demo

*if you don't want to style based on the ID, you can add a unique class and style that

answered Aug 07 '15 at 11:51

JRulle

7,448
6
39
61

I'm trying to avoid doing this, which would cause issues as soon as the AddToAny service alters its css slightly. It's not a case of resizing the images but of a total altered layout for shorter screens – Mousey Aug 07 '15 at 15:41
Is the AddToAny service a 3rd party tool or do you control it? – JRulle Aug 07 '15 at 16:16
it's 3rd partly, a social sharing service – Mousey Aug 07 '15 at 17:46
Then won't changes to their CSS cause issues regardless of how you style your on-page element? – JRulle Aug 07 '15 at 17:53
as long as the class names stay the same as those I gave it will be find - the class names are used by all AddToAny users within the code calling the script – Mousey Aug 08 '15 at 23:12

Applying a class based on media query - pure CSS or HTML needed

2 Answers2

Edited