Survey background bleeds over on text for mobile

Alicia Searfoss · October 2016

Hello.

I have a survey on a Pagebuilder page at http://www.nrcprograms.org/site/PageServer?pagename=pwna_American_Indian_Heritage_Month_2016. It seems fine in IE and Firefox, but not on my iPad or iPhone. The background of the survey bleeds over the text to the left. The whole section should be on it's own section - not to the right of the text.Does anyone have an idea of why this would happen? The consultant who built the site did a fabulous job on making it responsive, but some of the code is over my head.

Thanks!

Alicia

Daniel Hartanto · October 2016

Hi Alicia,

That looks like it needs a CSS clear:both -- ideally at the end of the floated components, but in this case the following 'hack' might work

If you have access to your custom.css located at http://www.nrcprograms.org/pwna_assets/css/custom.min.css you might want to add the following into the .side-box css property:

clear:both;

Otherwise, you can probably just insert an inline style and you can put it at the end of your pagebuilder pwna_American_Indian_Heritage_Month_2016 the following:
<style>
.side-box{clear:both;}
</style>

see if that might helps

regards,

Daniel

Alicia Searfoss:

Hello.

I have a survey on a Pagebuilder page at http://www.nrcprograms.org/site/PageServer?pagename=pwna_American_Indian_Heritage_Month_2016. It seems fine in IE and Firefox, but not on my iPad or iPhone. The background of the survey bleeds over the text to the left. The whole section should be on it's own section - not to the right of the text.Does anyone have an idea of why this would happen? The consultant who built the site did a fabulous job on making it responsive, but some of the code is over my head.

Thanks!

Alicia

Alicia Searfoss · October 2016

Thank you, Daniel. I'll try that out tomorrow! I appreciate the quick help.

Alicia Searfoss · October 2016

That worked, Daniel. It looks great now even on mobile. Thanks again!

Daniel Hartanto · October 2016

You are always welcome Alicia, always happy to help

regards,

Daniel

Alicia Searfoss:

That worked, Daniel. It looks great now even on mobile. Thanks again!

Romany Nassief · October 2016

Hi Alicia,

There is no column width specified for "side-col" div on small (sm) devices. You can resolve it by adjusting your HTML with some Bootstrap classes to be like that:

<div class="row">

</div>

</div>

Thanks,

Romany

Survey background bleeds over on text for mobile

Comments

Categories