Rich-text Reply

Layout changes for responsive design

YulianSha 04-23-15

Layout changes for responsive design

[ Edited ]

Hi,

At the moment I'm trying to change the height of the banner background image of a responsive website. At the moment the banner background image is really small for mobile. I only want to change the height for mobile. The website is made with media queries.( @ media {max-width: 480px} )

If I change the height, it affects the whole page, so I was wondering what I have to write down in the code so that the changes of the layout only affect the mobile page.

td_evans 04-23-15
 

Re: Layout changes for responsive design

[ Edited ]

Does the broader test affect all screen sizes?

 

If yes:

I would add a class onto the body for the variation, then use experiment CSS to style the variation using specific selectors within that class. In the experiment CSS you can use media queries.

 

If no: 

I would use experiment targeting to target mobile devices with a specfic screen size.

Thomas Evans
Technical Product Manager - Conversion @ Secret Escapes

Level 2

Re: Layout changes for responsive design

Hello @YulianSha

Anytime you want to do changes based on a responsive design you need to add a media query. There are two ways you can do this. One is to write the media query

 

$('head').append("<style type='text/css'>@media screen and (max-width: 300px) {img {width:300px}}</style>");

This would append to the head of your document CSS that is only available to screens up to 300px

Another way to accomplish this is to use the Visual Editor to add a class then use Experiment CSS to write the CSS specific to those elements

 

To add the class simply click on an element and choose Edit Element >> Edit Classes. I would then give it a class name that is the same as the variation ID> You can get the variation IDS by going to Options >> Diagnostic Report. This way the class name is always unique to the variation

Then in your experiment JS you would write regular CSS using media queries

 

@media screen and (max-width: 300px) {
    .variation-1234567 {
        width: 300px;
    }
}

for more information about testing on responsive sites you can visit our KB article located here: https://help.optimizely.com/hc/en-us/articles/201245820

Optimizely
lstude 04-30-15
 

Re: Layout changes for responsive design

To piggyback off @bradtaylorsf's comment, his recommendation to name your class specific to your experiment is so that you don't accidentally override any styles on pages where the test is running that may share the same class name (either currently or in the future).

 

Naming it something like .variation-1234567 or .optimizely-exp-5 helps mitigate that.

 

 

Laura Stude | Front-End Engineer @ clearhead.me

Level 2