Rich-text Reply

Making Responsive Layout

JaniceB 12-11-14

Making Responsive Layout

Hi, I am a marketer and with very little experience with HTML (very very little). I recently started an experiment wherein I added a masthead banner on our site's landing page with the goal of testing if visitors will click the banner instead of the button on the lower right area of the page. 

 

My  main question is how do I make the banner resize in relation to the screensize? It looks fine on my laptop screen but when the screen size is smaller - say when viewed using a tablet - it does not resize accordingly. The whole site is responsive except for that masthead banner I added. The banner is just a div container with text "Click here for your free trial now" and hyperlinks to our registration page.

 

Hope you guys can help.

Level 1

adzeds 12-11-14
 

Re: Making Responsive Layout

Are you able to share the html code and CSS that you have used.

Should be easier to provide a solution for you then.
David Shaw
Level 11

Re: Making Responsive Layout

Hello Janice,

Unfortunately it does take a little bit of CSS / HTML knowledge to make changes to the images in a responsive layout.

One way you can do it is make changes to the CSS for different screen sizes.

 

There is not a great way to do this "yet" in the visual editor. So to do this we add the following code:

 

$('head').append('<style>#id-of-div{background-image:url("LINK TO FULL WIDTH IMAGE")}</style>');
$('head').append('<style>@media only screen and (max-width: 959px){#id-of-div{background-image:url("LINK TO IMAGE WITH MAX WIDTH OF 959px")}}</style>');
$('head').append('<style>@media only screen and (max-width: 767px){#id-of-div{background-image:url("LINK TO IMAGE WITH MAX WIDTH OF 767px")}}</style>');
$('head').append('<style>@media only screen and (max-width: 479px){#id-of-div{background-image:url("LINK TO IMAGE WITH MAX WIDTH OF 479px")}}</style>');

 

So a few changes you must make to the code above. You need to replace the following #id-of-div to be the actual ID (or CSS selctor) of the banner. you can get this by clicking the Edit Code in the bottom right hand side. There you will see a line of Javascript hat is replacing the image that was inserted when you made the change in the visual editor that looks something like this

 

$("SOME ID").css({"background-image":"http://someimage.jpg"});

 

Copy out the part that says SOME ID and replace the #id-of-div in all 4 places in the code above

 

Then replace the text that says "LINK TO IMAGE..." with the URL of the image you want to replace for each screensize.

 

PLEASE NOTE: these screen sizes might be different based on your site. All responsive sites are different. 

 

Bottom line is you will probalby want to talk with someone that has a little bit of CSS / HTML to help walk you through the setup. 

 

Good luck and please post any followups or perhaps a link to your site to help better assist you. Thanks!

 

Optimizely
JaniceB 12-15-14
 

Re: Making Responsive Layout

Thanks for the replies. I plan to end the test this week so I'll just change the audience to exclude those with mobile and tablet devices.

 

I'm sorry but you lost me with the codes. Robot Embarassed I'll use your tips for my next A/B test though. Thanks for helping!

Level 1