[bakParticipant]

Hi

On desktop, I want to control the width of centered text in 1 column layout. I therefore use the class narrowT in combination with this code:

@media (min-width:980px){
.narrowCH{

max-width: 85%;
margin-left: auto;
margin-right: auto;
}
}

.narrowT{
max-width: 65%;
margin-left: auto;
margin-right: auto;
}

.narrowD{
max-width: 45%;
margin-left: auto;
margin-right: auto;
}

The idea is that the text will be not full width on desktop but on mobile it should be full width.

How can I achieve this? At the moment the text is also narrow on mobile and I want it to be full width on mobile

[bakParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! You need to wrap those classes on the @media (min-width:980px) block, so they won’t affect the mobile view. You can update your code to this:

@media (min-width:980px){
.narrowCH {
	max-width: 85%;
	margin-left: auto;
	margin-right: auto;
	}

	.narrowT {
	max-width: 65%;
	margin-left: auto;
	margin-right: auto;
	}

	.narrowD {
	max-width: 45%;
	margin-left: auto;
	margin-right: auto;
	}

}

Hope it helps, Cheers!

[bakParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

To make your other class where text should be left align, you may need to update your code and use this instead:

@media (min-width:980px){
  .narrowCH {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .narrowT {
    max-width: 65%;
    margin-left: auto;
    margin-right: auto;
  }

  .narrowD {
    max-width: 45%;
    margin-left: auto;
    margin-right: auto;
  }

  .narrowL {
    max-width: 50%;
    margin-left: 0;
  }

}

Hope this helps. Please let us know how it goes.

[Author]

Posts