I’m running into issues with breakpoints. From my understanding, anything done on the smaller breakpoints don’t cascade up. For some things, such as button color, font size, that has remained true. However, when I start moving things around and adjusting grids, even changing sizes of images, these changes have cascaded up. I woke up shocked to see the desktop view with small images and buttons shifted in odd places because of the mobile breakpoint changes I made. Can someone tell me what I am missing? How do I remove certain elements like grids, and div blocks in the smaller breakpoints without them effecting the larger views. I need help asap! Thanks
Changes to styles cascade away from the base breakpoint (so down to mobile portrait and up to any larger breakpoints you create) however changes to the order of elements (how they appear in the navigator panel) are made across all breakpoints.
In terms of changing position of elements, it really depends on your setup so it’s hard to give you a specific answer here.
I noticed you linked your live site, but if you include your ready-only link and a bit more info on how you’d like things to be positioned differently for smaller devices I’d be happy to give you some steps
I did notice that when I duplicated my buttons and moved them to different parts of the page and other pages, they were in the same class and that was part of my issue. However the images, for example the house and the real estate agent on the second Request a Roober service page when I change them in smaller breakpoints, it effects the larger ones as well. I also have a grid at the bottom of the home page (the results section) and when I try to remove columns in mobile view so that the images have a better layout, the changes cascade up.
Glad you figured out the issue with the buttons—to make sure these changes aren’t reflected on other instances with different styles, just make sure you’re either duplicating the style (less desirable) or adding a combo class.
In terms of images, you can’t swap out images based on breakpoint—you’d need to either use styles (like object-fit) to adjust the size for smaller screens, include two (or more) separate image elements and hide the unneeded ones depending on the breakpoint, or use background-images instead which allow images to be swapped out based on the breakpoint (since they’re actually called in within the style, as opposed to on the element itself).
In terms of the grid changes, this may be cause you’re using the “Column” direction—swap this over to the “Row” option and it should behave a little more appropriately:
I’m guessing the reason you made the switch is because your elements were spanning the full width when adding them to the page, however you can manually add extra columns to the grid frame and your content will behave more like the “Column” option. This can be done either in the right-hand panel or on-screen:
