859-414-4393

joe@resourcemobility.com

9 AM - 9 PM

<style>.mobile_nav::after { content:'MENU'; vertical-align:top; line-height:1.1em; color: #000000; }span.mobile_menu_bar:before { color: #36BFF2 !important; } span.mobile_menu_bar:after{ color: #000000 !important; }.et_mobile_menu .menu-item-has-children > a { background-color: transparent; } #main-header .et_mobile_menu li ul.sub-menu.hide { display: none !important; visibility: hidden !important; transition: .7s ease-in-out; } #main-header .et_mobile_menu li ul.sub-menu.visible { display: block !important; visibility: visible !important; }.et_mobile_menu .menu-item-has-children > a:after { font-family: "ETmodules"; font-size: 15px; font-weight: 800; content: "3"; color: position: absolute; right:37px; } /* Font Awesome */ .fa { margin: 6px ; } @media only screen and (max-width: 980px){ #mobile_menu { display: block !important; min-height: 100vh; height: 100%; top: 0; right: 0; position: fixed; z-index: 9998; overflow: scroll; border-top: none; padding-top: 80px !important; } .et_mobile_menu li a { color: #ffffff !important; width: 46%; float: left; text-align: center; background-color: #e8e8e8 !important; padding: 15% 4%; margin: 1%; font-size: 1.1em; } .mobile_nav.closed #mobile_menu { background: rgba(51,51,51,0.95) !important; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.4s 0s; -moz-transition: -moz-transform 0.4s 0s; transition: transform 0.4s 0s; background: rgba(51,51,51,0.9) !important; } .mobile_nav.opened #mobile_menu { background: rgba(51,51,51,0.95) !important; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-overflow-scrolling: touch; -webkit-transition: -webkit-transform 0.4s 0s; -moz-transition: -moz-transform 0.4s 0s; transition: transform 0.4s 0s; } #main-header .container.clearfix.et_menu_container { width: 100%; } .mobile_nav.opened .mobile_menu_bar:before { content: "4d"; color: #fff; } } @media only screen and (max-width: 980px) { .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; } #et-top-navigation { padding-right: 5px; } } @media only screen and (min-width: 481px) { #mobile_menu { width: 370px; margin-left: calc(100% - 370px); } } @media only screen and (max-width: 480px) { #mobile_menu { width: 320px; margin-left: calc(100% - 320px); } } @media only screen and (max-width: 340px) { #mobile_menu { width: 100%; margin-left: 0; } } </style>

How to do Blurbs Side by Side and not Stacked on Mobile

With Divi, using a blurb module is one of the easiest ways to create a great looking mobile site. A true mobile site increases the interaction with those visiting your site.

One thing people need is the blurbs to be side by side and not stacked on a mobile screen. Watch the video below to see how this happens. The actual code is listed out below. Need help getting a true mobile experience with your site, Contact us for help.

Code for code module.

<style>.mobileColumn {display: inline-block; max-width :50%;} </style>

Row / Custom CSS for each Column Class ID use

mobileColumn

The code is case sensitive.

1 Comment

  1. Isabel Taye
    Isabel Taye on October 14, 2018 at 11:08 am

    Thanks for this tutorial. How do you adjust the percentages if your 2 columns are 3/4 and 1/4 in size? Any help would be much appreciated.

Submit a Comment