0
Welcome Guest! Login
0 items Join Now

Module Responsive Support Class problem

Last Post
Search Topic
    • eRimkus's Avatar
    • eRimkus
    • Sr. Rocketeer
    • Posts: 168
    • Thanks: 2

    Module Responsive Support Class problem

    Posted 10 years 11 months ago
    • www.texas-web-designs.com/duc
      Joomla 3.2.3
      Gantry 4.1.24
      Gantry template 4.1.24
      RokNavMenu 2.0.7

      I've got a module with a background image published in maintop on the frontpage. I made 4 of these, one each with visible-large, visible-desktop, visible-tablet and visible-phone. The module also has a semi-transparent white band across it in the background behind 5 circular image links. When I view the website with 1200px or greater, both the large and desktop modules appear. The desktop module at the bottom of the screen.

      When I view the site at widths between 960-1199px, only the visible-desktop version of the module appears.

      What's going on here? I also tried putting the opposite hidden-variables with the visible- but that causes other problems at other widths.

      I'm seeing this with with FF, Chrome and IE.

      Thanks in advance,
      Ed
    #1096633
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Module Responsive Support Class problem

    Posted 10 years 11 months ago
    • When in doubt about responsive breakpoints for a template, ALWAYS check out templates\gantry\less\mediaqueries.less.

      In your case it will reveal why your seeing these issues:
      // Desktop Modes
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	body.layout-mode-responsive {
		// Responsive Classes	
		.visible-large {
			display: none !important;
		}
		.hidden-large {
			display: inherit !important;
		}
		.visible-desktop {
			display: inherit !important;
		}
		.hidden-desktop {
			display: none !important;
		} 
		.promo {
			h1 {
				font-size: 3.7em;
			}
			p {
				font-size: 1.3em;
			}
		}
		.promo-image {
			width: 40%;
		}
		.promo-image img {
			max-width: 100%;
		}
	}
}
    #1096648
    • eRimkus's Avatar
    • eRimkus
    • Sr. Rocketeer
    • Posts: 168
    • Thanks: 2

    Re: Module Responsive Support Class problem

    Posted 10 years 11 months ago
    • I see that file, but don't understand what I need to change. Any advice?

      The module for the visible-large is only visible for >1200px widths as expected.
      The module for the visible-desktop is visible for 960-1199px and >1200px widths, so I end up with 2 similar modules displaying at >1200px.
      The module for the visible-tablet is only visible for 768-959px widths as expected.
      The module for the visible-phone is only visible for <768px widths as expected.

      Is there a better way to do this given I also have a background image for the module?

      Thank you
      Ed
    • Last Edit: 10 years 11 months ago by eRimkus.
    #1096807
    • eRimkus's Avatar
    • eRimkus
    • Sr. Rocketeer
    • Posts: 168
    • Thanks: 2

    Re: Module Responsive Support Class problem

    Posted 10 years 11 months ago
    • OK I got it. I added the following to gantry-custom.css and the problem is solved
      @media (min-width: 1200px) {
body.layout-mode-responsive .visible-desktop {
    display: none !important;
}
}

      Thanks for the help
      Ed
    #1096937

Time to create page: 0.055 seconds