رفتن به مطلب

مشکل رسپانسیو کردن grid در سایز های مختلف


پست های پیشنهاد شده

سلام 

من یه grid از مطالب ایجاد کردم میخواستم با css اون رو برای سایز های مختلف رسپانسیو کنم

مثلا در سایز 

360*640 دو ستونه بشه و عکس ها کنار هم قرار بگیره

یا مثلا داخل سایز 

768*1024 سه ستونه یا چهار ستونه بشه

این کد php

<?php
?>

<div class="gridcontainer">

<?php
// Grid Parameters
$counter = 0; // Start the counter
$grids = 6; // Grids per row
$titlelength = 20; // Length of the post titles shown below the thumbnails
// The Query
$args=array (
    'post_type' => 'lyrics',
    'posts_per_page' => 6
    );
$the_query = new WP_Query($args);
// The Loop
while ( $the_query->have_posts() ) :
    $the_query->the_post();
// Show all columns except the right hand side column
if($counter != $grids) :
?>
<div class="griditemleft">
<div>
        <a class="call3"  href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
    </div><!-- .postimage -->
    <h2 class="call4">
        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
        <?php if (mb_strlen($post->post_title) > $titlelength)
            { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, $titlelength) . ' ...'; }
        else { the_title(); } ?>
        </a>
    </h2>
</div><!-- .griditemleft -->
<?php
// Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
    <div>
        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
    </div><!-- .postimage -->
    <h2 class="call4">
        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
        <?php if (mb_strlen($post->post_title) > $titlelength)
            { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, $titlelength) . ' ...'; }
        else { the_title(); } ?>
        </a>
    </h2>
</div><!-- .griditemright -->

<div class="clear"></div>
<?php
$counter = 0;
endif;
$counter++;
endwhile;
wp_reset_postdata();
?>

</div><!-- .gridcontainer -->

و اینم کد های css

 

.gridcontainer .griditemleft{float: left;
width: 150px;
margin: 0 5px 15px 0;}

.call4{
    font-size: 12px;
    background-color: rgba(161,160,161,1);
    padding-left: 10px;
    padding-bottom: 4px;
    padding-top: 2px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.call3{
    color:#123215;
    
}

لینک به ارسال

شما باید کلاس تعریف کنید و سپس در فایل css به اون کلاس استایل بدین و سپس به اون کلاس اندازه پهنا رو تعیین کنید تا سیستم زمان کوچک شدن صفحه کلاس مورد نظر رو لود کنه

برای اینکار بهتر است از فریمورک های آماده ای چون بوت استرپ استفاده کنید

لینک به ارسال
در 16 ساعت قبل، فرهاد گفته است :

شما باید کلاس تعریف کنید و سپس در فایل css به اون کلاس استایل بدین و سپس به اون کلاس اندازه پهنا رو تعیین کنید تا سیستم زمان کوچک شدن صفحه کلاس مورد نظر رو لود کنه

برای اینکار بهتر است از فریمورک های آماده ای چون بوت استرپ استفاده کنید

تشکر واقعا همین راهنماییتون باعث شد که انجامش بدم از طریق

@media (min-width: 1068px)

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...