Robert Angle Posted March 7, 2021 Posted March 7, 2021 In the template, is there a way that I can have a different site title display based on whether it's being viewed on a PC or on a mobile device? My site title is really long, and on a mobile device, it bleeds over the menu and navigation bars as a result. I would like to manually edit the templates to reflect logic sort of like this.... {IF SCREENSIZE=mobile} Amazing Community {ELSE} The Wonderfully Amazing Community For Various Discussions {ENDIF} Seems like this was more straightforward in 4.4 but deciphering the templates in 4.5 is a little trickier... so far.
Morrigan Posted March 7, 2021 Posted March 7, 2021 I wouldn't necessarily recommend this as it will cause SEO issues. (and when you say site title I'm assuming what appears when you google search) If you mean just the text that shows up as the name of your site that's some magic CSS voodoo that can be done pretty easily though may be more simply fixed by using a logo. Davyc 1
Solution opentype Posted March 7, 2021 Solution Posted March 7, 2021 (edited) You can’t do that in the template code, because when it is parsed on the server, the server doesn’t know what device it will be displayed on. However, the IPS framework has CSS classed to achieve this, so while both statements would be in the HTML code for everyone, one part could show on mobile devices only and another one only on desktop. Edited March 7, 2021 by opentype Daniel F 1
Robert Angle Posted March 7, 2021 Author Posted March 7, 2021 13 hours ago, Morrigan said: I wouldn't necessarily recommend this as it will cause SEO issues. (and when you say site title I'm assuming what appears when you google search) If you mean just the text that shows up as the name of your site that's some magic CSS voodoo that can be done pretty easily though may be more simply fixed by using a logo. Yeah, I'm just referring to the text at the top of the page in the masthead. I don't want to switch to a logo, but might end up doing so. 6 hours ago, opentype said: You can’t do that in the template code, because when it is parsed on the server, the server doesn’t know what device it will be displayed on. However, the IPS framework has CSS classed to achieve this, so while both statements would be in the HTML code for everyone, one part could show on mobile devices only and another one only on desktop. Perfect! The article you link to is very helpful. I can display one DIV with the a title in the masthead for PC, and another DIV with a shortened title in the masthead on mobile. It looks like the very examples in the article are the very code I need to implement.
Recommended Posts