Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.
Builder public api key
ac31696b9dc343e596ea79d2a14be184
What are you trying to accomplish
I would like to have a certain image appear as the page marquee if the user is on a mobile device and another image if the user is on a desktop device.
@Jermpaquette definitely, that is very easy to accomplish with Builder!
Any pages can be built responsively, meaning CSS changes made when in Desktop, Tablet or Mobile mode will only apply to those breakpoints. To switch breakpoints click the icons at the top of the edit field:
and then apply your CSS. For this particular use case, you can add multiple image elements to the page and then use either display: none within the CSS attributes, select the Hidden toggle within the Style tab, or right click the image and select Hide from the menu.
.
You will notice a hidden icon next to the element in the Layers tab. I have included a gif below showing the seamless transition, you will notice the icons to the left on the layers as the different breakpoints are selected to show those elements are hidden when appropriate. This same logic can be applied to any elements or components, not just images.
Hope that helps! For more info on responsive design within Builder, check out: