Dave Pitman

Give this a try. (Save a copy of your code in case my edit doesn’t work for you so you can put your edit back in)

Remove:

.blog .headerclass,
.category-2 .headerclass,
.category-6 .headerclass,
.page-id-94 .headerclass,
.page-id-276 .headerclass,
.page-id-318 .headerclass,
.postid-1 .headerclass,
.postid-20 .headerclass,
.postid-219 .headerclass,
.postid-228 .headerclass,
.postid-263 .headerclass,
.postid-288 .headerclass,
.postid-310 .headerclass,
.postid-326 .headerclass,
.postid-404 .headerclass {
height: 250px;
background: #fff  url(https://www.lifepathbydesign.net/wp-content/uploads/2016/02/BlogBanner.jpg);
width: 100%;
background-repeat: no-repeat;
background-position: center;
}

And replace it with:

@media (min-width: 992px) {
.blog .headerclass,
.category-2 .headerclass,
.category-6 .headerclass,
.page-id-94 .headerclass,
.page-id-276 .headerclass,
.page-id-318 .headerclass,
.postid-1 .headerclass,
.postid-20 .headerclass,
.postid-219 .headerclass,
.postid-228 .headerclass,
.postid-263 .headerclass,
.postid-288 .headerclass,
.postid-310 .headerclass,
.postid-326 .headerclass,
.postid-404 .headerclass {
height: 250px;
background: #fff  url(https://www.lifepathbydesign.net/wp-content/uploads/2016/02/BlogBanner.jpg);
width: 100%;
background-repeat: no-repeat;
background-position: center;
}
}

It’s because your targets are more specific than than what I posted. On mobile now. I can take another look later if someone doesn’t help you sooner.

The code below will just have a white background when the browser is below 992px. You could specify a different image instead of ‘none’ if you want to have an alternate image.

@media (max-width: 991px) {
.headerclass {
    backgournd-color: fff;
    background-image: none;
}
}

@media (min-width: 992px) {
.headerclass {
    background: #fff url(https://www.lifepathbydesign.net/wp-content/uploads/2016/02/BlogBanner.jpg);
}
}

@media (min-width: 992px) {
#containerfooter .container {padding-left: 40px; padding-right: 40px;}
}

You nailed it! Would never have figured that out.

Thank you!
(I’ll resolve this after you’ve had a chance to see it. Or you can if you are an admin on this thread)

Toolkit is 3.4
Photoswipe Masonry
Yoast

Turning off lightbox has no effect in the overall behavior. It just turns off the lightbox effect. The Gallery is still not being handled Photoswipe Masonry.

To summarize, turn off the gallery control and lightbox makes no difference in how the gallery is rendered.

You are probably referring to the classic “jump” when you go from a page with a browser scroll bar to one without.

In your theme options > Advanced css, place this code:

html { margin-left: calc(100vw - 100%); }

I have the theme gallery off.

Lightbox on or off doesn’t make a difference either.

Screenshot

https://dl.dropboxusercontent.com/u/1868808/Misc/gallery.jpg

Hi Kevin,

The WP gallery is on this page: https://olympicaerialsolutions.com/drone-aerial-photography/

cheers,
Dave

Add this to

THEME OPTIONS > ADVANCED

.contentclass {
    padding-top: 0;
}

Ok, hope this is what you are looking for.

these are the classes to adjust that text. I took it down to 14px font size to get your longest titles to fit. Adjust to suit.

.home-iconmenu h4 {
font-size: 14px;
line-height: 20px;
}

.home-iconmenu a p {
font-size: 14px;
line-height: 20px;
}

Can you mark up a screenshot and show the space you are trying to reduce?

Ha ha…when I first checked that url, it said “coming soon”.. ??

Theme options > Advanced Settings

Insert the following. Change the # of pixels to suit.

.home-iconmenu a {
height: 300px;
}

More than likely.

Got a url to look at?

Never mind, I was able to make it work.

I marking a solved, but if there is a better approach, please let me know.

Thanks.