[glenn.zucman]

Hello!

I’m using Superior Pro (great theme, thank you!) here:
https://glenn.zucman.com/metro

I like the “no sidebar full width” layout as it gives me the largest images for this photo blog.

However, then the typography runs the full width of monitors and becomes hard to read. I put the following CSS in a Child theme, which makes the lines shorter and more readable:

/* P */
@media only screen and (min-width: 768px) {
p {
max-width: 700px;
margin: auto;
font-family: 'Open Sans', sans-serif;
color: #000;
text-align: left;
font-size: 16px;
line-height: 28px;
width: 700px;
font-weight: 300;
font-style: normal;
}
}

So far… so good… however, for Unordered Lists, the overly wide spacing persists. So I added the following code to similarly make the ul li narrower:

/* getting bulleted lists to center */
@media only screen and (min-width: 768px) {
ul li {
/*max-width: 700px; */
margin: auto;

font-family: 'Open Sans', sans-serif;
color: #000;
text-align: left;
font-size: 16px;
line-height: 28px;
width: 700px; 
font-weight: 300;
font-style: normal;
}
}

Unfortunately, that “width: 700px;” makes a complete mess of the navigation menu which apparently is also ul li.

MY QUESTION IS:
Is there a way to bring my unordered lists in to a narrower width, like 700px, WITHOUT messing up Navigation?

Thank You!

[Theme Horse Support Team]

Hello,

CSS selector need to be specific rather than global. Just try below custom CSS:

@media only screen and (min-width: 768px) {
	.single.full-width-layout .site-main .entry-content p,
	.single.full-width-layout .site-main .entry-content ul li {
		max-width: 700px;
		margin: auto;
		font-family: ‘Open Sans’, sans-serif;
		color: #000;
		text-align: left;
		font-size: 16px;
		line-height: 28px;
		width: 700px;
		font-weight: 300;
		font-style: normal;
	}
}

Thank you!

[Author]

Posts