0
Welcome Guest! Login
0 items Join Now

Question about design process in Gantry

    • Carlos's Avatar
    • Carlos
    • Newbie
    • Posts: 18
    • Thanks: 0

    Question about design process in Gantry

    Posted 2 weeks 2 days ago
    • Hi,

      I appreciate your help in resolving a design-related question.

      I need to replicate the design from the attached mockups for both PC and mobile versions.

      PC version

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


      Mobile version

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


      I've noticed that Gantry styles allow adding a background image, but I’ve encountered some limitations:
      • I don’t want the background image to remain visible across the entire website when scrolling.
      • In my tests, this option doesn’t resize properly on mobile.

      I'm looking for an alternative that allows me to:
      • Add a background image that includes the central black circle with text and occupies only the first screen on both PC and mobile.
      • Adjust the image cropping in the mobile version or, alternatively, have the option to display a different image for each version.

      I’d appreciate any guidance on how to achieve this effectively.

      Best regards.
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22236
    • Thanks: 3219
    • messin' with stuff

    Re: Question about design process in Gantry

    Posted 2 weeks 1 day ago
    • Carlos's Avatar
    • Carlos
    • Newbie
    • Posts: 18
    • Thanks: 0

    Re: Question about design process in Gantry

    Posted 2 weeks 1 day ago
    • Hi Matt,

      Thanks for the information, I will review it to find a solution.

      Greetings
    • Carlos's Avatar
    • Carlos
    • Newbie
    • Posts: 18
    • Thanks: 0

    Re: Question about design process in Gantry

    Posted 2 weeks 7 hours ago
    • Hi Matt:

      I've finally gotten 95% closer to the desired result using this CSS code.


      #g-slideshow {
          height: 100vh;
          object-fit: cover;
      }
      
      #g-container-top {
          position: relative;
      }
      
      #g-container-top:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
      }
      
      @media (max-width: 768px) {
          #g-container-top:before {
              height: 100%;
          }
      }
      


      Now I need your help to identify what is causing the white space to be added after the background image, I've looked into it with the code inspector and I can't figure it out.

      I add an image by marking the space that is added in blue.

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


      I appreciate your help.
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22236
    • Thanks: 3219
    • messin' with stuff

    Re: Question about design process in Gantry

    Posted 2 weeks 3 hours ago
    • Custom development is beyond the scope of moderator support.
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:

Time to create page: 0.052 seconds