How can I define a single CSS class that includes multiple class definitions?

Question

I'm using Alchemer (a survey design software) and it has limited functionality to apply CSS. I have a question with text and images that I want to be side by side if the screen is large enough (ie two columns) or convert to a single column for phones/small screens.

The issue is that the software only allows defined classes to be applied to a question.

I have tried to define my custom css as follows:

/* For mobile phones: */
.col-1 {width: 100%;} 
.col-2 {width: 100%;}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-1 {width: 50%;}
  .col-2 {width: 50%;}
}

and then apply '.col-1' and '.col-2' to the question. This has the effect of only applying the 100% rule, it seems to ignore the @media definitions.

Is there a way to define a single class that wraps the class definitions above? I'm thinking that might preserve the @media definitions.

Also open to other suggestions!

My code is below:

/* For mobile phones: */

.col-1 {
  width: 100%;
}

.col-2 {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-1 {
    width: 50%;
  }
  .col-2 {
    width: 50%;
  }
}

text text text
<div class="row">
  <div class="col-1"><img alt="" src="myimage.png" /></div>

  <div class="col-2">More text<br />
    <br /> More text</div>
</div>

<div class="row">
  <div class="col-1">Texting text text text</div>

  <div class="col-2"><img alt="" src="myimage2.jpg" /></div>
</div>

connexo · Answer 1 · 2022-01-05T23:33:18.483

Your code works as expected, what's the issue?

Setting a width of less than 100% still won't change the block behaviour of creating a new line before and after the element div. Was that what you were hoping or?

If so, you need to work with more/different tools than just adjusting the width.

Here's an example using columns CSS property:

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .row {
    columns: 2;
  }
}

.col-1,
.col-2 {
  background-color: orange;
}

text text text
<div class="row">
  <div class="col-1"><img alt="" src="https://picsum.photos/200/300" /></div>

  <div class="col-2">More text<br />
    <br /> More text</div>
</div>

<div class="row">
  <div class="col-1">Texting text text text</div>

  <div class="col-2"><img alt="" src="https://picsum.photos/200/300" /></div>
</div>

A more stable way of doing that would be to use CSS grid:

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .row {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
  }
}

.col-1,
.col-2 {
  background-color: orange;
}

text text text
<div class="row">
  <div class="col-1"><img alt="" src="https://picsum.photos/200/300" /></div>

  <div class="col-2">More text<br />
    <br /> More text</div>
</div>

<div class="row">
  <div class="col-1">Texting text text text</div>

  <div class="col-2"><img alt="" src="https://picsum.photos/200/300" /></div>
</div>

Thanks. The issue is that the way Alchemer allows CSS is limited, you can apply one or more classes to a (survey) question, but since the @media section isn't part of a class, it ignores it and just uses the default col values of 100% that I set first. — jzadra, Jan 07 '22 at 17:29

How can I define a single CSS class that includes multiple class definitions?

1 Answers1