Adjust Whitespace between columns

Hi @tomdevis!

The horizontal spacing on Blask’s portfolio is controlled by some javascript, so you’d need a child theme to edit it.

There are a few steps, once the child theme is in place:
1. copy the script into the child theme
2. edit the spacing value
3. tell the child theme to skip the original script and load your new one instead
4. add a little CSS to change the vertical padding (the javascript only does the horizontal spacing).

It looks like you’ve already done step 4 – nice. I’ll include it for anyone else looking at this thread later.

I’ll wait here while you get that child theme ready ??

Good to go? Great, let’s dive in.

First, open the parent theme folder and look in the /js folder – you want to copy the portfolio.js file into your child theme folder. Don’t bother making a js folder of your own, just drop it right in the main child theme folder (we don’t have enough files to make organizing them into folders necessary).

In your copy of the portfolio.js file, edit the three gutter values. They should be at 40 when you start, you can set them to whatever you want. All three should be the same, whatever you decide.

Next, in your child theme’s functions.php file, add the following:

function switch_blask_portfolio_js() {
	wp_dequeue_script( 'blask-portfolio' );
	wp_enqueue_script( 'my-blask-portfolio', get_stylesheet_directory_uri() . '/portfolio.js', array( 'jquery', 'masonry' ), '20150624', true );

}
add_action( 'wp_enqueue_scripts', 'switch_blask_portfolio_js', 12 );

That tells the theme to ignore the parent theme script, and use yours instead.

Lastly, some CSS. You can add this in your child theme’s style.css file, or you can use the Additional CSS panel in the Customizer (assuming you’re running at least WordPress 4.7) or with something like the Jetpack Plugin using the Custom CSS Module.

.single .hentry, .hentry.portfolio-entry {
    margin: 0 0 0.5em;
}

Adjust the 0.5em to whatever looks good with your chosen spacing. The original value was 3em, and you can adjust it as needed.

Let me know how that all works out!

Thank you Chad!
You truly are a hero! I never would’ve checked the javascript files!
I ended up using a gutter of 10 with a margin of 0.7em to get some even thicknesses.

If it is no problem, I would like to ask two more questions I’m currently stuck at.

1. I would like to change the sizes of the areas that I marked with red in the following screenshot. I believe this is decided in multiple areas but can not find any.
https://tomdevis.com/Files/screenshot.png

2. I have some trouble aligning the different elements to the center. They are all aligned to the left.

Thanks again for the help already, it was a huge help!
I can not wait to finish my portfolio with this template!!!

Kind regards,
Tom

Hi again!

I would like to change the sizes of the areas that I marked with red in the following screenshot. I believe this is decided in multiple areas but can not find any.

The spacing on the left of the page is controlled with this style:

@media screen and (min-width: 1025px) {
.site-header {
    left: 40px;
}
}

The lower the left value is, the closer the sidebar will be to the edge of the screen.

The space on either side of the actual grid is controlled here:

@media screen and (min-width: 1025px) {
.site-content {
    margin-left: 360px;
    width: calc(100% - 400px);
}
}

Decreasing the margin-left value will shift the portfolio to the left, narrowing that gap.

Decreasing the 400px part of the width will make the portfolio wider, decreasing the right margin.

A note on that width – this will also change the size of the grid items, so it may not look right until you save and refresh the page. The Javascript will need to recalculate things ??

I have some trouble aligning the different elements to the center. They are all aligned to the left.

Which elements are you working on centering? Depending on how they’re structured, it can be tricky sometimes ?? Happy to take a look!

Hey Chad,
Thank you again for a great reply!
The elements I’m trying to center were the menu, description, social media icons and the logo.
I already succeeded in centering the description and menu with using “text-align: center;”
But I’m pretty stuck on the logo and social media icons.

Also would it be possible to resize to logo depending on the screen size?
For example when viewing the website on an Iphone 4s all you can see is the logo.

Knd regards,
Tom

Hi Tom!

Centering is always fun – sometimes its just as much about the parent element as it is about the thing you’re trying to center.

Give these a try:

/*Center logo on smaller screens*/
@media screen and (max-width: 1024px) {
    #masthead {
    	position: relative;
    	text-align: center;
    }
}

/*Center social links menu*/
.social-links {
	text-align: center;
}

.social-links ul {
 	display: inline-block   
}

For the size of the logos, you can use a media query, similar to the one I’ve used in the above snippet.

Here’s one that will limit the logo to 150px wide on screens 700px and narrower:

/*Responsive Logo*/
@media screen and (max-width: 700px) {
    .site-logo-link img {
    	max-width: 150px;   
    }
}

You can tweak that, and add additional ones for other screen sizes as needed.

Hey Chad, as always your help is hugely appreciated, it works as a charm!

I’ll still have to play a bit with the exact sizes I want it to rescale to but I’m pretty sure I’ll manage that without any help ??

I’m still stuck on the white spaces on the right though.

This is what I’ve added:

@media screen and (min-width: 1025px) {
.site-header {
    left: 0px;
}
.site-content {
    margin-left: 270px;
    width: calc(100% - 270px);
}
}

But with this, I still get a white bar on the right.

This you can see on https://www.tomdevis.com

Sorry for all the dumb questions.

Kind regards,

Tom

I see what you mean! It might help to increase the width values on the portfolio projects:

@media screen and (min-width: 1025px) {
	.portfolio-wrapper .portfolio-entry {
    	width: 49%
	}
}

@media screen and (min-width: 1440px) {
	.portfolio-wrapper .portfolio-entry {
	    width: 32%;
	}
}

Those are the highest values I could put in for the three and two column views, respectively. Unless you start using decimals like 32.5% ??

I’ve finally managed to adjust it!
I forgot I added some extra code somewhere else that overrode the changes I was trying.

Thank you for all your help Chad!

You’re welcome! Glad you got it working! ??