[Resolved] Overlapping image

Home Forums Support [Resolved] Overlapping image

Home Forums Support Overlapping image

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1619286
    Leanne Foulger

    Hi,

    I am trying to recreate a non-wordpress website into wordpress. There is one problem, I cannot solve. I am not sure it is possible.

    Please look at the two examples and let me know if the round image just below the text “About Us” can overlap as in the original example website.

    Thanks,
    Leanne

    #1619291
    Leo
    Staff
    Customer Support

    Hi there,

    If you use the browser inspect tool, then you can see that it’s actually just a single image:
    https://www.screencast.com/t/3HLEK1WlOXWA

    #1619321
    Leanne Foulger

    Yes, I know. Is there a way to make it 1/2 on the text area and 1/2 on the background?

    Thanks

    #1619330
    Leo
    Staff
    Customer Support

    Not sure if I fully understand but there isn’t anything built-in for this.

    You would try using GenerateBlocks and negative margin to achieve this.

    I’ve used similar ideas in Grill:
    https://gpsites.co/grill/?page_id=25

    There is a video on this as well:
    https://youtu.be/WCyp5Xg4aXM

    Might be a little overkill for what you are trying to do though. The picture solution should work just as well.

    #1619366
    Leanne Foulger

    Thank you

    #1619367
    Leo
    Staff
    Customer Support
    #1619374
    Leanne Foulger

    The negative value on the image work! Thanks again!

    #1619376
    Leo
    Staff
    Customer Support
    #2170487
    Vee

    Hi I am doing the same, but using the Feather template, and trying to use it with my own text. Once I imported the template onto my site, the words do not overlap the second container, despite the negative margin. the text disappears under the second container.
    note:
    the template did not have a negative margin on the container, but instead on the heading.
    I tried adding a container around the heading and giving it a negative margin instead, as described in the video, but this did not work either.
    but the text still hides underneath the second container/background image.
    any thoughts? thanks.
    see here for original template page
    and
    here

    #2170528
    Fernando
    Customer Support

    Hi Vee,

    It seems that your Site Import is missing Additional CSS that should have been imported along with Feather.

    Specifically, this code:

    /*front page hero container*/
    .gb-container.hero-container {
    	overflow: visible;
    }

    Can you try re-importing Feather? Or, can try going to Appearance > Customize > Additional CSS and add this CSS?

    Here’s the entire CSS code that should have been added along with Feather:

    /* GeneratePress Site CSS */ /*archive page product hover effect*/
    .inside-wc-product-image:after {
        content: "View Product";
        left: 0;
        right: 50%;
        bottom: 0;
        top: 0;
    	  color: #ffffff;
        position: absolute;
        font-weight: 100;
        padding: 60% 10% 0 10%;
      	text-align: center;
    	  opacity: 0;
    	  border-left: 6px solid var(--accent);
    	  transition: all 0.5s ease;
    }
    
    .inside-wc-product-image:hover:after {
    	background-color: var(--hover-semi-trans-dark);
      opacity: 1; 
      right: 0;
    }
    
    /*front page hover semi-transparent effect*/
    .has-trans-bg {
        position: relative;
    }
    
    .has-trans-bg:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
    	  background-color: var(--hover-semi-trans-light);
    	  opacity: 0;
      	z-index:-2;
    		transition: all 0.8s ease;	
    }
    
    .has-trans-bg:hover:after {
    	opacity: 0.5;
    }
    
    /*front page hero container*/
    .gb-container.hero-container {
    	overflow: visible;
    }
    
    /* product tabs */
    .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    	background: none;
    }
    
    /*front page menu color*/
    @media (max-width: 1024px) {
    	.home .main-navigation:not(.slideout-navigation) .main-nav ul li a, .home .menu-toggle, .home .main-navigation .menu-bar-items a {
        color: var(--base) !important;
    	}
    } /* End GeneratePress Site CSS */

    Kindly check your WordPress version as well as having an older version still doesn’t have the “Additional CSS” functionality, in which case, you’ll need to update.

    Hope this clarifies. 🙂

    #2171358
    Vee

    Thanks Fernando. I reimported the template and got it working. I think I may not have imported “site options” last time, probably the issue. I dont actually need the woocommerce, so deleted a lot of items… could also have been the issue, but it seems ok now. just wanted to use the template for a splash page. 🙂

    Thanks!

    #2171747
    Fernando
    Customer Support

    You’re welcome Vee! Glad to be of assistance. You’re correct, you’ll need to import the site options for the additional CSS to be included. Feel free to reach out anytime you’ll need assistance with anything else. 🙂

    #2171842
    Leanne Foulger

    thanks

    #2171858
    Fernando
    Customer Support

    You’re welcome Leanne! 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.