hey

 

i am trying to produce a portfolio showing work but when i put it all together nothing shows it is properly something simple

					<ul id="portfolio" class="og-grid">
						<li class="mix web-design">
							<a href="images/work1.jpg" data-gal="lightbox[folio]"><img src="images/work1.jpg" alt=""></a>
							<div class="meta_work">
								<a class="w_title" href="single_work.html"> We all scream </a>
								<div class="meta">
									<span> <a href="#"> illustration </a> </span>
									<span> <a href="#"> graphics </a> </span>
								</div><!-- /meta -->
							</div><!-- /meta work -->
						</li><!-- /item -->

						<li class="mix photos">
							<a href="images/assets/work2.jpg" data-gal="lightbox[folio]"><img src="images/work2.jpg" alt=""></a>
							<div class="meta_work">
								<a class="w_title" href="single_work.html"> Neon "B" </a>
								<div class="meta">
									<span> <a href="#"> photo </a> </span>
								</div><!-- /meta -->
							</div><!-- /meta work -->
						</li><!-- /item -->

						<!-- /dont remove this line --><li class="gap"></li>
					</ul><!-- /my gallery -->

#portfolio {width: 100%; text-align: justify; font-size: 0.1px;}
#portfolio:after {content: ''; display: inline-block;width: 100%;}
#portfolio .mix {display: none; opacity: 0; width: 240px; height: 260px; vertical-align: top; color: #FFFFFF; font-size: 30px; text-align: center; line-height: 200px; margin: 0 10px 80px 0; border-radius: 4px; float: left; position: relative;transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;}
#portfolio .mix img {border-radius:  4px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;}
#portfolio .mix:hover img {box-shadow: -4px 4px 6px rgba(29, 198,222, 0.4); transform: scaleX(-1); -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";} 
#portfolio .mix .overlay {border-radius: 4px; line-height: 24px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1DC6DE; background: rgba(29, 198, 222, 0.; opacity: 0; transform: scaleX(-1); -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";}
#portfolio .mix:hover .overlay {transform: scaleX(-1); -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";}
.overlay .like_work {color: #FFFFFF; position: absolute; right: 10px; top: 20px; font-size: 20px; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;}
.overlay .like_work:hover {color: red;}
.overlay p {font-size: 17px; padding: 30px; margin: 40px 0 0;}
.meta_work {position: relative; line-height: 18px; text-align: center;}
.meta_work .meta {z-index: 1; position: relative; margin: -6px 0 0 0;}
.meta_work .w_title {font-size: 17px; padding: 6px 0 0; display: block; font-weight: 700; line-height: 28px; z-index: 99; position: relative;}
.meta_work .meta span:before {color: #D4D4D4; content: "/"; position: relative; left: -5px;}
.meta_work .meta span:first-child:before {content: "";}
.meta_work .meta span a {color: #999898; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;}
.meta_work .meta span a:hover {text-decoration: underline; color: #1DC6DE;}

anyone can work it out will be great

 

thanks

We really need to see the actual live/development site to be able to get to grips with what you do/don't see. Is there a URL you can provide?

give that a try, things are subject to change and layout

Edited September 9, 201411 yr by David Cook

Looks like you have a few unclosed tags and stray closing-tags.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.davidcook.me%2Ftest2%2F%23

Fixing the markup errors might help

You also have 241 css errors (most caused by vendor prefixes though)

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.davidcook.me%2Ftest2%2F%23

i have cut loads down but everything that is left is not regarding the portfolio section

You've changed #my_gallery to #portfolio in both the HTML and CSS but forgot about the JS.

In custom.js change the gallery section to

if ($("#portfolio")[0]) {
        $('#portfolio').mixitup({resizeContainer: false});
    }
    if ($("a[data-gal^='lightbox']")[0]) {
        $("a[data-gal^='lightbox']").prettyPhoto({
            animation_speed: 'normal',
            theme: 'dark_rounded',
            autoplay_slideshow: false,
            overlay_gallery: true,
            show_title: false
        });
    }

Edited September 9, 201411 yr by Wynn

changed that and reloaded it, and still not showing,

That's because you've moved the script tags to the top of the page.

Put them below the footer, just as they are on the premium theme you're taking the code from.