Bunu düzenleyebilecek kadar bilgiye sahip değilim ama light slider kullanabilirsin

AJAX ile yapmak mümkün

<nav>
    <ul>
        <li><a href="#" id="anasayfa">Anasayfa</a></li>
        <li><a href="#" id="iletisim">İletişim</a></li>
        <li><a href="#" id="hakkimizda">Hakkımızda</a></li>
    </ul>
</nav>

<div class="container">
    <h1>Anasafya</h1>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

$('nav ul li a').click(function () {
    $.post('getPage.php',{
        sayfa: $(this).attr('id')
    },function(response) {
        $('.container').html(response);
    });
});

// getPage.php sayfası için
switch($_POST['sayfa']):
    case 'anasayfa':
        include_once 'anasayfa.php';
    break;
    case 'iletisim':
        include_once 'iletisim.php';
    break;
    default:
        include_once 'hakkimizda.php';
endswitch;

// ansayfa.php sayfası için
echo '<h1>Anasayfa</h1>';

// iletisim.php sayfası için
echo '<h1>İletişim</h1>';

// hakkimizda.php sayfası için
echo '<h1>Hakkımızda</h1>';

Ubuntu için LAMP var.

Farklı tarayıcıdan?

Bende bir sorun gözükmüyor farklı bir telefon veya internetten kullanarak denedin mi?

JSON neden kullanılıyor bilmiyorum, kullanılmamış halinin örneğini inceleyebilirsin.

<!-- index.php -->
<input type="text" name="q" class="search">
<div id="yazbuna"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('.search').keyup(function (){ // keydown veya keyup
            $.post('arama.php',{
                arama: $('.search').val()
            }, function(response) {
                $('#yazbuna').html(response);
            })
        });
    });
</script>

// arama.php
if(isset($_POST['arama'])):
    // Yapılacak işlemler
    echo $_POST['arama'];
endif;

Sayfanın link'ini paylaşır mısın?

Aldığın hosting firmasıyla iletişime geçmen sorunun daha kesin bir şekilde çözülmesine yardımcı olabilir

flex-direction ile bunu yapabilirsin.

<div class="product-wrapper"> <!-- Ürünlerin tutulduğu kapsayıcı başlangıç -->
    <div class="product"> <!-- 1. Ürün -->
        <div class="product-head"> <!-- Ürün Resmi -->
            <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="product-body"> <!-- Ürün İsmi -->
            Product Name
        </div>
        <div class="product-footer"> <!-- Sepete Ekle Butonu -->
            <button>Sepete ekle</button>
        </div>
    </div> <!-- 1. Ürün bitiş -->
    <div class="product"> <!-- 2. Ürün başlangıç -->
        <div class="product-head"> <!-- Ürün Resmi -->
            <img src="https://via.placeholder.com/150" alt="">
        </div>
        <div class="product-body">
            <!-- Ürünün yüksekliği diğerinden farklı olsun diye <br> yazdım -->
            Product Name <br><br><br><br><br><br><br>
        </div>
        <div class="product-footer"> <!-- Sepete Ekle Butonu -->
            <button>Sepete ekle</button>
        </div>
    </div> <!-- 2. Ürün bitiş -->
</div> <!-- Ürünlerin tutulduğu kapsayıcı bitiş -->

.product-wrapper{ 
    display: grid; /* Ürünler yan yana gelsin diye */
    grid-template-columns: 1fr 1fr; /* Kaç adet ürünün yan yana geliceği belirler, kaç ürün yan yana gelsin istiyorsak o kadar 1fr yazmamız gerekiyor. */
}
.product{
    display: flex;
    flex-direction: column;
}
.product-footer{
    margin-top: auto; 
    /* 
    * sepete ekle butonunun içinde olduğu bu div ürünün yüksekliği ne kadar olursa olsun onun daima en altta kalmasını sağlar.
    * flex-direction: column; özelliği olmadan kullanılmıyor.
    */
}

CSS Flex ile İlgili Her şey Tayfun Erbilen
Ek olarak bunlara da bir bakmanı tavsiye ederim
Medium CSS Grid Layout
Mozilla CSS Grid Layout