Advanced - CSS classes for mobile friendly display
We have introduced three new CSS classes which you can assign to things in the rich text editor (via "Source" mode):
img class="tx1_flexsize"
Will display the image at normal size, but in mobile mode will not allow the
image to be wider than the content-area -- if its native dimensions are
wider, then we will downsize to 100% width.
class="tx1_only_desktop"
Anything with this class will appear in desktop mode, but be hidden in
mobile output.
class="tx1_only_mobile"
Anything with this class will appear in mobile mode, but be hidden in
desktop output.
Use these classes if you're building something fancy in a footer or other rich text area, and you know it'll not render properly on mobile. This lets you simply hide it, or define an alternate version.
Within the text editor toolbar, click "Source". Locate the correct place to edit the object and copy in the CSS class:
Before:
After:
Styling the mobile navigation hamburger
You can use CSS to style the hamburger. Here are two examples you could add to the "head" My Websites > Customise Design > Site Layout > Embed Custom HTML / CSS.
/* make it red (different foreground colour than title) */
span.tx1_mob_nav_icon {
color:#ff0000;
}
/* add word "Menu" after icon */
span.tx1_mob_nav_icon:after {
content:' Menu';
}
Related
How to make your web page tables mobile friendly