Responsive column

Support
#1

Hi there,

I’m struggling with the responsiveness of a column, while the section and the background are responsive. The column needs to be centered horizontally and have width: 90% when max screen width is specified to 778px. I’ve added my current code from the global CSS below, can you help me fix this problem? The code is for the top section on https://redrive.dk

.coverbillede_column {
max-width: 600px;
height: 150px;
width: 60vw;
margin: 0 20vw;
}

@media only screen and (max-width: 768px) {
/* For mobile phones: /
[class=“coverbillede_column”] {
width: 90%;
}
}

Best regards,
Carina

#2

Hi Carina,

If a certain CSS is not working, possible culprits are:
1.) CSS syntax error. Make sure that every open { has corresponding } tag and you’re using correct comment syntax.
*It might be CSS syntax error if we inspect the element but we didn’t find the CSS applied on dev tools.

2.) CSS specificity. There might be more specific rules that is overriding what you have added. See this article regarding specificity hierarchy. This is the reason why your CSS is not working. To check the status of certain CSS, we can use dev tools to inspect the element. The article will help you adjust that CSS to a more specific one. Try using ID since it has higher specificity than class.

Hope this helps.