مشکل چیدمان پست های ریسپانسیو در وردپرس

حل شده 

Wordpress

توسط nex در 1 سال پیش
2 23.7k 2 1 سال پیش
nex mehdigm digisys
1

سلام دوستان وقت بخیر من بصورت داینامیک هرکاری میکنم پستای سایتی که دارم طراحی میکنم کنار هم بیاد نمیاد، البته به صورت استاتیک با کلاس های card یا col بوت استرپ میتونم ریسپانسیو بزارم ولی مسئله اینجاست که میخوام پستایی که تو وردپرس ارسال میشه کنار هم باشن که هرکاری کردم با float یا display:flex کنار هم نیومدن، عکس و کد فایل post.php رو ضمیمه کردم کسی میدونه ممنون میشم اطلاع بده

<div class="container">
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="row">
                <div class="col-12 col-md-4">
                    <div id="content">
                        <div class="cont-img text-center"><a
                                    href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                        </div>
                        <h3 class="cont-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                        <div class="cont-entry"><?php echo mb_strimwidth(get_the_excerpt(), 0, 75, '...'); ?></div>
                        <div class="timepost">
                            <i class="fa fa-clock-o fa-lg" aria-hidden="true"></i>
                            <?php the_time(); ?>
                        </div>
                    </div>
                </div>
            </div>
        <?php endwhile; ?>
    <?php endif; ?>
</div>

پاسخ ها

2

کلاس row رو از حلقه خارج کنید . به این شکل

<div class="container">
    <?php if (have_posts()) : ?>
	<div class="row">
        <?php while (have_posts()) : the_post(); ?>
            <div class="col-12 col-md-4">
                <div id="content">
                    <div class="cont-img text-center"><a
                                href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                    </div>
                    <h3 class="cont-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                    <div class="cont-entry"><?php echo mb_strimwidth(get_the_excerpt(), 0, 75, '...'); ?></div>
                    <div class="timepost">
                        <i class="fa fa-clock-o fa-lg" aria-hidden="true"></i>
                        <?php the_time(); ?>
                    </div>
                </div>
            </div>
        <?php endwhile; ?>
		</div>
    <?php endif; ?>
</div>
فقط یه مسئله هست، تو دیوایس های مختلف عکس از باکس میزنه بیرون از کلاس img-responsive هم استفاده کرده یا اینکه به کلاس cont-img که تو کدای بالا هم هست display:block دادم و max-width:100% گذاشتم که بازم نشد فقط یه راه شد اونم overflow بود که hidden گذاشتم – nex 1 سال پیش
ولی با overflow:hidden هم عکس ناقص میشه، راه دیگه ای هست؟ – nex 1 سال پیش
مقدار mxa-width:100% یا width:100% رو به خود عکس باید بدید نه به div ی که عکس داخلش قرار داره. – mehdigm 1 سال پیش
ممنونم درست شد – nex 1 سال پیش
1

ممنونم دوست خوبم

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید