Showing results for 
Search instead for 
Did you mean: 

Edit Mobile CSS - Luma Base - Custom Theme

Edit Mobile CSS - Luma Base - Custom Theme

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



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="" />
<link  rel="stylesheet" type="text/css"  media="screen and (min-width: 768px)" href="" />
<link  rel="stylesheet" type="text/css"  media="print" href="" />

What am I doing wrong here?









Re: Edit Mobile CSS - Luma Base - Custom Theme

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;