Docs

[lexidev]

Some basic issues plague this site which is in development:
1) The masonry layout for blog and archive pages does not render well on iPad landscape. It is set to 3 columns, but it shows 2 very narrow columns with a gap where the third column should be.
2) I have customized all headers to be smaller than the default, downsizing the font-size percentage. (I find the huge defaults used for titles and headers in X far too overwhelming.**) Unfortunately the titles/headers do not adjust to smaller screens. Can that be done with a global script? Also in the screen shot am attaching notice that the titles cut off or overflow the containers.
3) The logo image in the site is also fixed. I’ve managed to adjust the size, but the image moves towards the center of the site header, rather than just adjusting the image size.

**One of the really useful customizations you could add to your versatile theme would be the option to resize all headers in the customizer.

Your help would be appreciated. http://dev.nassauinstitute.org

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
  	.x-iso-container.cols-3>.hentry {
		width: 33%;
	}
}

Hope it helps, Cheers!

[lexidev]

Thank you, yes, that fixes my problem 1). Doesn’t do a thing for 2) or 3). Can you help with that too, please?

Font size doesn’t adjust for headers in mobile screens and titles are either overflowing the masonry containers or get cut off in widgets.

Logo image size doesn’t seem to adjust either.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width: 767px){
.x-iso-container-posts.cols-3 .entry-title {
    font-size: 100%;
}
.x-brand img {
    float: left;
}
}

Hope that helps.

[lexidev]

Thank you Christopher. This works for the logo. So got 1) and 3) working with your help, but the huge header font sizes still need to adjust down for phone screens. Any suggestions for that? Shouldn’t this be built in? I couldn’t find it.

[Jade]

Hi there,

Please try to add this code in the customizer:

@media (max-width: 480px) {
    .h-landmark {
        font-size: 32px;
    }
}

Hope this helps.

[Author]

Posts