visible class not working
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
I created a modules using 'visible' tags as it indicates that the other hidden classes would be active. This seems to work fine with two exceptions. The 1160x125 logo (visible-large) shows for all widths.The 940x125 logo shows for both visible-large and visible-desktop when it should only show for visible-desktop. The others visible-tablet and visible-phone do only shown when they are suppose to show.
Here is that code:
<div style="margin-top: 25px; height: 125px;" class="visible-large"><img style="margin-top: 25px;" alt="logo-1160x125" src="images/test/logo-1160x125.jpg" height="125" width="1160" /></div> <div style="margin-top: 25px; height: 125px;" class="visible-desktop"><img style="margin-top: 25px;" alt="logo-940x125" src="images/test/logo-940x125.jpg" height="125" width="940" /></div> <div style="margin-top: 25px; height: 125px;" class="visible-tablet"><img style="margin-top: 25px;" alt="logo-750x125" src="images/test/logo-750x125.jpg" height="125" width="750" /></div> <div style="margin-top: 25px; height: 125px;" class="visible-phone"><img style="margin-top: 25px;" alt="logo-320x125" src="images/test/logo-320x125.jpg" height="125" width="320" /></div>
Note: I set a fixed height in the DIV only for testing as the sample graphics were appearing behind the content text and I didn't want to fool with finding out why until I got the test to work as it should.
I've been using the Retina Images procedure for resizing images but if I can get this to work properly, I'll be using this for logo displays as well as some image displays.
Anyone have a clue what the 'large' and 'desktop' is not working as it should? - Just another old hacker!
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
Please check the grid again - demo.rockettheme.com/joomla/leviathan/features - visible-desktop will display for both desktop and large
Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Can you please post a link to the problem and we will do our best to assist you.
Thanks
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
David,
I'm using the default on my own site so here is the link: webbering.com/test-page .
On my mobile phone, the 'visible-phone' is showing which I would have expected. However, the 'visible-large' is also showing which I would not expect. The 'visible-tablet' and 'visible-desktop' are not showing.
Why would 'visible-large' show when on the support classes documentation, www.gantry-framework.org/documentation/j...sponsive-grid-system , it clearly shows that the class 'visible-large' is 'hidden' on 959px and below widths?
On my browser, when expanded beyond 1199px, both 'visible-large' and 'visible-desktop' appear, even though both classes show the other classes as hidden. Basically, it looks like neither 'visible-large' as far as reduced widths and 'visible-desktop' as far as increased widths is not working as advertised.
I have tried putting all of the other 'hidden' classes with each 'visible' classes but the 'large' still appeared. Example 'visible-phone hidden-tablet hidden-desktop hidden-large'.
Any insight into getting this to work properly would be appreciated. - Just another old hacker!
-
Time to create page: 0.048 seconds