Destramic Posted October 2, 2015 Share Posted October 2, 2015 hey guys im trying to make grid for a image cropper script im making...but im having a bit of trouble getting it to work/look the way i want it to. i'm not the best when it comes to css. you can see my grid here: https://jsfiddle.net/destramic/ztdpou8w/ the problem i have is where you stretch the grid too much or shrink it too small everything goes out of place...i'm more concerned about the border separation when stretching. how can i change size of grid but also making it looking consistent please? thank you Quote Link to comment https://forums.phpfreaks.com/topic/298406-image-cropper-grid/ Share on other sites More sharing options...
maxxd Posted October 3, 2015 Share Posted October 3, 2015 Try using flexbox layout. If you're using .less, this can help with any necessary backwards compatibility. Quote Link to comment https://forums.phpfreaks.com/topic/298406-image-cropper-grid/#findComment-1522182 Share on other sites More sharing options...
Destramic Posted October 3, 2015 Author Share Posted October 3, 2015 thank you....flex works well although i'm unable to to get the ul into 3 rows. http://jsfiddle.net/destramic/ztdpou8w/8/ i used: li .row-two{ order: 2; } but all li's appear inline how can i achieve a break please? thank you Quote Link to comment https://forums.phpfreaks.com/topic/298406-image-cropper-grid/#findComment-1522210 Share on other sites More sharing options...
Destramic Posted October 8, 2015 Author Share Posted October 8, 2015 can anyone please help me on how to display this ul as 3 rows please? to look like this: ___________________ |_____|______|______| |_____|______|______| |_____|______|______| thank you Quote Link to comment https://forums.phpfreaks.com/topic/298406-image-cropper-grid/#findComment-1522680 Share on other sites More sharing options...
Destramic Posted October 8, 2015 Author Share Posted October 8, 2015 i'll be happy to pay for someone to get it to how i want...pm me if interested thank you Quote Link to comment https://forums.phpfreaks.com/topic/298406-image-cropper-grid/#findComment-1522692 Share on other sites More sharing options...
maxxd Posted October 8, 2015 Share Posted October 8, 2015 Give this a shot as a starting point - https://jsfiddle.net/guzfmfuw/ Quote Link to comment https://forums.phpfreaks.com/topic/298406-image-cropper-grid/#findComment-1522694 Share on other sites More sharing options...
Destramic Posted October 8, 2015 Author Share Posted October 8, 2015 brilliant thank you...looks top notch now: http://jsfiddle.net/destramic/ztdpou8w/ Quote Link to comment https://forums.phpfreaks.com/topic/298406-image-cropper-grid/#findComment-1522749 Share on other sites More sharing options...
maxxd Posted October 9, 2015 Share Posted October 9, 2015 Looks good - glad you got it working! Quote Link to comment https://forums.phpfreaks.com/topic/298406-image-cropper-grid/#findComment-1522806 Share on other sites More sharing options...
Destramic Posted October 10, 2015 Author Share Posted October 10, 2015 the only problem i can see with it really is the span containing the + doesn't align centre or vertically middle. once i have the cropper and upload working correctly i'll put a link up for you to see Quote Link to comment https://forums.phpfreaks.com/topic/298406-image-cropper-grid/#findComment-1522854 Share on other sites More sharing options...
scootstah Posted October 11, 2015 Share Posted October 11, 2015 Get rid of the absolute positioning on the span and set the li to center its content with flexbox. http://jsfiddle.net/ztdpou8w/10/ Quote Link to comment https://forums.phpfreaks.com/topic/298406-image-cropper-grid/#findComment-1522983 Share on other sites More sharing options...
Destramic Posted October 11, 2015 Author Share Posted October 11, 2015 ouch!...now that is bad boy! thank you Quote Link to comment https://forums.phpfreaks.com/topic/298406-image-cropper-grid/#findComment-1522984 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.