Making Rich Text Boxes Float on Mobile Devices

[MegatPrivy]

Thank you for taking the time to read my post. 

The current preview link I'm working with is: https://www.privy.com/customer-examples-0?hs_preview=suOoLZEE-7553068615

I created a nav using rich text boxes at the top of the page (everything within the purple bar) but I'm having trouble making them float next to eachother on mobile. (Screenshot A).

Screenshot A

If I don't float the rich text boxes next to eachother its a really long scroll for mobile users before they actually get to the content which isn't ideal (Screenshot B). 

Screenshot B

I was able to get the first two to be next to each other by adding code to the .row-fluid [class*="span"] (Screenshot C). Although it doesn't work when trying to add the same set of code to each of the rich text boxes when using the classes like  "span2 widget-span widget-type-custom_widget flyouts"
Screenshot C
Any help on this would be appreciated. Thank you!

[jzilch · Accepted solution]

Hi, 

I took a look through your web page for you and I think the following code might help you to implement what you're looking for. 

.icons div.row-fluid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.icons div.widget-span {
  flex: 1 0 48%;
}

This does use Flex-box to achieve what you're looking for and while it does have good browser support you might have some bugginess with IE11. If that it still okay then this should be a nicer solution for you. 

It did look like each of the items you were trying to float had different positions set in the banner section and it might be hard to manage as it looks like you're adjusting each of the items manually in different media queries. If you use the code above in a media query it should help to reduce a lot of this extra work on your end. The browser will handle a lot of the positioning for you so you won't have to worry about manually positiong them. 

The first selector is meant to be the parent surrounding each of the icons you have. Then the second code is for each child and we are setting the width with flexbox to 48%. You should end up with something like the following. 

If you do want to use floats instead of the above flexbox then the following code should also allow you to achiev something very similar. 

.icons .span2.widget-span {
  float: left;
  width: 48%;
}

You may need to find another class then the above but what this does is allow for a more generic selector as each of the child items have this class so you only need to write these three lines of CSS and all of the children elements will then take this as their CSS.

[MegatPrivy]

Yesterday after we updated our site CSS to implement a new template, only the pop ups page correctly floats the fake nav items on mobile. The rest of the pages (i.e. spin to win, flyouts, bars & banners etc) all show the long scrolling form without the float.

I tried adding in the code that worked last time into the "Inline Styling" section of the "icons" module but it didn't work. I'm unsure why only 1 of the pages is working correctly as they all have the same CSS/template applied to them.

Wondering if you or anyone else had any idea what could've made this happen/how to resolve it without having to clone the pop ups template and recreate each page. 

Thank you again for your help!

For context 

I am working on these pages:
Pop ups - https://www.privy.com/popup-examples

Spin to Win - https://www.privy.com/spin-to-win-examples

Flyouts - https://www.privy.com/mobile-flyout-display-examples

Bars & Banners - https://www.privy.com/bars-banners-examples

Embedded Forms - https://www.privy.com/embedded-form-examples

Emails - https://www.privy.com/email-examples

Which are connected to these templates:
Pop Ups - https://app.hubspot.com/design-manager/4478978/templates/7551946686

Spin to Win - https://app.hubspot.com/design-manager/4478978/templates/7933044546#module=15530093742601288

Flyouts - https://app.hubspot.com/design-manager/4478978/templates/7933120488

Bars & Banners - https://app.hubspot.com/design-manager/4478978/templates/7985539389

Embedded Forms - https://app.hubspot.com/design-manager/4478978/templates/7933122266

Emails - https://app.hubspot.com/design-manager/4478978/templates/7932253690

[MegatPrivy]

Thank you for explaining, this worked great! 

[dennisedson]

just remember to prefix! 

you can throw your css in here to get prefixed code

[AJLaPorte_diagr]

Hey @MegatPrivy 

It looks like you had a lot of custom CSS for the different boxes (displays, lefts, rights, and more CSS properties on various ones), so it made it a little harder to do this using normal floats and all that without removing it all. However, one way you can fix this is to add the following to your CSS:

@media screen and (max-width:767px) {
  .icons .span2.widget-type-custom_widget {
      width: 50%;
      position: relative;
      top: unset;
      bottom: unset;
      left: unset;
      right: unset;
      margin: 0;
      padding: 0;
      transform: scale(1);
      flex-grow: 1;
  }

  .icons > .row-fluid-wrapper > .row-fluid {
      display: flex;
      display: flex !important;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100% !important;
  }
}

This would be using Flexbox to do this all. To see what supports flexbox, see here: 
https://caniuse.com/#feat=flexbox

Also, here is a great writeup about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

This should help with what you are looking to accomplish. One thing you might also want to do is remove the max-height on the main wrapper as when it's on mobile, you'll have the last two items cut off on the screen.  

Hopefully, this helps in what you are looking to accomplish.

-AJ

-----------------------
AJ LaPorte
www.wsol.com