nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

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:

Website%20example.png

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

Any help would be greatly appreciated

Find more posts tagged with

css

html

jquery

expandable image

Quick Links

Comments

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!