Responsive CSS

I can certainly add responsive CSS. Can you provide an example? I’ve been looking for a template that has prepopulated media query values for the most popular mobile devices. So I can just fill in the CSS for each. If you have any links that would be helpful.

I found a list: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Hi JP –
Thanks for following up. So glad you found some solutions.
Would I need to manually paste those code snippets into the plugin’s css files (/wp-content/plugins/feedburner-optin-form/css/) ? or will you be releasing an update?

Thanks again for checking in ??

Hey JP –
As of build 0.1.0, here’s what the optin form looks like this

You can see it in real time here (middle of the page).

I can add the code to the plugin CSS file so it stays with every update. Can you tell me specifically what you are looking to do?

I looked at your screenshot and it looks like the text in the textboxes needs to either shrink or disappear completely. Also the button doesn’t look wide enough. Is that your sidebar?

Hey thanks for the reply JP –

If you click the 2nd link I posted, you’ll see an online tool which renders websites into tablet and mobile screen resolutions.

Basically, the screenshot is showing how the desktop version shows up on a mobile phone (not the sidebar).

I’m thinking it would be great if the form fields and submit button stacked vertically in mobile mode, via the responsive css; otherwise they can stay horizontally layed out in the desktop mode. Is that something that can be dynamically accomplished via css?

Funnily, JP –
The mobile responsive version I’m hoping to see is in the plugin’s header/banner logo.

https://snap.ashampoo.com/UAtBbPTF

Verified CSS responsiveness on iPhone, look out for the update in the next version.

Awesome JP,
looking forward to it.

Hey JP –

I’m testing out the new build using https://quirktools.com/screenfly
Is this the intended look? https://snap.ashampoo.com/72QTIPUy

I’m using https://goo.gl/sWxOuH as the test case.

Regards

Not exactly. It worked when I viewed my demo page on my iPhone:

https://www.jimmyscode.com/wordpress/feedburner-optin-form/

The ‘main’ style is full width, but when viewed on iPhone it changes to be almost identical to the ‘sidebar’ style (which is the one in the plugin banner). Let me check it again.

I checked your site on an iPhone 5S. It looks exactly as expected. Sorry but I don’t think that screenfly tool is working. My phone displays the style on your page exactly as you requested.

Hey JP –

Thanks for looking into it.

I wonder if this is because the CSS media queries for resizing to iphone’s resolution is necessarily a different set of declaratives/number schemes than android based devices.

I don’t doubt that your tests on the iphone responsiveness is a grand slam; but, I’m also successfully duplicating the lack of responsiveness on some android based phones ( i’ve tried several LG,Samsung, and Google models ), including tablets running mobile views (e.g. Nexus 10, Kindle HDX) using the SILK/UC/Maxthon/Dolphin Browsers.

Again, this might come down to what devices you might have on hand, and it might just be something for which a great testable solution can occur down the roadmap for this fantastic plugin.

So, thanks for all the effort.
Cheers.

PS – Screenshot directly taken from a Samsung S3 android https://i.imgur.com/hcjPx0M.png

You are right. The reso is different on Samsung S3, and the current CSS does not account for that.

According to screenfly, the only mobile devices that are covered are Apple and LG phones. (Maybe screenfly is good for something after all.)

Can you edit the fboif-main.css and change the max-device-width value to 640px and see if that works?