CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
DDVazquez
DDVazquez

Reputation: 13

how to create responsive content based on <div> width instead of device width

I'm trying to recreate a menu that can resize the html page (not the browser window) to different sizes in order to "show" how the responsive code works. you can go to this page to see what i mean:

http://switcher.oklerthemes.com/?theme=Porto

I'm trying to recreate the upper menu, the one with the "device images" but i have no idea of how to do it and i can find any good information about this. does anyone have any idea?

Upvotes: 0

Views: 119

Answers (1)

Platte Gruber
Platte Gruber

Reputation: 3213

One idea would be to wrap all of your code inside of a div with class .container, who's only job is to set the width. Then for each of the buttons, use javascript to resize the width of .container.

Here's an idea using jQuery:

$('#1').click(function(){
    $('.container').css('width', '100%')
});

and a fiddle to demonstrate (notice I'm using jQuery for this): http://jsfiddle.net/md98h19c/1/

Upvotes: 1

Related Questions