جی تو جنا ب

یہ ایسا عمل ہے جس سے محبوب پر مرض مسلط کر دیا جاتا ہے جو اپنے آپ میں کمال ہی شہکار ہے بلکے دل خوش کر کے رکھ دے گا کیونکہ میرا یہ ماننا ہے عمل اگر دل سے کیا جائے تو نتیجہ حتمی ملتا ہے بس بالکل—پہلے فرق صاف صاف سمجھیں۔ آپ کی اسنیپ شاٹس میں:

تصویر 1 (جو اب آ رہا ہے)

• کنٹینٹ امیج کے برابر سے شروع نہیں ہو رہا بلکہ کافی نیچے جا کر شروع ہو رہا ہے۔

• وجہ عام طور پر تین میں سے ایک (یا سب) ہوتی ہے:

  1. DOM آرڈر: تھیم میں meta (گریے باکس) پہلے آ رہا ہے اور content بعد میں۔ جب meta درمیان میں کھڑا ہو جائے تو دائیں طرف کی جگہ بلاک ہو جاتی ہے، اس لئے متن امیج کے برابر شروع نہیں ہو پاتا۔

  2. Clear/BFC: .entry-content پر کہیں clear: both، overflow: hidden / auto یا display: flow-root جیسا اسٹائل لگا ہوتا ہے جو “فلوٹس” کو کینسل کر دیتا ہے؛ نتیجہ یہ کہ متن امیج کے برابر “wrap” ہونے کے بجائے امیج کے نیچے ہی جاتا ہے۔

  3. غلط چیزوں کو float/grid: اگر صرف امیج کو فلوٹ کرنے کے بجائے meta یا اردگرد کنٹینرز کو فلوٹ/گرڈ کر دیا جائے تو کنٹینٹ کے لئے راستہ بند ہو جاتا ہے۔ اسی لیے آپ کو دو کالم جیسا تاثر ملتا ہے اور دائیں طرف متن اوپر سے شروع نہیں ہو پاتا۔

تصویر 2 (جس کی آپ نے ڈیمانڈ کی ہے)

• صرف امیج بائیں فلوٹ ہو، کنٹینٹ اسی لمحے دائیں سے شروع ہو (امیج کے “سامنے” سے)؛

• جیسے ہی امیج کی اونچائی ختم ہو، کنٹینٹ نیچے FULL-width ہو جائے اور عام بہاؤ میں واپس آ جائے؛

• کمنٹس/ریلیٹڈ/لائکس وغیرہ پر کوئی اثر نہ ہو۔

خلاصہ—دونوں میں اصل فرق

• Pic-1: meta بلاک اور/یا .entry-content پر clear/overflow/flow-root کی وجہ سے text-wrap ٹوٹ رہا ہے؛ اوپر دائیں سائیڈ کی جگہ خالی رہتی ہے اور متن نیچے دھکیل دیا جاتا ہے۔

• Pic-2: صرف امیج فلوٹ ہے، meta امیج کے نیچے بائیں محدود رہتا ہے (امیج کی چوڑائی کے اندر) اور .entry-content پر کوئی clear/overflow نہیں—اس لیے متن امیج کے برابر بہتا ہے، اور امیج ختم ہوتے ہی متن خودبخود full width لے لیتا ہے۔

عملی حل (اگلے قدم میں کوڈ دوں گا)

1. صرف امیج کو float:left (fixed width + right margin) دیں۔

2. meta کو امیج کے نیچے رکھنے کے لئے float:left; width: (same as image); clear:left; دیں، تاکہ وہ دائیں جگہ پر قبضہ نہ کرے۔

3. .entry-content سے clear، overflow، display: flow-root، grid/flex parent اثرات ڈیسک ٹاپ پر ختم کیے جائیں تاکہ وہ امیج کے برابر wrap ہو سکے۔

4. clearing صرف امیج/کنٹینٹ سیکشن کے بعد لگائیں (تاکہ بعد کے بلاکس—related/comments—میں full-width بحال ہو جائے)۔

یہی وجہ ہے کہ آپ کے پاس ابھی تصویر 1 والا نتیجہ آ رہا ہے، اور تصویر 2 کے لیے ہمیں بالکل صرف انہی تین پوائنٹس (امیج float, meta constrain, content un-clear) کو ٹھیک کرنا ہے—باقی کسی بلاک کو ہاتھ نہیں لگائیں گے۔ تیار ہوں تو میں اسی سمجھ کے مطابق مختصر اور “صرف انہی تین چیزوں” کا کوڈ دے دیتا ہوں۔