[مدفوع] اجعل إعلانات المنزل متجاوبة

السوق
1

ماذا تود أن يتم؟
أحتاج إلى إضافة CSS المتجاوب للإعلانات المنزلية إلى مكون موضوع جديد، حتى تظهر إعلاناتنا المنزلية بشكل متجاوب على جميع الأجهزة:

حاليًا، على الهواتف المحمولة، تظهر الإعلانات المنزلية بنفس الطريقة التي تظهر بها على سطح المكتب، مما يُسبب تجربة مستخدم سيئة.

سأحتاج أيضًا إلى مساعدة في إضافة HTML المتجاوب لعرض الإعلانات المنزلية بشكل صحيح.

ما هو ميزانيتك، بالدولار الأمريكي، التي يمكنك تقديمها لهذه المهمة؟
لا تدري؟

إعجابَين (2)
3

إذا قرأت منشورات الإعلانات الداخلية، فستجد طريقة لإعداد صورة للشاشات المكتبية وصورة للهواتف المحمولة.

<a href="" class="banner-ad" target="_blank">
    <img class="desktop" src="">
    <img class="mobile" src="">
</a>

ما عليك سوى تعيين الصور لكل منها (عرض أقل للهواتف وعرض أكبر للشاشات المكتبية) وهذا كل شيء!

أنا شخصياً أستخدم الأبعاد التالية:

  • للهواتف المحمولة: 1282×311
  • للشاشات المكتبية: 755×90

ثم قم بإنشاء مكون وأضف تنسيقات CSS التالية:

$cta-background-color: #FE4644;
$cta-text-color: #FFFFFF;

.banner-ad {
    display: flex;
    clear: both;
    max-width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2));
    background-color: #FEF25E;
    border: 1px solid $primary;
    box-sizing: border-box;
    img {
        height: 90px;
        &.desktop {
            display: block;
        }
        &.mobile {
            display: none;
            width: 100%;
        }
    }
    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        p {
            margin: 0;
            &.small {
                font-weight: bold;
                text-align: right;
                padding: 1px 5px;
                background-color: #000000;
                color: #FFFFFF;
            }
            &.big {
                font-size: 24px;
                line-height: normal;
                padding-bottom: 5px;
                color: #434343;
                font-weight: lighter;
            }
        }
        .cta {
            color: $cta-text-color;
            background-color: $cta-background-color;
            &:hover {
                background-color: darken($cta-background-color, 20%);
            }
        }
    }
}

@media only screen and (max-width: 672px) {
    .banner-ad {
        img.desktop, p {
            display: none;
        }
        img.mobile {
            display: block;
        }
        .container {
            justify-content: center;
            .cta {
                margin: 0 5px;
                font-size: 12px;
            }
        }
    }
}

أبعاد غريبة لكنها تعمل! يمكنك رؤيتها حية هنا

ليس من المجدي دفع ثمن هذا… ربما يكون التبرع لمنصة Discourse أفضل!

5 إعجابات
FKB Pro - Social theme
4

اعتمادًا على الموقف، قد يكون من المجدي الدفع مقابل هذا. من السهل نسيان أن ما يبدو واضحًا لشخص لديه خلفية في تطوير الويب قد يبدو معقدًا جدًا لشخص لا يملك أي خلفية في هذا المجال.

إعجاب واحد (1)
5

أعلم، لكن هذه المجموعة رائعة للغاية ومعظم الناس سيساعدون في هذه الأمور :stuck_out_tongue:

إعجاب واحد (1)
6

بالفعل! وكإطار مرجعي، سأفرض على الأرجح مبلغًا يتراوح بين 200 و500 دولار مقابل هذه المهمة. قد يكون الأمر بسيطًا مثل تطبيق الكود الذي قدمته للتو، لكنه قد يستغرق وقتًا أطول بكثير، إذ لا أعرف ما هي الأمور غير المتوقعة التي قد تظهر أثناء تقدم العمل.

3 إعجابات
7

@Juan_Adamuz

شكرًا لك على مساعدتك! كنت أعرف كيفية إضافة HTML إلى إعلانات المنازل وCSS إلى السمة، لكنني كنت أواجه صعوبة في جعلها تعمل بشكل صحيح، لذا ساعدتني رسالتك كثيرًا في تحسين ذلك.

ومع ذلك، يبدو أن هناك مشكلة. حول المخطط، في الجوال وسطح المكتب، يبدو كما لو أن لافتة أخرى تظهر خلفها، وهناك مساحة صفراء على الجانب الأيمن من لافتة الإعلان لا ينبغي أن تكون موجودة. نفس الإعلان الذي لا يظهر على الجوال يظهر في “فوق تدفق المنشورات”، ولا يحتوي على ذلك المخطط أو الجزء الأصفر؟ هل لديك أي فكرة عما يحدث؟

يمكنك رؤية الإعلان في الصفحة الرئيسية لموقع Unschooling(.)com - كما ترون، كلاهما يظهران بشكل صحيح أدناه، مما يعني أن شيئًا ما في CSS هو الذي يسبب المخطط والمساحة الصفراء.

إليك HTML الذي استخدمته جنبًا إلى جنب مع CSS من صفحة إعلانات المنازل:

<center><a href="https://shareasale.com/r.cfm?b=839764&amp;u=2163380&amp;m=40843&amp;urllink=&amp;afftrack=" class="banner-ad" target="_blank">
<img class="desktop" src="https://static.shareasale.com/image/40843/Declan728X90.jpg">
<img class="mobile" src="https://static.shareasale.com/image/40843/2kids468x60.jpg">

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.