0
Welcome Guest! Login
0 items Join Now

SOLVED Overlap sections

    • crash3903's Avatar
    • crash3903
    • Jr. Rocketeer
    • Posts: 39
    • Thanks: 0

    SOLVED Overlap sections

    Posted 6 years 7 months ago
    • Good afternoon I wonder if someone can help me

      I am using the gantry hydrotheme which I absolutely love! Is it posisble to have an image overlap two sections as in the attached image?

      This image is hidden for guests.
      Please log in or register to see it.


      I would like the valaution button to overlap the dark blue and white area as in the picture - Possible?

      Thanks

      Mark
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 98180
    • Thanks: 13046
    • Web Designer/Developer

    Re: SOLVED Overlap sections

    Posted 6 years 7 months ago
    • Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. 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.

      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.
    • crash3903's Avatar
    • crash3903
    • Jr. Rocketeer
    • Posts: 39
    • Thanks: 0

    Re: SOLVED Overlap sections

    Posted 6 years 7 months ago
    • Thanks Mark

      www.pierceandco.co.uk/new/

      I'm thinking maybe it needs to sit in a <div> tag with the relevant positioning but can't get it to work - At the moment it is just an image inserted after the <p> tags

      Regards

      Mark
    • Last Edit: 6 years 7 months ago by crash3903.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 98180
    • Thanks: 13046
    • Web Designer/Developer

    Re: SOLVED Overlap sections

    Posted 6 years 7 months ago
    • Use this code...
      div.sample-description {
          margin-bottom: -100px;
      }

      If you want more control per viewport then put that in media queries with different appropriate values.
      // 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) {
      
      }
      Media queries work like this:

      if the viewport size is xxxxx then
      use this css
      endif


      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Remember to recompile CSS from base outline too.


      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.
    • crash3903's Avatar
    • crash3903
    • Jr. Rocketeer
    • Posts: 39
    • Thanks: 0

    Re: SOLVED Overlap sections

    Posted 6 years 7 months ago
    • Hi Mark

      Just an update - I've managed to do this with your help, thanks very much, I really appreciated you taking the time :)

      pierceandco.co.uk/new/index.php

      Regards

      Mark

Time to create page: 0.092 seconds