mardi 31 mars 2020

why my element aside working above navbar when i doing scrolling down on dekstop and element aside is not below on mobile devices?

so, i want to make the aside element below, just when it looks like it's made a mobile device. BUt this is an error, right on mobile device, not below, but instead still beside but the display element is missing. And then, on dekstop display, when i'm srolling down, for the elements outside the navbar. Please help me, thanks.

on dekstop ; enter image description here

on mobile devices enter image description here

CSS ;

aside{
    /* position: fixed; */
    /* float: right;
    width: 25%; */
    /* padding-left:25px; */
    /* overflow-x: auto;
    height: 100%; */


}
    .box{
        width: 15em;
        border: 1px solid #333;
        /* box-shadow: 4px 4px 2px #444; */
        padding: 8px 12px;
        flex-grow: 1;
        margin: 10px;
        border: none;

    }

    .content{
        float: left;
        width: 73%;
    }

    .flex-container{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        margin-top: 50px ;
        margin-bottom: 50px; 
    } 
    .absolute{
        position: absolute;
        /* top: 0; */
        left: 1000px; 
    }

    @media screen and (max-width: 480px){

        .content, .flex-container, .box,  
        aside{
            width: 100%;
            padding:0;
        }
    }

HTML;

  <main >
<div class="content">
    <article id="Home" >
        <div class="home">
        <h4> Yuk Kenalan bentar sama Bojonegoro! </h4>
        <figure>
        <img src="assets/img/maps.png" class="featured-image" > 
        <!-- <figcaption>maps wilayah bojonegoro</figcaption> -->
        </figure>
        <p>Bojonegoro itu salah satu wilayah yang terletak di provinsi Jawa Timur, dan berbatasan langsung dengan Kabupaten Blora, Jawa Tengah. lohh
            Wilayah ini memiliki potensi alam yang kaya terutama dari hasil sumber daya alam seperti   tambang, migas, pertaniain, dan beragam kesenian traditional yang ada.
            Dulu, daerah ini pernah dikuasai kerajaan besar yaitu Majapahit yang beragama Hindu-Budha serta Demak yang beragama Islam.
            Maka, bisa kita simpulkan bahwa sejak zaman dulu kekayaan bumi Bojonegoro sudah banyak diperebutkan oleh banyak kerajaan. Sehingga budaya, tradisi, makanan khas Bojonegoro, terbentuk ari berbagai zaman yang pernah menguasai Bojonegoro.
        </p>

         </div>
    </article>
    <div class="flex-container">
    <article id="Kesenian" class="cards box">
        <div class="row">
        <div class="col-lg-3 col-6">
        <div class="art">
        <img src="assets/img/arts.png" height="150px" >
        <h3>Kesenian</h3>
         </div>
        </div>
        </div>

    </article>

    <article id="Kuliner" class="cards box">
        <div class="row">
        <div class="col-lg-3 col-6">
        <div class="art">
            <img src="assets/img/kuliners.png" height="150px">
            <h3>Kuliner</h3>
        </div>
        </div>
         </div>
    </article>

    <article id="Wisata" class="cards box">
        <div class="art">
            <img src="assets/img/wisata.png" height="150px">
            <h3>Wisata</h3>
        </div>

    </article>
    </div>

    <article id="kesenian" class="card ">
        <h4> Kesenian </h4>
        <p> Kesenian bojonegoro itu sangat banyak yee kan, kalau ga percaya coba jalanjalan kesana aja</p>
        <section>

            <h5>Tari Sandur</h5>
            <p>Seni tradisi Sandur biasa dilaksanakan setelah panen, hal ini dilakukan sebagai wujud terimakasih masyarakat atas panen yang diberikan oleh Tuhan YME kepada mereka. 
                <br> disebut Sandur karena dilaksanakan setelah panen berlangsung. Selain di Bojonegoro, Tuban juga memiliki kesenian ini, tapi dengan ciri masing-masing. </br>
                <br> <b>Prosesi yang dilakukan,sebagai berikut:</b><br>
                <ul>
                    <li> Pra pertunjukan</li>
                    <ol type="a">
                        <li>Proses Ritual Setren</li>
                        <p>Memerintah berkah dari leluhur, khususnya untuk properti pertenjukan terntentu, yakni Jaranan. Tali sumbang adegan atraksi <i>kalangking</i>,
                        <br>pecut untuk menyadakarkan tersebut di masukkan atau diinapkan dalam <i>cungkup</i> (makan leluhur) srta kelengkapan sesaji berupa kemenyan atau dupa. 
                    </p>
                        <li>Tujuan Umum</li>
                        <p> ritual setren ini bertujuan agar pertunjukkan Sandur yang dilaksanakan </p>
                    </ol>
                </ul>
            </p>
        </section>
    </article>
</div>


    <aside>
        <div class="absolute ">
        <article class="card">

            <header>
                <h2>INFORMASI LAINNYA</h2>

                <figure>
                    <img src="assets/img/me.jpg" height="200px"">
                </figure>
            </header>
           <section>
            <h3>Tentang Saya</h3>
            <table>
                <tr>
                    <th>Asal Sekolah</th>
                    <td>SMK NEGERI NGASEM</td>
                </tr>
                <tr>
                    <th>Asal Kota</th>
                    <td>BOJONEGORO</td>
                </tr>
                <tr>
                    <th>No. Tlp</th>
                    <td>086367985867</td>
                </tr>
            </table>
           </section>

        </article>
        </div>
    </aside>

</div>



Aucun commentaire:

Enregistrer un commentaire