mobile display toggle

[MgmtSpec]

Hello,

I tried the custom template forum with no response so figured I'd try here...

Still struggling with header layout issues using "Fearless" theme.
I'd try a different template but I've made a number of custom Product templates and don't want to have to redo those also.

Problem: The "hamburger" menu overlaps Company name and tag line which are entered in the "header" layout.

So I'm trying to hide some text to make the menu easier to use.

Using a media query that I've used on other sites, validates and works.

First I added CSS to the bb.css

.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}

URL: http://www.floridatorqueconverters.com/publish/bb.css

In the header I added the mobileHide class in a div

<h1 style="font-weight:bold; bottom-margin:5px">Florida Torque Converter</h1>
<div class="mobileHide"><h3 style="font-size:.85em; font-style:italic; top-margin:3px">Best Darn Torque Converters<br>in the World!</h3></div>

I've also tried added top/bottom margins with no success either.

Page is at:
http://www.floridatorqueconverters.com

Suggestions?

[Jim]

First I added CSS to the bb.css

.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}

URL: http://www.floridatorqueconverters.com/publish/bb.css

There is no such code in that file. Are you sure you added it to that file? If so the file must have gotten overwritten.