رفتن به مطلب

ریسپانسیو گالری وردپرس


amirpashayi2

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

سلام وقت بخیر

توی مطالب وردپرس که میخوایم عکس بزاریم

فرقی نمیکنه چه عکس ساده چه گالری که میزارم ریسپانسیو درنمیاد

خود قالب ریسپانسیو هست ولی عکسا خراب میکنن یه افزونه یا کدی چیزی هست که عکسا هم ریسپانسیو بشه؟مخصوصا گالری

از خود وردپرس گالری ساختم افزونه نزدم

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

درود

احتمالا در قالب شما برای کلس gallery استایل تعریف نشده که قرار دادن کد زیر در فایل استایل اصلی قالبتون می تونه مشکل رو حل کنه :

.gallery {max-width: 100%}

برای رسپانسیو کردن معمولا Max-Width تعیین می کنند، اگر احساس کردید اندازه قسمت گالری تصاویر در سایتتون کوچک یا بزرگ هست، با خاصیت width یک اندازه به درصد تعیین کنید براش.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در 20 ساعت قبل، wwwha گفته است :
img {
  1. float: right;
  2. width: 98%;
  3. margin: 1px 2%;
}

این توی قالب موجوده یه شکل دیگش فک کنم تست کردم جواب نداد

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

کد های سی اسس من بصورت زیرهست

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
.gallery {
	margin-bottom: 1.5em;
}
.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 50%;
}
.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
	max-width: 25%;
}
.gallery-columns-5 .gallery-item {
	max-width: 20%;
}
.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}
.gallery-caption {}

توی گالری نهایت 100 رو وارد کردم ولی بازم کار ساز نشد

وقتی با سیستم دیدم عکس ها که کنار هم بودن دیدم اومدن زیر هم

توی موبایل هم درکنار هم بودن مجدد

a5bf-photo-2017-10-10-13-49-58.jpg

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

شما این کد رو هم اضافه کنید و تست کنید: (مهم نیست که برای یک یکس یا آی دی قبلا استایل تعریف شده باشه، استایل ها در نهایت با هم جمع میشن)

.gallery-item,.gallery {max-width: 100% !important}

این کد بخش گالری و تصاویر داخل اون رو هم اندازه صفحه نمایش می کنه. در صورت نیاز ارتفاع رو هم auto کنید.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

 متاسفانه اینم کامل حلش نکرد

یه کدی نمیشه اختصاص داده بشه که فقط برای نسخه موبایل اون کدهارو فراخوانی کنه؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

شما اگه آدرس سایتتون رو بدید، راحت تر میشه راه حل ارائه کرد براتون. ممکنه در یکی از فایل های استایل قالب، اندازه ثابتی برای گالری تعیین شده باشه.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

درود مجدد.

مشکل از محدوده توضیحات مطلب بود که اندازه ثابت داشت .

برای رفع این مشکل، کد زیر رو در فایل Style.css قرار بدید :

.hentry {max-width: 100% !important}

موفق باشید.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در در 20 مهر 1396 در 18:32، masih1994 گفته است :

درود مجدد.

مشکل از محدوده توضیحات مطلب بود که اندازه ثابت داشت .

برای رفع این مشکل، کد زیر رو در فایل Style.css قرار بدید :


.hentry {max-width: 100% !important}

موفق باشید.

بله الان مشکل حل شد

تشکر

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

الان متوجه یه مورد شدم

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

این کد رو نمیشه جوری زد که فقط توی نسخه موبایل کار کنه؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در در 29 مهر 1396 در 09:29، amirpashayi2 گفته است :

الان متوجه یه مورد شدم

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

این کد رو نمیشه جوری زد که فقط توی نسخه موبایل کار کنه؟

این کد به عقیده من نباید مشکلی داشته باشه.

چرا که ما اومدیم اندازه محدوده و بدنه سایتتون رو رسانسیو کردیم که بر اساس اندازه اون، تصاویر گالری هم به نسبت همون اندازه باشن. ما از Max-width استفاده کردیم که تنها در صورتی که اندازه تصویر از اندازه صفحه نمایش ما بزرگ تر شد، اون رو هم اندازه صفحه نمایش ما بکنه.

 

اگه دقیق تر بگید مشکلتون با کدوم قسمتشه بهتر میشه راهنماییتون کرد.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...