نمایش قسمتی از سایدبار فقط در موبایل

[alireza.ar 0]

سلام دوستان، من یک قسمتی در سایدبار اضافه کردم که میخوام این قسمت سایدبار "فقط" در موبایل نمایش داده شود، سایدبارم الان 3 تا سکشن داره که میخوام دو تاش در دسکتاپ نمایش داده بشه و در موبایل اون یکی هم اضافه بشه.

میشه دوستان راهنمایی کنن؟ 

[asadiy4n 2807]

سلام ساده ترین راه اینه که یک کلاس به اون ویجت اضافه کنید مثال mobile-view  و اون رو display: none قرار بدید و در موبایل mobile-view رو display: block قرار بدید مثال

html

<div class="sidebar">
  <div class="widget"></div>
  <div class="widget"></div>
  <div class="widget mobile-view"></div>
</div>

css

.sidebar .widget.mobile-view{display: none}
@media screen and (min-width:500px) {
 .sidebar .widget.mobile-view {
  display: block
 }
}

 

[alireza.ar 0]

خیلی ممنونم از راهنماییتون، میشه یکم بیشتر توضیح بدید روی این مورد من، سایدبار من الان اینه: 

<aside class="leftsidebar" role="complementary">
<section class="newsbox">
<div class="title"><h3>دسته بندی</h3></div>
<ul>
<?php wp_list_cats('sort_column=name'); ?>
</ul>
</section>
<section class="newsbox">
<div class="title"><h3>جدیدترین آهنگ ها</h3></div>
<ul>
<?php
query_posts('showposts=15'); ?>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</section>
<section class="newsbox">
<div class="title"><h3>آهنگ های پیشنهادی</h3></div>
<ul>
		<?php
query_posts(array('orderby' => 'rand', 'showposts' => 10));
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> 
<?php endwhile; ?>
<?php endif; ?>
</ul>
</section>
</aside>
<div class="clear"></div>
</section>

میخوام قسمت اولش فقط در موبایل نمایش داده بشه. با این کلاسا چه تغییراتی انجام بدم

[asadiy4n 2807]

به این شکل تغییر بدید

<section class="newsbox mobile-view">
<div class="title"><h3>دسته بندی</h3></div>
<ul>
<?php wp_list_cats('sort_column=name'); ?>
</ul>
</section>

در css هم

.leftsidebar .newsbox.mobile-view{display: none}
@media screen and (min-width:500px) {/*این عدد رو بسته به نیاز می تونید تغییر بدید در اینجا برای عرض ۵۰۰ هست*/
 .leftsidebar .newsbox.mobile-view {display: block}
 }

 

[alireza.ar 0]

خیلی خیلی ممنونم ازتون، من اینو جایگزین کردم، فقط الان برعکس شده، تو دسکتاپ نشون میده تو موبایل نشون نمیده... چیو باید تغییر بدم؟

[asadiy4n 2807]

ادرس آنلاین بدید کد بنظر درست میاد

[alireza.ar 0]

nitmusic.com

[asadiy4n 2807]

کدتون رو در جای اشتباهی قرار دادید

کد قبلی رو در فایل استایل پاک کنید کلا و در جایی خارج از media screen ها قرار بدید همین رو هم قرار بدید کفایت میکنه

.mobile-view{display: none}
@media only screen and (max-width:500px){
  .mobile-view{display: block}
}

ساده تر بگم این کد رو خارج از مدیا اسکرین ها قرار بدید .mobile-view{display: none}

و این قسمت رو داخل یکی از مدیا اسکرین ها .mobile-view{display: block}

 

[alireza.ar 0]

خیلی ممنونم از راهنماییتون درست شد.