[TrankuilityParticipant]

Hello,

I use the in-image ad service GumGum. I noticed that in-images ads rarely show on mobile. In order for the in-image ads to show within an image, the image must display at a minimum size of 300×250 on mobile. GumGum support check out the images on my site and said that most mobile images on my site do not show at 300×250 or larger.

I have included a screenshot from my site on mobile (Picture 1). The picture on top is an image on my site. The picture below it, of the stomach, is a standard 300×250 Adsense ad. You can see that my image is not as wide as the ad even though the original dimensions of my image are 533×533. So it does seem that GumGum support is correct and the images are not showing at 300×250.

So I have several questions:

1) How do I make my images show at a minimum of 300×250?
2) When a caption is added to an image it creates a frame and reduces the image dimensions slightly. Is it possible to insert a caption but do NOT insert a frame around an image AND prevent it from reducing the image dimensions?
3) In Picture 2 is an Adsense ad and the article content below. You can see that the left side of the ad aligns with the content, but the right side of the ad extends further than the content. How do make it all align (but also make sure the images/ads show at a minimum of 300×250)?

URL example: http://backpackerverse.com/haunted-attractions-colorado/

[LelyModerator]

Hi There,

Thank you for the screenshots and the URL.

For #1 and #2 Please try adding the following CSS via Appearance > Customize > Custom > CSS:

@media (max-width: 480px){
.wp-caption, .gallery-item {
    padding: 0 !important;
    min-width: 100% !important;
    width: 100% !important;
    border: none;
}
.wp-caption>.wp-caption-text, .wp-caption>.wp-caption-text:last-child{
    padding: 0 !important;
}
}

#3 Upon checking, I’ve noticed that the ads content is displayed using an IFRAME. Unfortunately, we cannot control the content of an IFRAME if it overflows. It’s design is coming from outside the site.

Hope this helps.

[TrankuilityParticipant]

Thank you.

I have to test about the in-image ads some more now. But thank you, the change for 1 and 2 is exactly what I wanted.

How do I do the same thing for all devices (desktop, tablet, etc)?

[LelyModerator]

You’re welcome!

For above to work an all screen size, please update above CSS to this:

.wp-caption, .gallery-item {
    padding: 0 !important;
    min-width: 100% !important;
    width: 100% !important;
    border: none;
    text-align: left;
}
.wp-caption>.wp-caption-text, .wp-caption>.wp-caption-text:last-child{
    padding: 0 !important;
}
.wp-caption img {
   width: 100% !important;
}

Hope this helps.

[TrankuilityParticipant]

Thank you. That removed the frame. However, the desktop images now stretch fill the area. If an image is 600px wide, it now stretch to 800px or more to fill the area, which distorts the image. How do I keep the natural size of the image?

[LelyModerator]

Hi There,

Please remove the following from above code:

.wp-caption img {
   width: 100% !important;
}

Always,
X

[TrankuilityParticipant]

That worked, thank you. But now the images that do not fill the entire width of the content area do not respond to the image alignment settings. For instance, the first image on that page is around 600px wide (so does not fill entire area) and it’s aligned left (even though is align center in WordPress).

I don’t want all images aligned center. So I don’t want to force that alignment for all images. I just want the images to respond to the alignment settings I choose in WordPress.

How do I resolve?

[JadeModerator]

Hi there,

Please try this instead:

.wp-caption img {
     max-width: 100% !important;
}

Hope this helps.

[TrankuilityParticipant]

That didn’t work. The images are still aligning left. What’s the next step?

[Rue NelModerator]

Hello There,

The image and the caption text is not aligning properly because you have set it in your custom code that it will align to the left. Please find these code:

p.wp-caption-text {
    text-align: left;
}

And this code:

.wp-caption, .gallery-item {
    padding: 0 !important;
    min-width: 100% !important;
    width: 100% !important;
    border: none;
    text-align: left;
}

Please find and update your code. Perhaps, you need to remove the text-align: left; so that the images and the caption texts will respond to the alignment settings you choose in WordPress.

Hope this helps.

[TrankuilityParticipant]

Thank you. I removed the

p.wp-caption-text {
text-align: left;
}

and it looks better now.

[JadeModerator]

You’re welcome. 🙂

[Author]

Posts