0
Welcome Guest! Login
0 items Join Now

SOLVED Reproducing Myriad FP Slideshow - Full Slideshow in Gantry5-Hydrogen

    • neuclix's Avatar
    • neuclix
    • Hero Rocketeer
    • Posts: 298
    • Thanks: 3

    SOLVED Reproducing Myriad FP Slideshow - Full Slideshow in Gantry5-Hydrogen

    Posted 8 years 5 months ago
    • MrT/Mark,

      The site is www.lonnymusic.com
      The code you gave me was

      section#g-showcase > .g-container {
      width: 100%;
      }
      section#g-showcase > .g-container > .g-grid > .g-block > .g-content {
      margin: 0;
      padding: 0;
      }

      I have put the above code in home/lonnymus/public_html/templates/g5_hydrogen/custom/scss/custom.scss

      I then recompiled the css from the base outline.

      The Roksprocket Features particle instance is not showing up as you can see there is a left particle and a right particle. The right particle is empty, only the left shows up.

      I greatly appreciate your help as well as your advise on forum edicate.

      May we continue from here please? I have a feeling we are close to getting the module to show up in the right block of the showcase grid in Hydrogen

      Thanks again
    • Thanks in advance,
      Steve Hodges
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Reproducing Myriad FP Slideshow - Full Slideshow in Gantry5-Hydrogen

    Posted 8 years 5 months ago
    • Why are you putting two roksprocket slideshows in the showcase section?

      Please would you post your URL, superuser id and pswd in the secure tab of your post and i'll have a look for you.

      Regards, Mark.
    • 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.
    • neuclix's Avatar
    • neuclix
    • Hero Rocketeer
    • Posts: 298
    • Thanks: 3

    Re: SOLVED Reproducing Myriad FP Slideshow - Full Slideshow in Gantry5-Hydrogen

    Posted 8 years 5 months ago
    • This message contains only secure information that is visible to MrT, moderators and administrators
    • Thanks in advance,
      Steve Hodges
    • neuclix's Avatar
    • neuclix
    • Hero Rocketeer
    • Posts: 298
    • Thanks: 3

    Re: SOLVED Reproducing Myriad FP Slideshow - Full Slideshow in Gantry5-Hydrogen

    Posted 8 years 5 months ago
    • Actually the way the Hydrogen Slideshow picture displays is fine. What I would like to edit is where the text displays (for example: center) and what background container seems to surround the text (for example: none)
    • Thanks in advance,
      Steve Hodges
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Reproducing Myriad FP Slideshow - Full Slideshow in Gantry5-Hydrogen

    Posted 8 years 5 months ago
    • It looks like you figured out how to change the position of the text - but I wouldn't use a fixed px value - use percent instead. Also you might need to use media qqueries so that you can set a value approriate to the viewport size.
      // Gantry 5 custom CSS file
      
      // import dependencies
      @import "dependencies";
      
      // Typical values are the default breakpoints set in Gantry 5
      // but these values are user definable in style settings
      // so that is why the code below uses mixins to get the actual 
      // values from Gantry 5 template.
      
      // commonly used media queries
      
      //  typically min 75rem 
      @include breakpoint(large-desktop-range) {
      
      }
      // typically range 60rem to 74.938rem 
      @include breakpoint(desktop-range) {
      
      }
      
      // typically 48rem to 59.938rem
      @include breakpoint(tablet-range) {
      
      }
      // typically 30rem to 47.938rem
      @include breakpoint(large-mobile-range) {
      
      }
      // typically max 30rem
      @include breakpoint(small-mobile-range) {
      
      }
      
      // Less commonly used media queries
      
      // typically min 60rem
      @include breakpoint(desktop-only) {
      
      }
      // typically min 48rem
      @include breakpoint(no-mobile) {
      
      }
      // typically max 47.938 rem
      @include breakpoint(mobile-only) {
      
      }
      // typically max 59.938rem
      @include breakpoint(no-desktop) {
      
      }
      



      Regards, Mark.
    • The following users have thanked you: neuclix

    • 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.
    • neuclix's Avatar
    • neuclix
    • Hero Rocketeer
    • Posts: 298
    • Thanks: 3

    Re: SOLVED Reproducing Myriad FP Slideshow - Full Slideshow in Gantry5-Hydrogen

    Posted 8 years 5 months ago
    • Just to be clear before I go further...
      I will be including the media queries in your last message as the first thing in the custom.scss file (I assume everything is going there). Does this mean I can eliminate all that other "port size responsive" code I have for Desktop/Tablet/Mobile... because it is already handled in the media queries?
    • Thanks in advance,
      Steve Hodges
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Reproducing Myriad FP Slideshow - Full Slideshow in Gantry5-Hydrogen

    Posted 8 years 5 months ago
    • media queries do nothing on their own. They just a way of making specific CSS apply to a particular viewport size.

      I don't really understand what you think you should now be eliminating? if you are referring to the module class suffixes e.g. "hidden-phone" etc then, no you cannot eliminate those unless you are prpepared to spend ages writing custom CSS to do thae same thing.

      Yes, ALL custom css goes in your custom CSS file.

      Regards, Mark.
    • 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.
    • neuclix's Avatar
    • neuclix
    • Hero Rocketeer
    • Posts: 298
    • Thanks: 3

    Re: SOLVED Reproducing Myriad FP Slideshow - Full Slideshow in Gantry5-Hydrogen

    Posted 8 years 5 months ago
    • no, I think I was just confusing your "media queries" with Henny Smafter's "@media (min-width: 0px) and (max-width: 767px)"
      please have a look at www.lizzimarshall.com
      I am getting really close with this but having issues with .sprocket-features-title:after.
      Here is the code I am using:
      @media (min-width: 0px) and (max-width: 767px) {
      div.layout-slideshow .sprocket-features-content .sprocket-features-title:after {
      background-color: white;
      width: 80px;
      height: 5px;
      content: "";
      position: absolute;
      left: 32%;
      top: 40%;
      }/*-0 +767*/
    • Thanks in advance,
      Steve Hodges
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Reproducing Myriad FP Slideshow - Full Slideshow in Gantry5-Hydrogen

    Posted 8 years 5 months ago
    • That is not the correct way to do it. Gantry 5 gives you the ability to modify the responsive breakpoints on the "styles" tab of the outline (towards the bottom). For this reason you should use the Gantry 5 mixin variables rather than hardcoding fixed px values.

      Regards, Mark.
    • 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.
    • neuclix's Avatar
    • neuclix
    • Hero Rocketeer
    • Posts: 298
    • Thanks: 3

    Re: SOLVED Reproducing Myriad FP Slideshow - Full Slideshow in Gantry5-Hydrogen

    Posted 8 years 5 months ago
    • Yes, I have seen the the breakpoints on the "styles" tab of the outline, but my needs are not so much "where" the breakpoints are, but what is changed as you view from different devices, so... Now I must learn Gantry 5 mixin variables. I can start with using the mixin variables I have seen you suggest. I do not know how many to use as the list is confusing me. You show commonly used and less commonly used codes and I don't know exactly how to apply them. I will be experimenting with it while waiting for your reply
    • Thanks in advance,
      Steve Hodges

Time to create page: 0.058 seconds