Rich-text Reply

Insert tag only above a certain page width

garridovaz 06-22-16

Insert tag only above a certain page width

I have a button (really only an "a" tag) that on the original website that I'm optimizing gets hidden with "display:none" below a certain page width through the use of a media query.

 

I want this button to show below this page width, with different css style properties. As I see it, there are two approaches:

 

- Add a new element that only appears above  a certain page with through its own media query;

OR

- Edit the existing element's style attached to the existing media query so that instead of adding a display:none I tweak the style as I want it.

 

However, I'm having a hard time editing media queries through the editor. How would the community advise me to do this?

Fernando Garrido Vaz
Product Manager
CouchPsycho 06-22-16
 

Re: Insert tag only above a certain page width

Hi,

how about adding a new class to the tag only within the variation. After this you can add specific style definitions using media queries within the experiment css. If your selector is specific enough, you should get the desired result.

Kind regards

Michael



"the essence of the creative act is to see the familiar as strange." (anonymous)
garridovaz 06-22-16
 

Re: Insert tag only above a certain page width

This is a new element that only exists in the variation. So, your idea should be perfect except the experiment css editor won't let me have a line starting with @media. How can I add media queries in the experiment css editor?
Fernando Garrido Vaz
Product Manager
CouchPsycho 06-22-16
 

Re: Insert tag only above a certain page width

Are you sure? This works within my experiment css f.e.

@media (max-width: 1016px) 
{ 
  .mrCountdownIntro
  {
    margin-top:140px; 
    margin-left:16px;
  }
}

If ist does not work for you, you may do something like:

 

$("body").append("<style>add your css here</style>");

in your variation code.




"the essence of the creative act is to see the familiar as strange." (anonymous)