Home App Docs Blog Github

Mobile only marquee

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 content link
e.g. builder.io/content/4cab34394e684fe7b93d6ef5493a8a51

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:
Screen Shot 2021-11-30 at 9.41.58 AM

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.
Screen Shot 2021-11-30 at 10.01.25 AM.

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.

responsive

Hope that helps! For more info on responsive design within Builder, check out: