URL link in div class overrides second url WPBakery

Question

My website has a home grid function earlier created by another developer. There are two blocks with two separate buttons with a link. Now "lees meer" goes to a URL and "lees hier alles over" goes also to the same URL, but this needs to go to another URL was already filled in the backend. To be clear, the whole section goes to the first URL. check link

See below the code:

    function duingoed_home_grid_func($atts) {
    /**
     * @var $lb_text
     * @var $m_image1
     * @var $rb_text
     * @var $rb_image
     * @var $lb_image
     * @var $lb_link
     * @var $l_block_link
     * @var $rb_link
     * @var $r_block_link
     * @var $m_image1
     * @var $m_image2
     */
    extract(shortcode_atts(array(
        'lb_text' => '', 'lb_link' => '', 'lb_image' => '', 'l_block_title' => '', 'l_block_text' => '', 'l_block_link' => '', 'l_block_bg' => '#ffffff',
        'm_image1' => '', 'm_image2' => '',
        'rb_text' => '', 'rb_link' => '', 'rb_image' => '', 'r_block_title' => '', 'r_block_text' => '', 'r_block_link' => '', 'r_block_bg' => '#ffffff',
    ), $atts));
    ob_start();

    $fotourl1 = '';
    $foto1 = wp_get_attachment_image_src($lb_image, 'full');
    if (!empty($foto1) && !empty($foto1[0])) {
        $fotourl1 = $foto1[0];
    }
    $lb_link = vc_build_link($lb_link);
    $l_block_link = vc_build_link($l_block_link);

    $fotourl2 = '';
    $foto2 = wp_get_attachment_image_src($rb_image, 'full');
    if (!empty($foto2) && !empty($foto2[0])) {
        $fotourl2 = $foto2[0];
    }
    $rb_link = vc_build_link($rb_link);
    $r_block_link = vc_build_link($r_block_link);

    $foto1m = wp_get_attachment_image_src($m_image1, 'full');
    $foto2m = wp_get_attachment_image_src($m_image2, 'full');

    ?>
    <div class="row justify-content-center h-100">
        <div class="col-md-5">
            <div class="h-100 d-flex flex-column">
                <div class="row justify-content-center px-3">
                    <?php echo photo_link($fotourl1, $lb_text, $lb_link); ?>
                </div>
                <div class="row justify-content-center flex-grow-1 px-3">
                    <?php echo dg_text_block($l_block_title, $l_block_text, $l_block_link, $l_block_bg); ?>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="row d-flex my-3 my-md-0">
                <?php
                if (!empty($foto1m) && !empty($foto1m[0])) {
                    ?>
                    <div class="col-6 col-md-12 px-2">
                        <img src="<?= $foto1m[0] ?>" alt="Duingoed" class="img-fluid mb-md-4">
                    </div>
                    <?php
                }
                if (!empty($foto2m) && !empty($foto2m[0])) {
                    ?>
                    <div class="col-6 col-md-12 px-2">
                        <img src="<?= $foto2m[0] ?>" alt="Duingoed" class="img-fluid">
                    </div>
                    <?php
                }
                ?>
            </div>
        </div>
        <div class="col-md-5">
            <div class="h-100 d-flex flex-column">
                <div class="row justify-content-center px-3">
                    <?= photo_link($fotourl2, $rb_text, $rb_link) ?>
                </div>
                <div class="row justify-content-center flex-grow-1 px-3">
                    <?= dg_text_block($r_block_title, $r_block_text, $r_block_link, $r_block_bg) ?>
                </div>
            </div>
        </div>
    </div>
    <?php
    $data = ob_get_contents();
    ob_end_clean();

    return $data;
}

add_shortcode('duingoed_home_grid', 'duingoed_home_grid_func');

Answer 1

After inspecting your page I noticed that the images have a :before element on the <a> tag that function to make the whole image clickable. However because the image does not have the position: relative it wraps the entire column. To fix this you simply have to add position relative to the image block. You can do this by adding a custom class to it or selecting it using the following css selector class.

.flex-column .row {
    position: relative;
}

Check the following images for a visual explaination.

Without position relative;

With poisition relative;

So this turns out to be a CSS issue. As the URL on the button is different from the URL on the image block above. I however would suggest adding a custom class to the row element you used for the image block as this will make it easier to put position relative on them.

Let me know if this solved your issue. If it doesn't, I will look into it further.