0

I'm extending the blank theme and adding styles to an _extend.less file located in

/app/design/frontend/neil/mytheme/web/css/source/_extend.less

Inside the file iv've got the following code

// common & mobile styles
& when (@media-common = true) {
    .header.panel > .header.links > li {
        margin: 0;
        a {
            color: @dark-grey;
            display: inline-block;
            font-size: 13px;
            padding: 0 5px;
        }
        &:hover > a {
            color: @primary__color;
        }
    }
}

// Should be everything above the screen_m breakpoint (768px) - but still doesn't work
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .header.panel > .header.links > li {
        margin: 133px !important;
    }
}

My problem is that my desktop styles aren't being applied, I've tried a whole load of ways of getting this to work but nothing is working.

I tried wrapping them in a normal media query like this...

// desktop
@media all and (min-device-width : 768px) {
    .header.panel > .header.links > li {
        margin: 133px;
    }
}

Which loaded the styles in, but it was getting overridden by a style defined in...

/app/design/frontend/neil/mytheme/Magento_Theme/web/css/source/_module.less

Could somebody please point me in the right direction with this because I feel like I'm going round in circles.

Improve this question
0

2 Answers 2

Reset to default
1

You're using the wrong media query, you are using max which is for max-width. So your styling will only apply UP TO @screen__m.

Replace max with min.

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .header.panel > .header.links > li {
        margin: 133px !important;
    }
}
Improve this answer
5
  • I thanks for this - Your right that there's an issue with the media query.... But they're not making sense to me.. i'll update my question to show what results I get with difference media queries.
    – Neil Carpenter
    Nov 2, 2017 at 14:21
  • I've replaced max with min and it's still not working - something isn't right with my media queries
    – Neil Carpenter
    Nov 2, 2017 at 14:37
  • Have you ruled out Magento cache, browser cache, Varnish cache? A quick way to test if it's being cached is to add body { background-color: blue !important;} outside of any media query. If your BG isn't blue you know it's cached or isn't being compiled. Then you can go from there to resolve it.
    – Ben Crook
    Nov 2, 2017 at 15:29
  • The standard LESS media queries aren't easy to understand, I highly recommend using the Sass blank theme and Frontools by Snowdog Apps. It is much easier and faster to work with.
    – Ben Crook
    Nov 2, 2017 at 15:31
  • Yeh, I started changing the backround color while testing them out, Ive got something working as I want it to now.. I think it was related to caching. It's the first time Ive used magento and it's caching system absolutely boggles my mind. Especially whilst developing. I've played with the settings in admin and all that jazz but it still seems to do whatever it wants. My _theme.less file is being ignored now, gotta figure that out.
    – Neil Carpenter
    Nov 2, 2017 at 16:04
1

Your problem is the following:

You forgot the web folder

In your theme /app/design/frontend/neil/mytheme you puted this /css/source/_extend.less, but you must add a /web folder to /app/design/frontend/neil/mytheme and in /web folder add this /css/source/_extend.less.

The result is:

/app/design/frontend/neil/mytheme/web/css/source/_extend.less

Same here /app/design/frontend/neil/mytheme/Magento_Theme/css/source/_module.less

The result is:

/app/design/frontend/neil/mytheme/Magento_Theme/web/css/source/_module.less

Run this commands per row:

php -d memory_limit=-1 bin/magento maintenance:enable
php -d memory_limit=-1 bin/magento module:enable --all --clear-static-content
php -d memory_limit=-1 bin/magento setup:upgrade
php -d memory_limit=-1 bin/magento setup:di:compile

rm -Rf var/cache/* var/page_cache/* var/di/* var/generation/* var/view_preprocessed/* pub/static/_requirejs

php -d memory_limit=-1 bin/magento setup:static-content:deploy
php -d memory_limit=-1 bin/magento indexer:reindex
php -d memory_limit=-1 bin/magento cache:clean
php -d memory_limit=-1 bin/magento maintenance:disable
Improve this answer
4
  • Apologies for that, I do infact have the files within the web directory - a silly typo on my behalf there. Updated the question. I'm in developer mode, so ran the static-content:deploy -f command but i still have the same problem.
    – Neil Carpenter
    Nov 2, 2017 at 13:20
  • I updated my response at the end
    – St3phan
    Nov 2, 2017 at 13:29
  • Just ran all these commands and now im getting white screen on both frontend & backend
    – Neil Carpenter
    Nov 2, 2017 at 15:03
  • White screen was because of permissions. But it seems like my _theme.less file is being ignored now for some reason - running the commands above changed a hell of a lot of things. I'm guessing a done of stuff was cached despite me running cache:flush multiple times and delting the normal directors in /pub & /var/view_preprocessed.
    – Neil Carpenter
    Nov 2, 2017 at 16:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.