فاصله های غیر مساوی بین ستون ها در صفحه اصلی

[اعظم 3]

با سلام

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

.woocommerce ul.products li.product a img {
    margin: 0 10px auto 10px;
}

 

[وردپرس فارسی 272]

سلام

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

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

آدرس سایت ( آدرس همین بخش که عکس گذاشتید ) رو ارسال کنید .

[اعظم 3]

با سلام و تشکر 

من روی لوکال هاست کار می کنم برای همین عکس اش رو فرستادم

قبل از اینکه فاصله چپ و راست رو بکنم 10px، این فاصله ها صفر بود و به همین خاطر تصاویر دوم و سوم به هم چسبیده بود. من فقط همین بخش را به جای 0 کردم 10px.

من روی همین عکس ها راست کلیک کردم و Inspect رو زدم که عکس اش اینگونه است.

[وردپرس فارسی 272]

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

[اعظم 3]

از کجای سایت باید Inspect بگیرم تا مشخص بشه این تو رفتگی به کجا بر می گرده؟

من سه تا عکس تهییه کرده ام و از سه تا فاصله، Inspect گرفته ام ولی کدهای سمت راست رو نمی تونم در style.css پیدا کنم

رنگ های سبز و قرمز در عکس ها نشان می دهند که من از اون قسمت Inspect گرفته ام.

ممنون می شم راهنمایی کنید تا بتونم این مکشل رو حل کنم.

[اعظم 3]

با سلام

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

.woocommerce ul.products li.product a img {
    margin: 0 0 0;
}

.woocommerce ul.products li.product a img {
    margin: 0 5px 0;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin: 0 1.8% 2.992em 0;
    width: 32.05%;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin: 0 auto 2.992em 0;
    width: 32.05%;
}

 

[وردپرس فارسی 272]

سلام

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

[استاد اعظم 900]

درود

اصولا پشتیبانی قالب با همونجایی هست که قالب رو ازش تهیه کردین !

 

در هر صورت باید اسم قالب و لینک از سایتتون هم میذاشتین تا برسی بشه

 

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

 

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin: 0 0 26px 0 !important;
    width: 33.05% !important;
}
.woocommerce ul.products li.product a img {
    padding: 1px;
}

 

[اعظم 3]

سایز تصاویر محصولات رو کمی کوچکتر کردم ولی نتیجه اش همونه و تغییری نکرد.

[اعظم 3]

در 28 دقیقه قبل، حسین شفیعیان گفته است :

درود

اصولا پشتیبانی قالب با همونجایی هست که قالب رو ازش تهیه کردین !

 

در هر صورت باید اسم قالب و لینک از سایتتون هم میذاشتین تا برسی بشه

 

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

 

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin: 0 0 26px 0 !important;
    width: 33.05% !important;
}
.woocommerce ul.products li.product a img {
    padding: 1px;
}

 

ممنونم. بله اوضاع بهتر شد