Portfolio-wedding

• 

  lightskyphotography · Member · Jan 25, 2017 at 9:22 pm

  • Copy link
  • Add topic to favorites

  How can I make it centered- or make the portfolio have columns witouth messing up the way the mobile looks. I would like to have it layered like my wedding page.

  https://lightskyphotography.com/weddings-2/

  now its like this
  https://lightskyphotography.com/portfolio/weddings/ ( i have this huge blank space)

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 26, 2017 at 6:44 am

  • Copy link

  Hi, your /weddings-2/ page is set up as your Blog page. When you do that, anything you enter into the content area of that page in the editor will be ignored and the theme will display a listing of your posts in the style and design set for a blog (posts) page. The /portfolio/weddings/ page is the display of the Wedding Portfolio Project. Typically you don’t put a display posts shortcode into a Portfolio Project page, which is sort of mixing up two different posts types.

  Add the following to the very end of your custom CSS and then take a look at your /portfolio/weddings/ page and see what you think.

  .single-jetpack-portfolio .display-posts-listing li {
  	margin: 0;
  	max-width: 460px;
  	padding: 0;
  
  }
  .single-jetpack-portfolio .display-posts-listing {
  	padding: 0;
  	text-align: center
  }

• 

  lightskyphotography · Member · Jan 26, 2017 at 9:11 pm

  • Copy link

  That worked! Also, I am having an issue on my mobile device. I see the photos have this HUGE gap in between so when I scroll down it takes for ever to see the photos.

  https://lightskyphotography.com/portfolio/family/ I talked to someone- this is what they said
  f you look at the theme demo – that empty space is meant to display a text description about the Portfolio Project – https://binderydemo.wordpress.com/portfolio/james/

  WP.comThu, Jan 1, 6:23 PM
  To hide this area on all of your Portfolio Pages you will need to use CSS – but I cannot provide you with that CSS here in the chat. You’d need to post in our CSS forums

• 

  thesacredpath · Member · Jan 27, 2017 at 7:49 pm

  • Copy link

  Hi, add the following to the very bottom of your custom CSS. In my testing, it all works all the way down to phone size, but make sure and verify that.

  .single-jetpack-portfolio .portfolio-gallery {
  	width: 100%;
  }
  .single-jetpack-portfolio .portfolio-main {
  	margin-left: 50px;
  }
  @media screen and (max-width: 939px) {
  	.single-jetpack-portfolio .portfolio-gallery {
  		float: right;
  	}
  }

• 

  lightskyphotography · Member · Jan 28, 2017 at 3:25 am

  • Copy link

  So most of the photos are good but now it’s the family one that is showing super small. I dont understand why the code doesnt’ apply to all of them.

• 

  lightskyphotography · Member · Jan 28, 2017 at 3:52 am

  • Copy link

  oh also. the mobile looks perfect. but i forgot to mention that now the photos on the computers are showing HUGE.

• 

  staff-loquaciousloon · Staff · Jan 31, 2017 at 4:21 pm

  • Copy link

  Hi there!

  So most of the photos are good but now it’s the family one that is showing super small. I dont understand why the code doesnt’ apply to all of them.

  Do you mean the photos on https://lightskyphotography.com/portfolio/family/ ? I’ve just pulled them up on a mobile device and they look normal for me – what browser are you using on your phone? Or were you looking at something else? :)

• 

  staff-loquaciousloon · Staff · Jan 31, 2017 at 4:23 pm

  • Copy link

  oh also. the mobile looks perfect. but i forgot to mention that now the photos on the computers are showing HUGE.

  These ones also look good to me, but the size looks like it’s being set in your custom CSS, here:

  @media screen and (min-width: 481px) {
  	.single-jetpack-portfolio figure {
  		width: 45%;
  		margin: 20px auto;
  		height: initial;
  	}
  ....

  That media query has other items in it, but the width: 45% is the important part. Decreasing that should make your images smaller :)

• 

  lightskyphotography · Member · Jan 31, 2017 at 5:12 pm

  • Copy link

  So the issue I am having now is with the desktop version. Because I was trying to fix the mobile version. which is perfect now. The photos in the other portfolios are showing really big. What I would like to do is display the photos this way https://lightskyphotography.com/2017/01/20/camilo-jennifer/
  but now the photos are showing like this
  https://lightskyphotography.com/portfolio/family/
  it’s taking the entire screen. I tried changing the width and it;s not doing anything :(

• 

  staff-loquaciousloon · Staff · Jan 31, 2017 at 7:16 pm

  • Copy link

  I see the difference, thank you for the link.

  The reason they look so different is because one is a Portfolio Project (family) and the other is a Blog Post (camilo-jennifer).

  If you’d like the portfolio images to look more like the blog post images, try decreasing that width percentage I mentioned in my last message. That will make the images smaller so they look more like the blog posts :)