media queries are getting multiplied

Bug Reports
1

Hi there.

While using Bootstrap Studio 5.1.1 (using Linux Mint) i'v stumpled across a very strange behavoir.... lets say, i open up my styles.css and add manually a media query like this

@media screen and (max-width: 3840px) and (min-width: 1921px) {
  p {
    font-size: 16pt;
  }
}
@media screen and (max-width: 1920px) and (min-width: 600px) {
  p {
    font-size: 14pt;
  }
}
@media screen and (max-width: 599px) and (min-width: 320px) {
  p {
    font-size: 12pt;
  }
}

it works like a charm. But when i open it again, define a new class i get this mess

@media screen and (max-width: 3840px) and (min-width: 1921px) {
  p {
    font-size: 16pt;
  }
}

@media screen and (max-width: 3840px) and (min-width: 1921px) {
  .example {
    font-family: monospace;
  }
}


@media screen and (max-width: 1920px) and (min-width: 600px) {
  p {
    font-size: 14pt;
  }
}

@media screen and (max-width: 1920px) and (min-width: 600px) {
  .example {
    font-family: monospace;
  }
}

@media screen and (max-width: 599px) and (min-width: 320px) {
  p {
    font-size: 12pt;
  }
}

@media screen and (max-width: 599px) and (min-width: 320px) {
  .example {
    font-family: monospace;
  }
}

you can do this over and over again with the same result. every query is multiplied. my expectation is that bootstrap studio will keep the original format and do not multiply it.

bye Bernd

2

Could you give us the steps to reproduce this? We haven't been able to. If you could record it and share the video, that would be even better. Thanks in advance!

3

I dont think its a bug but the way it works in Bootstrap Studio. If you want your css to all be in one media query per breakpoint you could create a scss file for each breakpoint media query. Then create your css using the regular method to utilize the emmet feature. Copy the created css to the correct scss query file. Make sure your files are in the correct order. Then delete the css. (Ya its probably not good work flow)

It would be nice if we had emmet for scss or even if we were able to directly copy the css to a scss stylesheet as the only way to "copy to" method works is to copy to another css stylesheet.

I will admit it bothers me to have to search through multiple media querys in a custom css stylesheet sometimes.

4

Twinstream, are you saying you are unable to directly copy the CSS in an open CSS file in BSS? I can do that in mine and paste it anywhere I want such as another CSS file, inside an already created class, etc. I haven't delved into Sass yet (scares the bejesses outta me lol), so I don't know that it wouldn't work in an SCSS file, but I can't see why not. Just to clarify also, this is using ctrl+c and ctrl+v with highlighted CSS code within BSS. I can do the same copying it from outside sources as well and pasting it in BSS. Am I misunderstanding what you mean on this?

5

Yes, I know how to copy and paste. I was just saying that if someone wanted to group css by media points they could create a sass stylesheet and paste inside the media query.

I have not used the program that way but it is possible to do. I probably just need more practice and understanding "where" to insert my media query so I do not have to drag it above or below another to get the css correctly cascading. That can be the frustrating confusing part sometimes.

6

Yeah agreed that the order of classes can sometimes be a pain to manipulate. Sorry if I misunderstood what you were saying.