• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Outreach Pro Responsive (Home-bottom, html tables)

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Outreach Pro Responsive (Home-bottom, html tables)

This topic is: not resolved

Tagged: home bottom, html, outreach, Outreach Pro, pro, responsive, tables, widget

  • This topic has 2 replies, 2 voices, and was last updated 7 years, 6 months ago by coralseait.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 22, 2015 at 2:34 pm #160142
    djace
    Member

    Hey all,

    I was wondering how to make my home-bottom widgets in Outreach Pro responsive.

    I only wanted three featured pages there so I found a CSS snippet here:

    .home-bottom .widget {
    float: left;
    margin-left: 2.5641025641026%;
    width: 31.076923076923%;
    }

    .home-bottom .widget:nth-child(3n+1) {
    clear: both;
    margin-left: 0;
    }

    This is probably what messed up the responsiveness of the theme. Is there a way to fix this through the media queries?

    I also have a second question regarding HTML tabless. On the Contact Us page, I have a table with addresses and embedded google maps. Is it possible to make this page responsive? I would like for the address to appear first and then the map on mobile, repeat for the second address and map.

    Thanks!

    http://wesn.ca/
    July 22, 2015 at 3:11 pm #160147
    djace
    Member

    Well, I've somewhat fixed the home-bottom widgets responsive problem. I don't know if it's the best fix and I'm still trying to figure out the HTML tables..

    I stuck these into the media queries to fix the home-bottom widgets:

    .home-bottom .widget:nth-of-type(1),
    .home-bottom .widget {
    margin: 0;
    width: 100%;
    }

    .home-bottom .widget:nth-of-type(2),
    .home-bottom .widget {
    margin: 0;
    width: 100%;
    }

    .home-bottom .widget:nth-of-type(3),
    .home-bottom .widget {
    margin: 0;
    width: 100%;
    }

    July 22, 2015 at 8:06 pm #160170
    coralseait
    Member

    Don't use tables for your layout, but Genesis Column Classes http://my.studiopress.com/tutorials/content-column-classes/. They'll do exactly what you want and be responsive. If you like you can try Genesis Easy Columns for ease of use from TinyMCE https://wordpress.org/plugins/genesis-easy-columns/

    To replicate a table you can do (this is a two column table, but works with more columns):

    column-class
    column content
    /column-class
    clear fix
    column-class
    content
    /column-class
    clear fix
    etc

    Note you'd replace column-class with either the divs from the genesis column class tutorial I linked or the shortcodes if using Easy Columns


    Coral Sea IT

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble