Edit Mobile CSS - Luma Base - Custom Theme

[mikemm]

I've created a simple theme to modify the base Luma. I'm having difficulty applying css for anything under tablet size.

First, I created mm/mm2/web/css/source/_them.less and add conditions for the following. Only the code placed in the Tablet and Desktop sections worked.

// All

& when (@media-common = true) {
}

//  Mobile
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
}

//  Tablet
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
}

//  Desktop
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
}

Next, I tried creating the files

mytheme/web/css/styles-l.less

mytheme/web/css/styles-m.less

but again, only the code in the styles-l.less was executed.

I noticed that in my page header, there was only a reference to styles-l.less

link  rel="stylesheet" type="text/css"  media="all" href="http://myawesomewebsite.com/static/version1493672586/_cache/merged/80c97c4a0a334e88682b16cc7159dd49.css" />
<link  rel="stylesheet" type="text/css"  media="screen and (min-width: 768px)" href="http://myawesomewebsite.com/static/version1493672586/frontend/mm/mm2/en_US/css/styles-l.css" />
<link  rel="stylesheet" type="text/css"  media="print" href="http://myawesomewebsite.com/static/version1493672586/frontend/mm/mm2/en_US/css/print.css" />

What am I doing wrong here?

Thanks

Mike

[brendanb]

Hi Mike,

I was having the same issue. I have customized the luma theme using the _theme.less method

Then was wondering how do I customize the mobile there. So try this

Inside your _theme.less add you css "inside" the section

//  Mobile
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
	.footer.content .links > li {
	  background: #0044B0;
	  font-size: 1.6rem;
	  border-top: 1px solid #cecece;
	  margin: 0 -15px;
	  padding: 0 15px;
	}
}

brendan