How to make changes separately in each resolution?

Hi guys! I saw when we click on top menu options the layout changes to visualize different sizes. I'd like to know if is possible to make changes separately in each resolution, just clicking on each resolution.

For instance: Clicking on desktop version/breakpoint I can do all changes that only affects desktop version. But clicking on horizontal mobile version, I can do changes that only affects the mobile version.

Not sure if I was clear on my intention. I'm trying to avoid editing the CSS on each customization.

You need to make a media query, it's on the styles panel

I remember that once I saw a way to do this using some option on the right menu. No need of coding. Do you know or remember something related using this option direct on the right menu?

There's no way to set this setting you want without coding it into the CSS. If you aren't able to do that you're going to have trouble using a lot of things with this app. You will need to know some HTML and CSS to use this app properly. I would highly suggest you get some tutorials or online classes done for those languages.

Not sure what app you're talking about but this app hasn't ever had the ability to edit only the viewport being viewed since I've used it. Would be a great feature to have, but no it doesn't do that.

I second Jo's answer. Learning how media queries work is crucial to building a responsive website, which is pretty much mandatory in this day and age.

You can start here...

Think of it like this. A web page is basically made up of two kinds of code (actually three, but for now just focus on these two.)

HTML - this describes the content and structure of the page CSS - this styles the pages and positions all the various elements

CSS uses what are called "rules" to describe the size, shape, color and position of HTML elements. With the use of something called "media queries", you can apply different CSS rules to the same HTML elements when the screen size changes to a certain dimension. In this way, you can change the attributes of things on the page depending on what device you are viewing the page on. Bootstrap Studio makes it easy to add the media queries to your CSS, and will even pick the correct size for you automatically depending on what size you are viewing your page at in the preview window (XS, SM, M, L, XLG.) But you have to know how to write the CSS rules to achieve the different looks you want at the different page sizes. This is why it's kind of mandatory to become familiar with HTML, CSS and the Bootstrap Framework.

hmmm... got it... Thank you, guys! I have to learn some things before go deep into BS. So far I do many things. The hotsite I'm working on is simple, so it's a great opportunity to learn more. Also, do you know how can I change the color of a menu link when I put the mouse over? And where I can find the collapsed/hidden menu from the mobile version? I'd like to put a semi-transparent background on it when the user presses the hamburger menu.

All in the CSS of the site and menu for the questions you're asking. :)

Thank you! What is the best CSS editor you know/recommend?

What is the best CSS editor you know/recommend? with your additional packages of choice (beautify, bootstrap, emmet, pigments ecc)

Also, do you know how can I change the color of a menu link when I put the mouse over?

You do this by modifying the CSS rule associated with the link. So for example, let's say you start with a new blank page, and you drag the Navigation Clean component into the page from the component's menu. Now you will see a basic navigation bar with the words "Company Name" on the left, and "First Item" "Second Item" Third Item" "Dropdown" on the right.

So let's say you want to change the color of the links when you hover over them with the mouse. You can start by making sure the HTML/Style panel below the page is expanded so you can see the page's HTML and CSS. The CSS rules are shown on the right. If you click on the "First Item", you will see the information in the lower panels changes to show you what HTML code creates the link (on the left) and what CSS code styles the link (on the right.) If you don't understand CSS, all the different classes will look confusing (.navigation-clean.navbar-light .navbar-nav, .navigation-clean.navbar-light .navbar-nav, .navigation-clean.navbar-light .navbar-nav but this is how CSS works. The "C" in CSS stands for "cascading" so each one of those periods with a word after it represents a class in the cascade's succession. The four lines below all those classes are the actual rules that those classes will apply to a given HTML element. You can see the first rule is... color: #8f8f8f;

This is the CSS rule that tells the text in the link what color it should be. In this case, it's telling the link to be light gray when it's active.

Now, if you scroll down just a bit to the second block of CSS, you'll see another bunch of classes followed by two rules... color: #3743d !important; background-color: transparent;

These rules are telling the link that it should be a darker gray when the mouse hovers over it, and that the background behind the text should be transparent. The way you know this is because one of the classes is .nav-link:hover. If you click on the little dark gray box next to the #37434d, it will open a color picker, where you will be able to change the color of the text when it's hovered over. So try changing it to red and then hover the mouse over one of the links, and you'll see that it's now changed to red on hover.

Alternately, you could also change the link via the Look & Feel Panel. If you click on one of the links now (let's say the "Second Item"), and scroll down in the Look & Feel panel to the Font options, you'll see that the color is now the red you chose. if you click the drop down menu at the top of the Look & Feel panel that says "Style Attribute", you will see the different CSS classes that are applied to the element on the page you've selected. If you choose the first block of classes, you can then change the color by typing the hex or rgb data in the color field, or by clicking the box which will open the color picker again. Try changing the color to something else, and you'll see that the rule in the CSS at the bottom of the page in the Styles panel will change to match what you've picked from the Look & Feel panel.

In Bootstrap Studio, there are often multiple ways to edit the various components and elements on your site, but they all boil down to modifying (or creating new) CSS. You don't need an external editor to edit the CSS in your Bootstrap Studio site. You can do it all from within the program, but if you feel more comfortable working with an external editor, you can always write the CSS in a different program and then import the saved CSS stylesheet into BSS. Personally, I find it easier and more intuitive to do it directly within BSS.

Hope this helps get you started. If you've never written any CSS before, I highly recommend you take some online courses, or watch some video tutorials first. There is a LOT to learn in CSS, and some things you want to avoid (like inline styles, and excessive use of things like !important.)

Good luck

Perfect! Thank you @printninja! I manage to make the link change the color and put on place some other parts. Also, I'm checking more about media queries. It's not so hard, but it's not so easy as I imagine. I thought Bootstrap Studio would (also) facilitate some aspects like these. Anyway, I'm liking this app :)