beckybramwell Posted February 15, 2014 Share Posted February 15, 2014 (edited) Hey, I'm re-designing my portfolio (making it responsive) and having a bit of trouble with fancybox! If you scroll down to the Portfolio section, and click on an area (i.e. Web Design), you'll know what I mean. Any help will be much appreciated! URL: beckybramwelldemo.com Edited February 15, 2014 by beckybramwell Link to comment Share on other sites More sharing options...
ChrisLannister Posted February 15, 2014 Share Posted February 15, 2014 A quick fix might be to add a div immediately after your portfolio section? I'm not familiar with fancy box but wherever the transition is in the code, can you copy and paste that? Link to comment Share on other sites More sharing options...
beckybramwell Posted February 15, 2014 Author Share Posted February 15, 2014 Thanks for the reply! I've tried adding another section, but it will bring that over it, like it does the footer. It works ok on my non-responsive site: beckybramwell.com and I've copied the scripts, html & styling over from that. By transition, do you mean the script for it? I have a few different files for that Link to comment Share on other sites More sharing options...
beckybramwell Posted February 16, 2014 Author Share Posted February 16, 2014 Can anyone help with this pleaaase? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 16, 2014 Share Posted February 16, 2014 (edited) Remove height: 100% !important; EDIT: lose the max-width as well img { height: auto; /* max-width: 100%;*/ } add overflow: hidden; to ul.portfolio {} the UL with class portfolio children LI elements are floated, and the UL cannot detect the area of these floated elements so the height becomes 0, its only when JavaScript/JQuery adds height to the UL after the images/content is displayed, that it then adjusts to show the content. using overflow: hidden; enable the UL to detect the area of these floated child li elements and adjust accordingly. another option to consider is to add min-height of around 500px as well. Edited February 16, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
beckybramwell Posted February 16, 2014 Author Share Posted February 16, 2014 I've made the suggestions, but it's still messing up: beckybramwelldemo.com Link to comment Share on other sites More sharing options...
dsonesuk Posted February 16, 2014 Share Posted February 16, 2014 MORE info than just messing up! would be helpful, HOW is it being messed up! Link to comment Share on other sites More sharing options...
beckybramwell Posted February 16, 2014 Author Share Posted February 16, 2014 I'm not sure, that's why I was asking for help with the link I posted! All i know is that it's to do with with .filter or ul.portfolio and that it works on a non-responsive site Link to comment Share on other sites More sharing options...
dsonesuk Posted February 16, 2014 Share Posted February 16, 2014 Well it looks fine to me, tell us what you consider as messed up, or we just wont be able to help. Link to comment Share on other sites More sharing options...
beckybramwell Posted February 16, 2014 Author Share Posted February 16, 2014 When you click on a filter (i.e. Illustration or Web Design etc) the images go large, then back to normal size. I'm trying to make them so they remain the same size throughout - so that it has a smooth filter. If that makes sense? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 16, 2014 Share Posted February 16, 2014 The only solution to fix this is to use max-width to image, by the way it shows the same problem on desktop view this works for desktop .portfolio img { max-width: 342px; } you may have to adjust it for mobile, tablet etc Link to comment Share on other sites More sharing options...
beckybramwell Posted February 17, 2014 Author Share Posted February 17, 2014 Brilliant, thanks, getting there! I added that, then changed it to max-width: 30%; It still has the same effect (i.e. keeps all images the same size when it moves.) But now the second row of images overlap the first row when you click through each section Link to comment Share on other sites More sharing options...
ChrisLannister Posted February 17, 2014 Share Posted February 17, 2014 Brilliant, thanks, getting there! I added that, then changed it to max-width: 30%; It still has the same effect (i.e. keeps all images the same size when it moves.) But now the second row of images overlap the first row when you click through each section Wow the site is starting to look good. Can you try adding/moving a clear fix div after your <ul>portfolio.group? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 17, 2014 Share Posted February 17, 2014 Did you use max-width: 30% on img or li tag, cause it seems rather small for img, this layout seems to be set up for three column as it uses nth-child(2n) and nth-child(3n), so making img/li smaller so you have more columns is going to really mess up what these selectors point to, so you WILL get strange results. Link to comment Share on other sites More sharing options...
beckybramwell Posted February 17, 2014 Author Share Posted February 17, 2014 I don't really know what's going on with it now haha. I added max-width: 30% to .portfolio li. I also used nth child to not have a margin on the third image (desktop), and no margin on 2nd image (tablet) Link to comment Share on other sites More sharing options...
beckybramwell Posted February 18, 2014 Author Share Posted February 18, 2014 done it! Just need to fix the rest of my site now Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now