carbybarby838

Great, let me know if it works.

Also, I realized I made a mistake. What I meant to type was:

If you’d like to make the same changes to galleries with 4, 5, 6, 7, 8, or 9 columns, add this CSS as well. Replace the # with the number of columns you’d like to display, and replace 100/# with 100 ÷ the number of columns (for example, if you were doing 4 columns, do 100 ÷ 4 to get 25%).

• This reply was modified 6 years, 2 months ago by carbybarby838. Reason: Added clarity

Follow up: The above code works for images that are 16×9, but wide images outside of those proportions are still cut off at the top/bottom (though they do not appear to be stretched).

There might be a neater way to do this but see if this works:

.section-inner.post-##.page.type-page.status-publish.hentry.missing-thumbnail > div {
	max-width: 1000px;
}

.section-inner.post-##.page.type-page.status-publish.has-post-thumbnail.hentry.has-thumbnail > div {
	max-width: 1000px;
}

Disclaimer: I’m not a professional web developer

• This reply was modified 6 years, 2 months ago by carbybarby838. Reason: Realized styling "p" was unnecessary
• This reply was modified 6 years, 2 months ago by carbybarby838. Reason: Realized second selector could be shortened

All right, just making sure.

The gallery shows only 2 columns on mobile devices to let each image be larger. If the gallery showed 3 columns on mobile devices, each image would be very small. If you still want to make it 3 columns, however, add this code to your custom CSS:

@media ( max-width: 682px ) {
	.gallery-columns-3 .gallery-item {
		max-width: 33%;
	}	
}

@media ( max-width: 682px ) {
.gallery-columns-3 .gallery-item:nth-child(3n+1) {
     clear: none;
	}
}

If you’d like to make the same changes to galleries with 4, 5, 6, 7, 8, or 9 columns, add this CSS as well. Replace the # with the number of galleries you’d like to display, and replace 100/# with 100 ÷ the number of columns (for example, if you were doing 4 columns, do 100 ÷ 4):

@media ( max-width: 682px ) {
	.gallery-columns-# .gallery-item {
		max-width: 100/#%;
	}	
}

@media ( max-width: 682px ) {
.gallery-columns-# .gallery-item:nth-child(#n+1) {
     clear: none;
	}
}

Disclaimer: I am not a professional web developer.

• This reply was modified 6 years, 2 months ago by carbybarby838. Reason: added disclaimer

Hello, try this custom CSS:

h2.site-title, .nav-toggle {
	display: none;
}

*The .nav-toggle should hide the menu, the h2.site-title should hide the space where the site title would be (the space isn’t actually visible right now, but it’s visible when inspecting elements. It’s just a way to make things a little neater).

• This reply was modified 6 years, 2 months ago by carbybarby838. Reason: added information

You’re welcome. Peace

Correction, yes, you should definitely be able to do this without an FTP client. Simply open the WordPress editor. (Seriously though, back up your files first.)

Hello,

Here is how to change content width for a single page (disclaimer, I am not a web developer):

Step 1
Find the page ID of the page you want to edit. Instructions to find it here.

Step 2
Add this custom CSS, replacing the ## with the page ID:

div.section-inner.post-##.page.type-page {
	width: 200px;
}

Edit: replace 200px with whatever width you want your content to be (sorry I’m writing this while sleepy)

Peace

• This reply was modified 6 years, 2 months ago by carbybarby838.

Hello,

Are you asking how to make galleries show 3 columns on mobile devices?

Add this custom CSS:

.meta.bottom, .meta {
	display: none;
}

Hi Carl,

I was able to reproduce the issue by removing this code from line 169 in functions.php:

if ( get_theme_mod( 'hamilton_alt_nav' ) ) {
			$classes[] = 'show-alt-nav';
		}

Did you modify or replace your functions.php? Maybe try restoring the original file, either through the WordPress Editor or using FTP?

Disclaimer: I’m not a web developer.

Peace

I’ve figured out a temporary fix. It involves editing the Javascript included with the theme and adding some custom CSS, so I recommend that anyone who wants to use this fix BACK UP THEIR THEME FILES before attempting it. An official fix should be implemented by the developer and released as a theme update.

The easiest way to perform this fix would be to use FTP, but it may also be possible without it. I recommend making a child theme to implement all custom CSS (not just the CSS for this fix, all custom CSS), but if you already use a plugin or the WordPress customizer for your CSS, it’s more important that you put all custom CSS in the same place (your website will load slower if there’s multiple CSS files).

Lastly, I am not a web developer. I found this temporary fix by Googling stuff and making some good guesses.

Step 1:
Using FTP, navigate to your website’s theme folder for Hamilton. Download copies of the style.css and the global.js files, just in case something goes wrong. style.css is in the Hamilton folder, and global.js is in Hamilton–>assets–>js

Step 2:
Open the global.js file. You’re going to replace a certain block of code. In the “Masonry blocks” section, find the following code:

$container.imagesLoaded().done( function(){
		masonryInit();
		fadeInSpotted();
		$container.animate({ opacity: 1.0 }, 500 );
	});

and replace it with this:

$container.imagesLoaded().done( function(){
		masonryInit();
		fadeInSpotted();
		$container.addClass('masonry');
	});

After you have replaced this code, save the file.

Step 3:

Add this custom CSS using whatever method best suits your needs:

div#posts.posts {
	opacity: 0;
	transition: opacity 1000ms;
}
div#posts.posts.masonry {
	opacity: 1;
}

That’s all. Your front page/archive pages should no longer flash while loading. If you’d like your post previews to load in slower or faster, you can adjust the “transition: opacity” number as needed.

Peace

Edit: words, formatting

• This reply was modified 6 years, 2 months ago by carbybarby838.

Correction, had to change it to this

.preview-image {
	background-size: 100%;	
}
.post-preview.fallback-image .preview-image:before {
	padding-bottom: 56%;
	width: 100%;
}
.post-preview.fallback-image .preview-image:after {
	padding-bottom: 50%;
	width: 100%;
}

Nevermind, I fixed it by adding this code to “additional CSS” in the Customizer (please keep in mind I’m not a developer, I don’t know if this would work for all others)

.preview-image {
	background-size: 100%;
	
}
.post-preview.fallback-image .preview-image:before {
	padding-bottom: 50%;
	width: 100%;
}
.post-preview.fallback-image .preview-image:after {
	padding-bottom: 50%;
	width: 100%;
}

Correction, the affected images aren’t 1920x1080px, but they are in 16:9 ratio.