Having Trouble Changing Size of Expandable Image Thumbnails

jdunne08

I have this expandable image viewer that I cant seem to change the size of the thumbnails in the viewer. What I want to achieve is the 2 thumbnails would fill the width of the screen the first being 40% the second being 60% and when clicked it expands and reveals the other half of the first thumbnails image but actually setting a width to the thumbnails is where I'm having trouble with.


A mockup of what I want to make:




Jsfiddle of my progress: https://jsfiddle.net/Dunne08/8pd7brtx/24/


Any help would be greatly appreciated

Axwell

Your spans have fixed with in pixels - you should be using percentages if you want them to be 40% and 60% for starters. Also they both have the same span class so they are both set to the same width currently.

jdunne08

Axwell wrote: »

Your spans have fixed with in pixels - you should be using percentages if you want them to be 40% and 60% for starters. Also they both have the same span class so they are both set to the same width currently.

Thanks for replying. Do you know what I can do to separate them and give each their own span? I'm not too familiar with spans

Axwell

You declare their class name as span3 where you have the two <li> elements - you can give them whatever class name you want and create the relevant css for that with values for width etc.

jdunne08

Axwell wrote: »

You declare their class name as span3 where you have the two <li> elements - you can give them whatever class name you want and create the relevant css for that with values for width etc.

Yeah that's what I needed to do, got something going now. Thanks a lot for your time and help!