How to Make Poll Daddy Objects Mobile Responsive

Currently, the standard Poll Daddy objects that I use are fixed width and not mobile responsive. Here are some simple CSS styles that I use to make Poll Daddy objects responsive to small devices.

1. Scale poll object to fit the screen.

The first step is to add some styles to scale my Poll Daddy objects so that they expand to fit the screen. I do this when the browser width hits 400 pixels.

@media only screen and (max-width: 400px) {
	.PDS_Poll { width: 100%; overflow:hidden; }
	.PDS_Poll .pds-box { width: 100% !important; }
	.PDS_Poll .pds-input-label { width: 100% !important; }
}

Note that pds-box and pds-input-label have fixed widths assigned by default, so we need to override that with the !important tag.

I have added an overflow:hidden property to PDS_Poll, which is the main container class, to further ensure that my poll objects never exceed a smaller screen width.

Before – Non-responsive Poll Daddy object. Note that the text and border to the right gets cropped because of the smaller browser width.

After – Width responsive Poll Daddy object. The poll now changes size according to the width of the browser.

2. Make text float to the right of radio buttons.

However, in the mobile responsive screen-shot above, the text has been pushed down to the line below the radio buttons. Instead, we want our poll text to float to the right of the radio buttons. We achieve this by adding some space to the pds-input-label class, to accommodate for the radio button width, which is 25 pixels wide.

@media only screen and (max-width: 400px) {
	.PDS_Poll { width: 100%; overflow:hidden; }
	.PDS_Poll .pds-box { width: 100% !important; }
	.PDS_Poll .pds-input-label { width: 100% !important; margin-left: -25px; padding-left: 25px; }
}

Poll text now floats to the right of radio buttons.

padding-left: 25px; – Creates space to the left of our poll text so that we get the right width of text. This assumes that we are using border-box for the box-sizing property.

margin-left: -25px; – Places the padding space over the radio button so that our poll text follows properly right after it.

3. Save space by removing borders and padding.

Finally, space is at a premium for small screen devices, so we may want to utilize what we have as effectively as possible. For example, we may want to remove the border, background, and padding of our poll object so that we have more space for our poll text.

@media only screen and (max-width: 400px) {
	.PDS_Poll { width: 100%; overflow:hidden; }
	.PDS_Poll .pds-box-outer { padding: 0; } 
	.PDS_Poll .pds-box { width: 100% !important; border:none !important; background: none !important; }
	.PDS_Poll .pds-input-label { width: 100% !important; margin-left: -25px; padding-left: 25px; }
}}

Here is the final result.

Final result of mobile responsive styles for Poll Daddy object.

If we encapsulate the Poll Daddy object within another div then we will also need to style that div accordingly. For example, I usually float my polls to the right, with a left margin to separate it from my text. Therefore, I need to remove these for small screens.

Poll Daddy object floated to the right.

		@media only screen and (max-width: 400px) {
			.div-poll { float: none; margin: 0; }
		}

Internet Explorer

Slight square border around radio buttons in Internet Explorer 10.

Finally, I have also noticed that in Internet Explorer 10, my Poll Daddy objects appear with a border around the radio buttons (see right).

To remove this border, I add the following CSS styles –

.PDS_Poll input[type="radio"] {
	background-color: transparent !important;  
	border: 0; 
	box-shadow: none; 
}

Here is the final result –

Removed border around radio buttons in Internet Explorer 10.