2nd, 3rd, 4th images are dropped down about 20 px
Closed this issue · 10 comments
Hi,
This is great but I am having a few issues. All secondary images in the slideshow (1 is good, 2-5 are off) are dropped down and I can't get them positioned correctly. See screenshots. Any help would be greatly appreciated. Thanks!!
Justin
Note all images are the same size, 960 x 540px. Attached is the CSS. I didn't modify the rest of the code aside from changing the color of the control dots.
Interesting — do you have the site on a staging somewhere where I can inspect it?
Wow Ben your response time is great. I got frustrated and left work.
I'll put it online and send you the link tomorrow. Thanks again!!
No problem. I think its more a case of getting me right at the perfect time to respond :-)
Here's the live version:
http://www.beautyisdesigned.com/portfolio/index.html
I added the BG color back in to emphasize the positioning issue.
Thanks for the help!!
@digibrink You'll need to add margin: 0; to the figure elements.
figure { margin: 0; }Looks like they're not covered by your CSS reset.
You are amazing!!! Thank you so much!
Ok. I feel dumb, but let's face it -- I am awful at code. Everything is working great, except I can't duplicate the functionality of the code for the next item down the page (the next div). It just loads the images into the first div (for ex. the 2nd button in either project loads project A's 2nd image [#item-2] into the first div).
I assume it has to do with naming convention -- do I need a full css script per project? That seems like overkill but every time I try to fix it I break the whole page.
http://www.beautyisdesigned.com/portfolio/index.html
Any help would be greatly appreciated.
Thanks!
Justin
Derp. Nevermind I think I figured it out. It was a naming issue, I was just renaming the wrong things. Online site updated.
Exactly my issue too!
My reset was incorrect! saved my day..