Media query adding every single element

Webdesign Help
1

Hello everyone!

I am not a frontend developer. As a backend developer, I find adding @media queries manually to every single box, paragraph, picture, etc. not only annoying but a complete waste of time.

I wanted to ask if anyone has a great idea for the best way to add media queries using some sort of “organization/optimization method” in Bootstrap Studio.

The point of my question is to see if I’m missing something and if there’s a way I could just “click a checkbox” to make changes only on the current device size adding styles with no deed to add ccs media query block every time on every next element, then save, switch to another device size, and again make style changes only for the current device (inheriting from the main styling, let’s say from mobile).

I appreciate any comments, approaches, or advice. I believe your suggestions could help all of us.

P.S. Please try to explain ewverything as if I were 10 years old.

2

Hello everyone,
When it comes to editing style sheets, I prefer to use SCSS files.
The input is less assisted but is much simpler and allows you to copy and paste.

  • In BSS, an existing CSS file can be converted into a SCSS file.
  • Nested CSS rules are supported.
  • The use of SCSS variables makes it easier to update code.
  • Code optimisation is easier to manage, particularly when using @media queries.

BSS automatically compiles SCSS code without any problems or SASS configuration.

3

I’m not sure if I’m understanding your question correctly, but I’ll take a shot.

Since you’re not a front-end developer, I’m going to assume you’re not familiar with the nature of responsive frameworks.

Bootstrap is the most popular responsive framework in the world. Bootstrap Studio uses the Bootstrap framework to allow us to build Bootstrap-based websites via a drag-and-drop interface. So you don’t have to write any HTML. You may need to write some CSS if you want your website’s appearance to look or behave differently from the stock Bootstrap look/behavior, but you can achieve a lot just using Bootstrap’s utility classes.

One of the main reasons the Bootstrap framework was created was specifically so you would not need to manually write media queries for every element on your page. The framework uses predefined breakpoints (XS, SM, MD, LG, XL, XXL) which correspond to specific pixel widths…

XS = 0 px to 575 px
SM = 576 px to 767 px
MD = 768 px to 991 px
LG = 992 px to 1199 px
XL = 1200 px to 1400 px
XXL = 1400 px and up

As long as you’re using the Bootstrap grid system correctly (Sections > Containers > Rows > Columns) and placing your paragraphs and images within columns, they will behave responsively according to the pre-defined breakpoints in the Bootstrap CSS file (images do need to be set to fluid in the Options panel to be responsive.) For a typical website, you should rarely need to write a custom media query.

But if you do have need for specific elements to “break” at different breakpoints than the predefined ones, then yes, you would need to manually add media queries to those elements. But most people find the predefined breakpoints are adequate for all but extremely special cases.

If you don’t like the predefined breakpoints that the Bootstrap developers have chosen, you can use Sass to define your own pixel values for XS, SM, MD, LG, XL, and XXL.

You can read more about how to do that here…

4

Thanks for suggestion! I will read a bit more about SCSS.

5

I believe You got the point explaining main point of BS.

Let’s summarize: According to this:
“As long as you’re using the Bootstrap grid system correctly (Sections > Containers > Rows > Columns),”
I need to use this nested structure to correctly achieve the Bootstrap grid. Since I use BS this way, the default “break” will be applied automatically. Other elements must be inserted into the last column layer to maintain the default behavior. If the structure is correct, any styling applied in Appearance will relate to the appropriate device size (current breakpoint and above, until the next “break” style is amended).

If the structure is not appropriate, it may cause unexpected behavior. So, most likely - I did not use the right structure and now fighting layout with media query.

In case of special needs media query can be used to add magic CSS on some layer.

Please let me know if i got it right!

Thanks for your time!

6

Yes, you got it right.

You should take some time to watch the Bootstrap Studio tutorial videos.

Some of the videos are rather old and use Bootstrap 4.x (now outdated) and the program’s user interface has evolved significantly over time, but the fundamentals of how the websites are constructed is still valid.

You should also read the official Bootstrap documentation to get an idea of how the framework itself works.

Lastly, you can learn a good amount from the Bootstrap tutorials at W3 Schools. They are not as in-depth as the Bootstrap documentation, but in terms of showing you how to do things with actual examples, they are a lot more user-friendly.