mobile display toggle

General ShopSite user discussion

mobile display toggle

Postby MgmtSpec » Wed Jan 06, 2016 7:44 pm

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?
MgmtSpec
 
Posts: 200
Joined: Mon Apr 30, 2007 8:25 am

Re: mobile display toggle

Postby Jim » Wed Jan 06, 2016 9:20 pm

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.
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah


Return to User Forum

Who is online

Users browsing this forum: No registered users and 40 guests

cron