2 Up Columns on Mobile

Hey envisageiam,
Thank you for your patience, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .flex_column.av_one_fourth {
        width: 48%;
        clear: none;
        float: left;
    } 
}

Please note that this will work on all pages on your site, so if you want this to be page specific a page ID can be added to the css, or you can add a custom class to the specific columns and add that to the css. Let us know if you need further help with this.

Best regards,
Mike

Hi,
I guess I don’t understand why you are using the 1/4 column to create rows with only 3 columns and what you expect from a mobile view with a three element row.
To add a custom class go to the advanced tab in developer settings:

Best regards,
Mike

Hi,
This is strange because when I examine the “Dry Rubs” 3 columns then have the class for 1/4 columns, this is why the css above is affecting them.

please include an admin login in the Private Content area so we can examine closer.

Best regards,
Mike

Hi,
For the “sides” section, you have four 1/4 columns, the outer two are empty and the inner two have content:

so on mobile you see:

so you will want to set the two empty columns to not show on mobile at Column ▸ Advanced ▸ Responsive ▸ Mobile display:

I did this for you and now it shows like this:

Best regards,
Mike

Hi,
Yes the odd items will not center on mobile, this is not the intended behavior of two columns on mobile, we may be able to help you customize for this behavior but you will need to manually do this for each odd item on each page, this is why I asked if this is the final design for the page or if you will be adding more items, because if you add more items you will need to remove the customization to center the odd items, I can show you how so you can do it to your other pages, or do you want to leave them like they are?

Best regards,
Mike

Hi,
Ok, on your page you have two odd third items, for both of these I added the custom class odd-item

Then I added this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
.odd-item {
    position: relative;
    left: -23%;
}
}

now on mobile they are centered:

Please clear your browser cache and check.

Best regards,
Mike

Hi,
Just make sure that the custom class is only added to the third odd items.
Shall we close this thread then?

Best regards,
Mike

Hi,
I believe that I removed the “float” from the css that I gave you earlier, please compare the css from the two sites.

Best regards,
Mike

Hi,
Try adding the custom class first to Smokin Q

Best regards,
Mike

Hi,
First add the custom class specialHeight to each 1/4 column that you want the button the hot pepper image to line up below the special heading.
You don’t need to add this to the third odd item or items with no button or image.
Then typically I would add the following script to the end of your child theme functions.php file in Appearance ▸ Editor, but I see that you are not using a child theme so you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add this code and save.

function custom_specialHeight_script() { ?>
  <script>
(function($){
  $('.flex_column_table').each(function(){  
     var $specialHeading = $('.specialHeight .av-special-heading',this);
     var specialHeadingHeight = Math.max.apply(Math, $specialHeading.map(function(){
         return $(this).height();
     }).get());
     $specialHeading.height(specialHeadingHeight);
  });
  var resizeId;
  window.addEventListener('resize', function() {
      clearTimeout(resizeId);
      resizeId = setTimeout(doneResizing, 300);
  });
  
  function doneResizing(){
      location.reload();
  }

})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_specialHeight_script', 99 );

I did this for you on your test site.

Best regards,
Mike