I'm trying to add mobile optimization to my website, and I'm doing this with media querys But whenever I make a change and add a media query to the phone screen, this change is still visible on all screens Am I misunderstanding something or using them wrong? Is there a better way to make changes to individual screen sizes? Thank you!
This question is far too vague to even begin to answer. Are you using responsive options in the the visual UI, or manually adding media queries to the CSS?
Bootstrap Studio automatically builds "mobile optimized" websites. You don't have to add anything to do this. You should start building your site at mobile size, and then adjust/add to the layout at each larger break point. Much of this can be done through the visual interface, which adds Bootstrap helper classes to the components. Media queries are generally only needed to achieve specific changes of the layout/appearance of your site depending on the screen size.
The purpose of building a website with Bootstrap Studio is so you can use the responsive Bootstrap framework to take the "headaches" out of having to manually add media queries to get a good looking, responsive site. This is not to say you'd never need them. You almost always have to add a few manual media queries when adding custom CSS, but most of the drag-and-drop components already have options through the visual UI to adjust their appearance at different screen sizes.
Have you watched the tutorial videos? I would recommend starting there. Have you read through the program tutorials? Have you read the official Bootstrap website, https://getbootstrap.com/docs/4.5/getting-started/introduction/ or looked at the Bootstrap course on https://www.w3schools.com/bootstrap4/default.aspW3C
Any changes (media queries) that you add via the Styles window or in the Options pane by setting the separate settings for various sizes are always read from mobile size up. Therefore, when you change something in Mobile size such as text size, colors etc. that you don't want to be the same in larger sizes, you will need to add adjustments to them via Media Queries. Always starting from Mobile on up will get you the correct way to see how things work, as Printninja already mentioned. But it also gives you the way browsers will interpret the page as well. That's why they call it Mobile First design. Hope that helps.
when I add one to the mobile size, it still appears in the larger screens.
im simply saying that when I add a media query to a css block in the phone size, it still appears in the larger sizes. thats all.
That's what we're trying to tell you. Bootstrap is built from the smallest screen on up to the largest, called Mobile First. What you do is you add a new media query at the next larger screen you want it to be sized differently on. Pretty much backwards to the way it used to be, no idea why, just that's how it is now. So, yes, it will be the same on all sizes if you don't change it on anything larger than phone size.
I would highly suggest you get some knowledge behind you a bit so you can understand Mobile First as well as Bootstrap and that should help a lot with understanding the way things are structured for Bootstrap sites now.
this is one of the commonest questions people come with to responsive design, and as a result there are VERY many discussions of why this principle is sound practice --- note, it's not "Holy Writ" -- you won't be "condemned to hell for all eternity" if you adopt the desktop first approach, you'll just be making life harder for yourself than it needs to be. Kevin Powell's free tutorial is one of the most straightforward discussions I've seen.
Read his discussion here
If your thinking from a desktop first approach the you have to change the media query to max-width instead of min-width. The reverse of what bstudio inserts.
Well I'm old school, so I'll be the first to offer that I do my desktop version first because I want to be sure of everything I want added is in there, as well as placement etc. From there I work from phone version on up for removing items that don't need to be in phone version and getting breakpoints setup correctly etc. I don't really think it's all that much more work , but for me it's much more productive because my clients don't want to see their prototypes only on the phone at first, they want to see what it looks like on their desktop computers.
I understand all the steps needed for Mobile first so I adjust my workflow accordingly, but I still do my Desktop model first, then adjust from phone size on up. Works for me. :)
I do the same as @Jo. I build desktop first because I'd rather have as much content on the site as possible, and then pick and choose what is "too much" for someone to deal with on a mobile phone. I think tablets, laptops and desktop layouts can all have the same content, just arranged differently for the smaller screens. But on mobile, I will definitely streamline some things. I find it an easier thought process to start with having everything I want, and then selectively "pruning" for mobile, as opposed to trying to figure out the best way to populate a cell phone screen, and then try and decide what to add as I get the luxury of more screen real-estate. But I don't use "max-width" media queries. That would be ridiculous. I just work backwards.
Also, I have Google analytics on all my websites, so I know how much traffic my sites get from mobile, tablet and desktop, and I build the sites with this traffic in mind.