[PAID] Make House Ads Responsive

Marketplace
1

What would you like done?
I need the House Ads Responsive CSS added to a new theme component so our House Ads will show responsive on all devices:

Currently, in mobile, the House Ads show the same as they do on a Desktop making for a poor user experience.

I will also need help adding the Responsive HTML to populate the House Ads correctly.

What is your budget, in $ USD that you can offer for this task?
No idea?

2 Likes
3

If you read House ads post, they give you the way to set a desktop picture and a mobile one.

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

Just set the images for each (Less width for phones and more width for desktop) and thats it!

I personally use this dimensions:

  • Mobile: 1282x311
  • Desktop 755x90

Then create a component and add this 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;
            }
        }
    }
}

Weird dimenions but, working! You can see in action here

Its not worth it paying for this… Maybe its better donating to discourse!

5 Likes
4

Depending on the situation, it could be worth paying for this. It’s easy to forget that what seems obvious to a person with a background in web development may seem quite complex for someone with no background in it.

1 Like
5

I know, but this comunity is so great and most of people would help with this things :stuck_out_tongue:

1 Like
6

Indeed! And for a frame of reference, I’d probably charge $200-500 for the job. It might be as easy as applying the code you just provided, but it could end up taking a lot longer, as I don’t know what unexpected things might crop up as the job progresses.

3 Likes
7

@Juan_Adamuz

Thanks for your help! I knew how to add the HTML to the House Ads and the CSS to the Theme, but I was having trouble getting it to work right so your message really helped me do it better.

However, there appears to be an issue. Around the outline, in Mobile & desktop, it looks as if another banner is showing behind it and there is a yellow space on the right side of the banner ad that shouldn’t be there, the same ad that’s not mobile shows on the Above post stream and it doesn’t have that outline or the yellow part? Any idea whats happening?

You can see the ad on the homepage of Unschooling(.)com - as you can see they both show correctly below which tells me something in the CSS must be causing the outline and yellow space.

Here is the HTML I used along with the CSS from the House Ads page:

<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.