Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1198581

    Hi,
    I would like to achieve this, the car partially over the element above.

    The page is https://www.ninserviziogratuito.co.uk/confused-quotazione-assicurazione-auto

    This is the code I used:

    .my_car {
        top: -200px!important;
        position: relative!important;
    }

    I managed to move the car above but it makes a hole (big white space) below it. How do I avoid this space below it? https://www.screencast.com/t/edbbmvZbduo

    Same page: How do I move the icon at the left of the text? https://www.screencast.com/t/j3DRteSzoj3o

    thanks,
    Marco

    • This topic was modified 4 years, 8 months ago by marcoabis81. Reason: Added second question for the same page
    #1198906

    Hey marcoabis81,
    Please try adding the negative margin to the column instead of the image that is inside of the column, this way the text and image will move up.
    To have your icons in your text elements hang on the left of your paragraphs, try clicking on the icon/image and choosing the “align left” icon:
    2020-03-29_122457.png

    Best regards,
    Mike

    #1198909

    Hi Mike,
    amazing. I got both done :-)

    Regarding the image, how can I stop the text going below the image? I would like to keep the text at the right of the pic without surrounding it.

    Thanks,
    Marco

    #1198960

    Hi,
    This css seemed helped with your first two sections on your site:

    p.teaser__copy {
    	margin-left: 90px;
    }

    The image and it’s padding is 90px wide so the margin-left on the paragraphs seemed to bring everything in line.
    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    #1199066

    Hi Mike,
    thank for pointing me out.
    I am testing the code, I see yours works.

    I am just wondering, did you add the class manually on each paragraph within the element? and to make it faster, how can I assign a class to the paragraph within these specific elements?

    Regarding to the space created below the CAR, I have put the class in the element rather than on the image. Still, it creates a whole below the text. See the little video https://www.screencast.com/t/Gj0juKvTCFT

    Thanks,
    Marco

    • This reply was modified 4 years, 7 months ago by marcoabis81.
    #1199766

    Hi,
    Sorry for the late reply, glad this helps, I didn’t add the paragraph classes they were already there, perhaps you are pasting the text from another page?
    Sorry, I couldn’t watch your video, it requires “flash”, can you upload as mp4 or another format?
    Your page also seems moved, I found a new page linked in the Private Content area.
    Using the negative top tends to move elements up leaving a space below, so I added this function in your child theme functions.php to make the color section height the same as the inner column height:

    function custom_height_script(){
      ?>
      <script>  
     (function($){
      $(window).load(function(){
          var s1 = $('#top.page-id-9493 #av_section_10 ').height();
        var s2 = $('#top.page-id-9493 .flex_column.avia-builder-el-60').height();
    
        if (s1 < s2)
            $('#top.page-id-9493 .flex_column.avia-builder-el-60').css('height', s1 + "px");
        else
            $('#top.page-id-9493 #av_section_10').css('height', s2 + "px");
      });
      })(jQuery);
      </script>
    <?php
    }
    add_action('wp_footer', 'custom_height_script');

    This seems to help, please clear your browser cache and check.

    Best regards,
    Mike

    #1200571

    Hello Mike,
    hope you are fine.

    The code almost worked. There is still some space. But better than before :-)
    If you know how to reduce completely that space would be nice.

    Thanks,
    Marco

    • This reply was modified 4 years, 7 months ago by marcoabis81.
    #1200788

    Hi,
    I agree, I changed the code a little to subtract 100px from the color section, which seems to remove the white area, I also added a custom ID to the color section “car-color-section” and to the column “car-column” so that the elements will be easier to target without the possibility of the auto-classes of changing, and you will be able to use it on any page.
    I couldn’t edit your functions.php, so please change the script to this:

    function custom_height_script(){
      ?>
      <script> 
    (function($){
      $(window).load(function(){
          var s1 = $('#car-color-section ').height();
        var s2 = $('#car-column').height();
    
        if (s1 < s2)
            $('#car-column').css('height', s1 + "px");
        else
            $('#car-color-section').css('height', s2 - 100 + "px");
      });
      })(jQuery);
      </script>
    <?php
    }
    add_action('wp_footer', 'custom_height_script');

    In this part of the code ('height', s2 - 100 + "px"); you can change the “100” to any number to like, it is subtracting 100px from the height.
    After making these changes, Please clear your browser cache and check.

    Best regards,
    Mike

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