The following guide outlines where to find font scaling options in Bridge to aid in tweaking how your sliders and content appear on mobile screens.
In general, you're at the mercy of the theme's original design, the responsiveness it includes, and whatever settings it provides to allow you control over how things look on mobiles. Because there is such variance in mobile screen resolution, there is also the issue that it cannot guarantee a perfect view on every screen out there and targets standard sizes only (320-768 mobiles, 768-1024 tablets, everything else desktop) In general, we recommend comparing how the theme demo behaves vs your site to determine whether an issue is inherent to the design or is a problem with your sliders or page builder content. Testing on real devices is best, but you can preview Bridge on a standard iPhone using the following URL by putting your demo's url into the top-left field, then repeat for your site to compare:
Screencasts below are provided by Qode.
- Go to Qode Slider -> Sliders and click to edit your slider:http://screencast.com/t/G9KBfOpSkRy
- In the slider admin, enable the Advanced Responsiveness option:http://screencast.com/t/sJty69cyN
- Below you'll get additional options - there you can set the coefficient of resizing for the slider title, subtitle, text and buttons on smaller screens. There are default coefficients of resizing for slider elements - they go from 0 to 1 and they are specified in the brackets for different screen sizes: https://monosnap.com/file/Twev0aPN0jhGL2ElNwEcbveZUmXVDp
- For example, default coefficient for the smallest screen sizes is 0.4 - if you want to make the content smaller, you can enter 0.3 in each field (or apply larger coefficent for larger size):https://monosnap.com/file/wjQ1ARSN0PkL95jgu8T5ekUkWCmPFX
- Finally, you can set the height of the slider for specific devices in Qode Options > Qode Slider. http://screencast.com/t/wDc5UqXxpo
For detailed overview of coefficients, see the Bridge Documentation here:
Revolution Slider has advanced control over responsiveness and is a good alternative if you can't get the control you need from the Qode Slider. See Revolution Slider Responsiveness
Page Builder Layouts
In general, padding and margins added to your sliders or Page Builder rows and columns is not going to automatically scale when it uses pixel values. This means a row that is "boxing" the content using margins instead of the boxed mode in the options will add the same amount of huge padding on your mobile screen, cutting off text or leading to broken-looking layouts. Instead of using paddings, choose In Grid for the Type in your Row Options.
Bridge gives you extensive control over font scaling of global elements under Qode Options > Fonts. See http://bridge.qodeinteractive.com/documentation/5-fonts-basic-styling/5-2-fonts/
Need More Control?
All of these issues can be overcome with Custom CSS. The following guide does offer the basics to get you started in the right direction. Please note this technique requires a basic understanding of CSS and how to use your browser inspector: