theimagefile
Control Panel -> Help and Support -> Advanced - CSS classes for mobile friendly display
User anonymous - click to sign in


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



v6.00
theimagefile
  Log Out | Home | Terms | Help | About | Contact | © theimagefile.com Ltd