Hi,

I have a bit of an issue that I cannot entirely explain what is going wrong. I am using a 3 Column Outsystems Pattern.Inside each of these Column placeholders, there is a container with a fixed width and height of 300px; After a little css tweaks, I was able to get these containers to go to a new line. Now the first Column contains an image (width and height are 300px). On mobile phones I want to not display this Column. 

I am able to hide the Column for now with the CSS:

SyntaxEditor Code Snippet

@media screen and (max-width: 480px) {
    .Column:nth-child(1) {
        visibility: hidden;
    }
}

 However, this does not get rid of the placeholder.

If I were to make display: none; instead of visibiliy: hidden. It just displays the image that I was trying to not display.

SyntaxEditor Code Snippet

@media screen and (max-width: 480px) {
    .Column:nth-child(1) {
        display: none;
    }
}

So my idea result is to not display the first column in the 3 column pattern on phones. I would like to understand why this cannot be accomplished using my css media tags. Due to this being a private project I am not able to upload the OML file. I was able to accomplish what I wanted with Javascript and it works. This is the code I used. 

SyntaxEditor Code Snippet

$(document).ready(function() {
    var firstColumnInStructure = document.querySelector('.ColFirst');
    var screenWidth = window.screen.width;
    var screenHeight = window.screen.height;
    
    if (firstColumnInStructure && (screenWidth <= 480 || screenHeight <= 480)) {
        firstColumnInStructure.style.display = 'none';
    }
});

I would prefer to understand why the way with the CSS media tags did not work before I start hacking things up with Javascript.

Thanks.

Tim