Images in the Messages & Pocket are not responsive ?

Sinto001

I am using image instead of text in the site front messages and a 728x90 Ad in the pocket plugin. Is there any way to make these images responsive on mobile devices ..
My Site URL: http://goo.gl/ZCSyoK

vrijvlinder

Ok, do you mean the image above the discussions list?

You need to make the content in the pocket have a 100% width so it adjusts to the window. That means adding css to the mobile theme.

    .DismissMessage.CasualMessage img{
    width: 98%;
    height:auto;
    position: relative;
    left: -5px;
    }

You can also add max width and max height in the event you want to control this more.

Sinto001

how can I add css and my mobile in discussion images are responsive only the images in messages and pocket ads are not responsive..

vrijvlinder

Look inside your themes folder and find mobile then edit the css file. Add the code above to it.

The reason for images in discussions being responsive is because that is controlled by the theme and there is css and js that determines that but there is no code to specifically do that with a pocket. A pocket is simply a container and it s a blank slate to a certain point. Whatever you add into a pocket or message box, you need to also add css to make it work for the themes you use.

Use a browser user agent switcher to see the mobile theme on your desktop. Chrome has it Safari and Firefox. Just look for a User agent switcher in the extensions for your browser.

Sinto001

why width:98% and not 100%

vrijvlinder

It looks better because there is some padding in that pocket around the image. Using 100% for mobile makes it go beyond the right side and looks not centered. But use what you feel is right for you.

Sinto001

How can I make a css style and call it in the html code in messages and pocket. And where to put that css style code..? to call it properly
If you say that messages and pockets are simply containers...

vrijvlinder

You simply create new rules like the one above and add it to the custom.css and mobile.css of your theme.

You inspect the code using a web inspector to see what classes elements you want to change have and if there is already css for them to edit. If there is no css you pick the element's parent and the elements class

for example:

<div class="DismissMessage CasualMessage" style="
    width: 100%!important;
    height: auto;
"><img src="http://finysel.com/news-blogs/wp-content/uploads/2014/10/finysel-forums-introduction.png" style="
    width: 98%;
    position: relative;
    left: -5px;
"></div>

The class for this div which holds the img is div.DismissMessage.CasualMessage when made into css code.

so you take that parent class and add the element inside to the rule

div.DismissMessage.CasualMessage img

then you add your rules, like width etc.

.DismissMessage.CasualMessage img{
    width: 98%;
    height:auto;
    position: relative;
    left: -5px;
    }

Sinto001

Actually your first code did the fix ... but for pocket ad what should I do ?

peregrine

@Sinto001 said:
Actually your first code did the fix ... but for pocket ad what should I do ?

look in your web inspector, identify the pocket class and adjust accordingly.

then read a tutorial on css and how to use a web inspector or firebug.

http://thewc.co/articles/view/web-inspector-tutorial

http://www.w3resource.com/web-development-tools/firebug-tutorials.php

and the various tutorial on themes,

vrijvlinder

It is the same process. For example you need to create the classes for your content.

you need to give classes to the images to start with. Every image for the add must have it's own class or have a div. You just added the image and the link for the ad. You need to adjust the sizes like you want them.

create a div for the pocket content

<div class="Ad"><a href="http://www.roboform.com/php/pums/rfprepay.php?lang=en&amp;lic=roboform&amp;affid=af001"><img src="http://www.roboform.com/affiliates/banners/728x90_Hypes.gif" border="0" alt="RoboForm: Learn more...">
        </a></div>

the css would look like this

div.Ad a img{
width:100%;
height:auto;
margin:0 auto;
}

I would recommend the plugin Aptads which is meant for adverts. It has specific settings to be able to rotate them etc.

Sinto001

I have add follow code into the custom.css and use in pockets with div

.pocketsimage img{ width: 100%; height:auto; position: relative; left: -5px; }
And in the pockets...
<div class="pocketsimage"> ads... <div>I hope everything is correct...

Sinto001

The above code I added worked for me... will it create any issue later ?

vrijvlinder

@Sinto001 said:
The above code I added worked for me... will it create any issue later ?

I do not see why it would. My code always works

Sinto001

thanks very much ..now its good..

vrijvlinder

You are very Welcome !