Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1080104
    scottkwilson
    Participant

    Hi. How do I create a layered effect similar to this site (below), where the blue boxes go over the hero image? I haven’t started anything yet and want to get your advice on the best approach. Thanks.

    https://www.addictioncenter.com/

    #1080112
    Christian
    Moderator

    Hey Scott,

    That could be achieved by setting the section’s top margin to a negative value. Please give us the URL of your page and access to your WordPress admin so we could check your current setup.

    Thanks.

    #1081141
    scottkwilson
    Participant

    It’s working well on PC but there is too much space below the ‘Call today at 470-223-6042’ text and the Section titled ‘Body’ when viewing on mobile. Attached is a screenshot from mobile. Below is the link. I’d prefer not to hand out the login unless absolutely necessary. Thx!

    http://rptsigns.stormwindcreative.com/index.php/benefits-of-billboard-advertising/

    #1081174
    Christopher
    Moderator

    Hi there,

    Please reduce bottom padding from section #1. Add a row in that section and use visibility options to display gap element only for large screens.

    Hope it helps.

    #1087886
    scottkwilson
    Participant

    Can you explain what you mean by ‘use visibility options to display gap element only for large screens’. I’m not familiar with this. Thanks.

    #1088207
    Rad
    Moderator

    Hi there,

    When you inspect section, row, or even gap element, you’ll notice this option HIDE BASED ON SCREEN WIDTH. With that option, you can decide to which the gap element should be hidden.

    Then while hiding them, you can check it by clicking mobile icon near save button and simulate your target device. There, you should able to see how the visibility option can affect elements.

    Thanks!

  • <script> jQuery(function($){ $("#no-reply-1080104 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>