Menu icon Foundation
Visibility and Media Queries Not Working

Hi there

I have tried multiple downloads in case the files were corrupted, I ave tried both visibility classes and media queries and nothing seems to work for me. Any help would be much appreciated! Please find my code below:

app.scss:

@import "settings";
@import "foundation";
@import "manifest";

manifest.scss:

@import "components/general";

general.scss:

//contains logo and surrounding borders
.header {
    width: 100%;

    &-col {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

.logo {
    margin: 0;
    padding: 5px;
    border-top: 3px solid $primary-color;
    border-right: 3px solid $primary-color;
    border-bottom: 3px solid $primary-color;
    border-left: 3px solid $primary-color;

    &-row {
        margin-bottom: 20px;
    }
}

.border-bottom {
    border-top: 3px solid $primary-color;
}

header.html:

<row>
    <columns class="header-col show-for-large">
        <img src="{{img-url}}header.png" alt="" class="header">
    </columns>
</row>

<row class="logo-row hide-for-large">
    <columns class="logo-col" small="12" large="12">
        <img src="{{img-url}}logo.png" class="logo">
    </columns>
</row>
<row class="border-bottom hide-for-large">
    <columns class="hide-for-large" small="12" large="12">
    </columns>
</row>

visibilitymedia queries

Hi there

I have tried multiple downloads in case the files were corrupted, I ave tried both visibility classes and media queries and nothing seems to work for me. Any help would be much appreciated! Please find my code below:

app.scss:

@import "settings";
@import "foundation";
@import "manifest";

manifest.scss:

@import "components/general";

general.scss:

//contains logo and surrounding borders
.header {
    width: 100%;

    &-col {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

.logo {
    margin: 0;
    padding: 5px;
    border-top: 3px solid $primary-color;
    border-right: 3px solid $primary-color;
    border-bottom: 3px solid $primary-color;
    border-left: 3px solid $primary-color;

    &-row {
        margin-bottom: 20px;
    }
}

.border-bottom {
    border-top: 3px solid $primary-color;
}

header.html:

<row>
    <columns class="header-col show-for-large">
        <img src="{{img-url}}header.png" alt="" class="header">
    </columns>
</row>

<row class="logo-row hide-for-large">
    <columns class="logo-col" small="12" large="12">
        <img src="{{img-url}}logo.png" class="logo">
    </columns>
</row>
<row class="border-bottom hide-for-large">
    <columns class="hide-for-large" small="12" large="12">
    </columns>
</row>
Ryan McCready almost 3 years ago

Hi Thania,

Are none of the media queries working or just the ones that are showing and hiding content? Also, what email clients are you seeing this happen on? Thanks!

Thania Abrahams almost 3 years ago

Thank you for your response!

None of the media queries hey or I am just completely blonde with using them but I have literally spent 24 hours watching tutorials etc so hopefully I am not at fault!

Um well it is on my local machine/instance using Chrome developer tools so as much as it was a big problem on Outlook 2013 and 2011 and iPhones when I first used visibility classes it seems like it just does not want to work in general with either visibility classes or media queries.