Mobile Site Layout

No problem. I’m sure we can resolve. I can’t currently view your site. Please, can you confirm the link I should go to? Thanks.

Sorry, https://www.inflatable-marine.com

Great, the site is loading. Ok, so home page looks ok. I’m testing manually with an iPhone 6. Are you perhaps testing on a smaller screen? Is there another page I can check?

Second question:
Are there any particular elements you want to be smaller when loaded on mobile?

The Service & Rescue Pages need some help. I was wondering if the h1 tag and if the name of the company in the header could be a little smaller so it is on only one line.
I’m looking at the site on a Samsung 5 screen so it could be a bit smaller that the iPhone.

Thanks ??

Try this. Edit the widget in question and remove the CSS you’ve added there. Instead, insert a new CSS class name in the Class field provided:

custom-columns

Next, go to Appearance > Customize > Additional CSS or your own Custom CSS plugin and insert:

@media (min-width: 1200px) {
	.custom-columns {
		height: 230px;
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
		display: inline-block;
	}
}

The CSS you’re using isn’t responsive. The above change basically drops it below 1200px so the layout can return to normal. You could add additional break points and adjust the columns and height etc. but this is the easiest way to proceed.

I’ll try to assist further with the responsive changes requested tomorrow. Cheers ??

OK. I’ll give it a try
Thanks

It should do the trick. Chat further tomorrow. I’ll send a snippet or two to customize the additional elements we’ve discussed. Cheers ??

Hi. For the other two items you asked about, you can try the following:

@media (max-width: 768px) {
	.site-header.scale.scaled .site-branding h1.site-title {
		font-size: 24px;
	}
	.is-stuck .site-description {
		display: none;
	}
	h1 {
		font-size: 20px;
	}
}

Andrew, the CSS fixed the columns. I added the CSS for the font size changes and can only get the site description to respond. The site-title size won’t change no matter what size I use.

Thanks for your feedback. Please, can you clear WP Super Cache and then deactivate it while you’re still developing the site. Clearing it before deactivation is important. We’ll then be able to see what’s happening. Right now, the Custom CSS I provided isn’t showing.

OK. Done

Sorry for missing this. The CSS provided only targets the site title font size once it goes sticky. If you want to target it at the top of the page, you’d need to add:

@media (max-width: 768px) {
	.resp .site-header .site-branding h1.site-title {
		font-size: 25px;
	}
}

And then adjust the value as required.