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

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 >
  <div ><img alt="" src="myimage.png" /></div>

  <div >More text<br />
    <br /> More text</div>
</div>

<div >
  <div >Texting text text text</div>

  <div ><img alt="" src="myimage2.jpg" /></div>
</div>

CodePudding user response：

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 >
  <div ><img alt="" src="https://picsum.photos/200/300" /></div>

  <div >More text<br />
    <br /> More text</div>
</div>

<div >
  <div >Texting text text text</div>

  <div ><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 >
  <div ><img alt="" src="https://picsum.photos/200/300" /></div>

  <div >More text<br />
    <br /> More text</div>
</div>

<div >
  <div >Texting text text text</div>

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

CodePudding user response：

You cannot define a class based on other classes in pure CSS

You can refer to Can we include common css class in another css class? or Calling a CSS class inside another class? for more information

So you have two main options:

You redefine your css to target both classes at the same time like so:

    .col-1, .col-2 {
      width: 100%;
    }

use a css preprocesor to get all those features. This is how it would look like in SCSS

    .col-1 {
      width: 100%;
    }
    
    .col-2 {
      @extend .col-1;
    }