AMP Custom CSS isue

Resolved FlixWatch Support
(@flixwatchsupport)

5 years ago
The CSS on my template is different than what is coming up on page. Here’s the CSS on my template:
<style>
#grid-footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 5px;
background-color:#D3D3D3;
}
@media (max-width: 399px) {
#grid-footer {
grid-template-columns: 1fr 1fr;
}
}

@media (min-width: 400px) and (max-width: 700px) {
#grid-footer {
grid-template-columns: 1fr 1fr 1fr;
}
}
</style>

But it is showing as:
#grid-footer{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-gap:5px}@media (max-width: 400px){#grid-footer{grid-template-columns:1fr 1fr}}@media ((min-width: 401px) and (max-width: 800px)){#grid-footer{grid-template-columns:1fr 1fr 1fr}}.footer-grid{text-align:center;font-weight:bold;margin:5px}

And it coming up as a validation error on Search Console.
- This topic was modified 5 years ago by FlixWatch Support. Reason: Forgot to add a line
The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author Weston Ruter
(@westonruter)

5 years ago
I just tried adding a Custom HTML block containing the following code:
```
<style>
#grid-footer {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 5px;
	background-color:#D3D3D3;
}
@media (max-width: 399px) {
	#grid-footer {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 400px) and (max-width: 700px) {
	#grid-footer {
		grid-template-columns: 1fr 1fr 1fr;
	}
}
</style>
<div id="grid-footer">TEST</div>
```
On the page, the resulting pretty-printed CSS is:
```
#grid-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
    background-color: #d3d3d3
}

@media (max-width: 399px) {
    #grid-footer {
        grid-template-columns:1fr 1fr
    }
}

@media (min-width: 400px) and (max-width: 700px) {
    #grid-footer {
        grid-template-columns:1fr 1fr 1fr
    }
}
```
I think the your malformed CSS is coming from somewhere else.

I can see two media queries:

1. @media (min-width: 400px) and (max-width: 700px){#grid-footer{grid-template-columns:1fr 1fr 1fr}}
2. @media ((min-width: 401px) and (max-width: 800px)){#grid-footer{grid-template-columns:1fr 1fr 1fr}}

The first one is the one in the style element you shared here. The second one is coming from somewhere else and it appears to have extra erroneous parentheses.
Thread Starter FlixWatch Support
(@flixwatchsupport)

5 years ago

I think the your malformed CSS is coming from somewhere else.

Oh, ok. Will investigate further.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘AMP Custom CSS isue’ is closed to new replies.